HlsCombobox.md

# hlsCombobox标签

ComboBox下拉列表组件，通常数据源以code - meaning形式出现，用户操作的是meaning，实际保存的是code。

```xml

    <h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
                   bind="enabled: isEnabled,source: sdDataSource, value:data.code"
                   colspan="3"
                   dataTextField="meaning"
                   dataValueField="code"
                   placeholder="hlsCombobox"
                   prompt="hlsCombobox"
                   promptColspan="1"
                   valuePrimitive="true"
                   style="width:100%"
    />
    
```

### **主要属性**
属性名    | 类型
-------- | ---
id | String
promptColspan | String
promptClassName | String
promptImage | String
prompt | String
colspan | String
hlsClassName | String
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) 


### **用法示例*

```javascript



//对于系统定义好的数据源
<script src="${base.contextPath}/common/code?sdDataSource=FND.CODING_RULE_TYPE" type="text/javascript"></script>


//自定义静态数据源sdDataSource
var sdDataSource= new kendo.data.DataSource({
    data:["one","two"]
});

//自定义动态查询到的数据源sdDataSource
$.ajax({
    type : 'GET',
    url : url,
    async: false, 
    contentType : "application/json; charset=utf-8",
    success : function(datas) {
        viewModel.set("sdDataSource,",datas.rows);
    }
});

//需要注意，bind中写dataSource，需要在viewModel中定义
var viewModel = kendo.observable({
	enabled: true,
	isEnabled: false,
	data: {},
    sdDataSource:sdDataSource, 
});

//下拉列表渲染函数
var itemTemplate = function (){
    //...
}

//选中某一个列表选项后触发
function onComboboxChange(e){
    var value = this.value();
    // Use the value of the widget.
}
//以上两种函数定义方法皆可
```

```xml
    <h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
                   bind="enabled: isEnabled,source: sdDataSource, value:data.code"
                   colspan="3"
                   dataTextField="meaning"
                   dataValueField="code"
                   placeholder="hlsCombobox"
                   prompt="hlsCombobox"
                   promptColspan="1"
                   valuePrimitive="true"
                   style="width:100
                   change="onComboboxChange"
                   template="fn:itemTemplate"
                   
    />
```
#### 特别注意 valuePrimitive="true" 如果该值为false，选中的值将不会匹配给dataTextField和dataValueField
dataValueField
> **提示:** 某些属性类型为**String \| Function** 时，表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" )