Skip to content

H
hel-developer-guide
Commit e383fe58 authored by custom's avatar custom
Browse files
Options

Updates 前端组件/hlsCombobox.md 

Auto commit by GitBook Editor
parent 968e6946
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 155 deletions
前端组件/hlsCombobox.md
View file @ e383fe58
# hlsCombobox标签
# Combobox标签
hlsCombobox 下拉列表组件
ComboBox下拉列表组件
```xml
```xml <h: hlsCombobox placeholder="combobox"
<h:combobox placeholder="combobox" valuePrimitive="true"
valuePrimitive="true" dataTextField="text"
dataTextField="text" dataValueField="value"
dataValueField="value" bind="enabled: isEnabled, source: comboboxSource, value:data.productId"
bind="enabled: isEnabled, source: comboboxSource, value:data.productId" style="width: 100%;"/>
style="width: 100%;"/> ```
```
### **主要属性**
### **主要属性**
属性名 | 类型 | 属性名 | 类型 |
-------- | --- | --- | --- |
animation | Boolean | animation | Boolean |
autoBind | Boolean | autoBind | Boolean |
autoWidth | Boolean | autoWidth | Boolean |
cascadeFrom| String | cascadeFrom | String |
cascadeFromField | String | cascadeFromField | String |
clearButton| Boolean | clearButton | Boolean |
dataSource | DataSource | dataSource | DataSource |
dataTextField | String | dataTextField | String |
dataValueField| String | dataValueField | String |
delay | Number | delay | Number |
enable | Boolean | enable | Boolean |
enforceMinLength| Boolean | enforceMinLength | Boolean |
filter | String | filter | String |
fixedGroupTemplate| String \| Function | fixedGroupTemplate | String \| Function |
footerTemplate| String \| Function | footerTemplate | String \| Function |
groupTemplate| String \| Function | groupTemplate | String \| Function |
height| Number | height | Number |
highlightFirst| Boolean | highlightFirst | Boolean |
ignoreCase| Boolean | ignoreCase | Boolean |
index| Number | index | Number |
minLength| Number | minLength | Number |
noDataTemplate| String \| Function | noDataTemplate | String \| Function |
placeholder | String | placeholder | String |
suggest| Boolean | suggest | Boolean |
headerTemplate| String \| Function | headerTemplate | String \| Function |
template| String \| Function | template | String \| Function |
text| String | text | String |
value| String | value | String |
valuePrimitive| Boolean | valuePrimitive | Boolean |
virtual| Boolean | virtual | Boolean |
change| Function | change | Function |
close| Function | close | Function |
dataBound | Function | dataBound | Function |
filtering| Function | filtering | Function |
open| Function | open | Function |
select| Function | select | Function |
cascade| Function | cascade | Function |
> 属性用法请参考KendoUI文档 [http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
> 属性用法请参考KendoUI文档 [http:\/\/docs.telerik.com\/kendo-ui\/api\/javascript\/ui\/combobox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
### **用法示例** ### **用法示例**
```javascript ```javascript
//定义数据源DataSource //定义数据源DataSource
var dataSource= new kendo.data.DataSource({ var dataSource= new kendo.data.DataSource({
data:["one","two"] data:["one","two"]
}); });
//下拉列表渲染函数 //下拉列表渲染函数
var itemTemplate = function (){ var itemTemplate = function (){
//... //...
} }
//选中某一个列表选项后触发 //选中某一个列表选项后触发
function onComboboxChange(e){ function onComboboxChange(e){
var value = this.value(); var value = this.value();
// Use the value of the widget. // Use the value of the widget.
} }
//以上两种函数定义方法皆可 //以上两种函数定义方法皆可
``` ```
```xml ```xml
<h:combobox id="combobox" dataSource="dataSource" clearButton="true" placeholder="test" enable="false" template="fn:itemTemplate" change="onComboboxChange"/> <h:combobox id="combobox" dataSource="dataSource" clearButton="true" placeholder="test" enable="false" template="fn:itemTemplate" change="onComboboxChange"/>
``` ```
> **提示:** 某些属性类型为**String \| Function** 时，表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" )
> **提示:** 某些属性类型为**String \| Function** 时，表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分\(例如函数template="fn:itemTemplate" \)
### **主要子节点**
* animation ### **主要子节点**
* popup
* virtual * animation
* popup
### **animation** * virtual
主要用来定义动画效果，例如打开关闭效果
### **animation**
* open 打开效果
* close 关闭效果 主要用来定义动画效果，例如打开关闭效果
属性| 类型 * open 打开效果
------ |---- * close 关闭效果
effects| String
duration| Number | 属性 | 类型 |
| --- | --- |
```xml | effects | String |
<h:combobox id="combobox"> | duration | Number |
<h:animation>
<h:close effects="zoom:out" duration="300"/> ```xml
<h:open effects="zoom:in" duration="300"/> <h:combobox id="combobox">
</h:animation> <h:animation>
</h:combobox> <h:close effects="zoom:out" duration="300"/>
``` <h:open effects="zoom:in" duration="300"/>
### **popup** </h:animation>
弹出窗口设置 </h:combobox>
```
属性| 类型
--------|------ ### **popup**
appendTo| String
origin | String 弹出窗口设置
position| String
| 属性 | 类型 |
```xml | --- | --- |
<h:combobox id="combobox"> | appendTo | String |
<h:popup appendTo="container" origin="top left" position="top left"/> | origin | String |
</h:combobox> | position | String |
```
```xml
### **virtual** <h:combobox id="combobox">
动态加载相关设置 <h:popup appendTo="container" origin="top left" position="top left"/>
</h:combobox>
属性 | 类型 ```
-----------|-----
itemHeight | Number ### **virtual**
mapValueTo | String
valueMapper| Function 动态加载相关设置
| 属性 | 类型 |
```javascript | --- | --- |
function valueMapper(){ | itemHeight | Number |
$.ajax({ | mapValueTo | String |
url: "http://demos.telerik.com/kendo-ui/service/Orders/ValueMapper", | valueMapper | Function |
type: "GET",
dataType: "jsonp", ```javascript
data: convertValues(options.value), function valueMapper(){
success: function(data) { $.ajax({
//the **data** is either index or array of indices. url: "http://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
//Example: type: "GET",
// 10258 -> 10 (index in the Orders collection) dataType: "jsonp",
// [10258, 10261] -> [10, 14] (indices in the Orders collection) data: convertValues(options.value),
options.success(data); 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 }
<h:combobox id="combobox"> })
<h:virtual itemHeight ="20" mapValueTo="index" valueMapper="valueMapper"/> }
</h:combobox> ```
```
```xml
<h:combobox id="combobox">
<h:virtual itemHeight ="20" mapValueTo="index" valueMapper="valueMapper"/>
</h:combobox>
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment