hlsCombobox.md 3.45 KB
Newer Older
1 2
# hlsCombobox标签

3
hlsCombobox 下拉列表组件
4 5

```xml
6
 <h: hlsCombobox  placeholder="hlsCombobox" 
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
             valuePrimitive="true" 
             dataTextField="text"
             dataValueField="value" 
             bind="enabled: isEnabled, source: comboboxSource, value:data.productId" 
             style="width: 100%;"/>
```

### **主要属性**

| 属性名 | 类型 |
| --- | --- |
| animation | Boolean |
| autoBind | Boolean |
| autoWidth | Boolean |
| cascadeFrom | String |
| cascadeFromField | String |
| clearButton | Boolean |
| dataSource | DataSource |
| dataTextField | String |
| dataValueField | String |
| delay | Number |
| enable | Boolean |
| enforceMinLength | Boolean |
| filter | String |
| fixedGroupTemplate | String \| Function |
| footerTemplate | String \| Function |
| groupTemplate | String \| Function |
| height | Number |
| highlightFirst | Boolean |
| ignoreCase | Boolean |
| index | Number |
| minLength | Number |
| noDataTemplate | String \| Function |
| placeholder | String |
| suggest | Boolean |
| headerTemplate | String \| Function |
| template | String \| Function |
| text | String |
| value | String |
| valuePrimitive | Boolean |
| virtual | Boolean |
| change | Function |
| close | Function |
| dataBound | Function |
| filtering | Function |
| open | Function |
| select | Function |
| cascade | Function |

> 属性用法请参考KendoUI文档 [http:\/\/docs.telerik.com\/kendo-ui\/api\/javascript\/ui\/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)

### **用法示例**

```xml
61
<h: hlsCombobox  id="hlsCombobox" dataSource="dataSource" clearButton="true" placeholder="test" enable="false" template="fn:itemTemplate" change="onComboboxChange"/>
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
```

> **提示:** 某些属性类型为**String \| Function** 时,表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分\(例如函数template="fn:itemTemplate" \)

### **主要子节点**

* animation
* popup
* virtual

### **animation**

主要用来定义动画效果,例如打开关闭效果

* open 打开效果 
* close 关闭效果

| 属性 | 类型 |
| --- | --- |
| effects | String |
| duration | Number |

```xml
85
<h: hlsCombobox  id=" hlsCombobox ">
86 87 88 89
    <h:animation>
       <h:close effects="zoom:out" duration="300"/>
       <h:open effects="zoom:in" duration="300"/>
    </h:animation>
90
</h: hlsCombobox >
91 92 93 94 95 96 97 98 99 100 101 102 103
```

### **popup**

弹出窗口设置

| 属性 | 类型 |
| --- | --- |
| appendTo | String |
| origin | String |
| position | String |

```xml
104
<h: hlsCombobox  id="combobox">
105
    <h:popup appendTo="container" origin="top left" position="top left"/>
106
</h: hlsCombobox >
107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
```

### **virtual**

动态加载相关设置

| 属性 | 类型 |
| --- | --- |
| itemHeight | Number |
| mapValueTo | String |
| valueMapper | Function |

```javascript
function valueMapper(){
    $.ajax({
        url: "http://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
        type: "GET",
        dataType: "jsonp",
        data: convertValues(options.value),
        success: function(data) {
            //the **data** is either index or array of indices.
            //Example:
            // 10258 -> 10 (index in the Orders collection)
            // [10258, 10261] -> [10, 14] (indices in the Orders collection)
            options.success(data);
        }
    })
}
```

```xml
138
<h: hlsCombobox  id="combobox">
139
    <h:virtual itemHeight ="20" mapValueTo="index" valueMapper="valueMapper"/>
140
</h: hlsCombobox >
141 142
```