Skip to content

H
hel-developer-guide
Commit 742d23a7 authored by zydgitboox's avatar zydgitboox
Browse files
Options

Track 2 files into repository. 

- modified 前端组件/hlsCombobox.md
- modified 前端组件/hlsDatePicker.md

Auto commit by GitBook Editor
parent 0d324227
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 111 deletions
前端组件/hlsCombobox.md
View file @ 742d23a7
# hlsCombobox标签（下拉框） # hlsCombobox标签（下拉框）
ComboBox下拉列表组件，通常数据源以code - meaning形式出现，用户操作的是meaning，实际保存的是code。 ComboBox下拉列表组件，通常数据源以code - meaning形式出现，用户操作的是meaning，实际保存的是code。
```xml ```xml
<h:hlsCombobox name="hlsCombobox" id="hlsCombobox" <h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
bind="enabled: isEnabled,source: sdDataSource, value:data.code" bind="enabled: isEnabled,source: sdDataSource, value:data.code"
colspan="3" colspan="3"
dataTextField="meaning" dataTextField="meaning"
dataValueField="code" dataValueField="code"
placeholder="hlsCombobox" placeholder="hlsCombobox"
prompt="hlsCombobox" prompt="hlsCombobox"
promptColspan="1" promptColspan="1"
valuePrimitive="true" valuePrimitive="true"
style="width:100%" style="width:100%"
/> />
``` ```
### **主要属性** ### **主要属性**
属性名 | 类型 | 说明 | 属性名 | 类型 | 说明 |
--- | --- | --- | --- | --- | --- |
id | String | id | id | String | id |
promptColspan | String | 提示语句需要占几列 | promptColspan | String | 提示语句需要占几列 |
promptClassName | String | 提示语句类名，默认不填 | promptClassName | String | 提示语句类名，默认不填 |
promptImage | String | 提示前面的文字图形，默认不填 | promptImage | String | 提示前面的文字图形，默认不填 |
prompt | String | 提示信息 | prompt | String | 提示信息 |
colspan | String | 所占列数 | colspan | String | 所占列数 |
hlsClassName | String | 类名，默认不填 | hlsClassName | String | 类名，默认不填 |
dataSource | DataSource | 数据源 | dataSource | DataSource | 数据源 |
dataTextField | String | 返回的显示描述字段 | dataTextField | String | 返回的显示描述字段 |
dataValueField| String | 绑定的英文字段 | dataValueField| String | 绑定的英文字段 |
enable | Boolean | 是否可编辑，true为可编辑，false不可编辑 | enable | Boolean | 是否可编辑，true为可编辑，false不可编辑 |
placeholder | String | 占位符 | placeholder | String | 占位符 |
template| Function| 渲染函数 | template| Function| 渲染函数 |
change| Function | 数据变化时触发的函数 | change| 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
//对于系统定义好的数据源 //对于系统定义好的数据源
<script src="${base.contextPath}/common/code?sdDataSource=FND.CODING_RULE_TYPE" type="text/javascript"></script> <script src="${base.contextPath}/common/code?sdDataSource=FND.CODING_RULE_TYPE" type="text/javascript"></script>
//自定义静态数据源sdDataSource //自定义静态数据源sdDataSource
var sdDataSource= new kendo.data.DataSource({ var sdDataSource= new kendo.data.DataSource({
data:["one","two"] data:["one","two"]
}); });
//自定义动态查询到的数据源sdDataSource //自定义动态查询到的数据源sdDataSource
$.ajax({ $.ajax({
type : 'GET', type : 'GET',
url : url, url : url,
async: false, async: false,
contentType : "application/json; charset=utf-8", contentType : "application/json; charset=utf-8",
success : function(datas) { success : function(datas) {
viewModel.set("sdDataSource,",datas.rows); viewModel.set("sdDataSource,",datas.rows);
} }
}); });
//需要注意，bind中写dataSource，需要在viewModel中定义 //需要注意，bind中写dataSource，需要在viewModel中定义
var viewModel = kendo.observable({ var viewModel = kendo.observable({
enabled: true, enabled: true,
isEnabled: false, isEnabled: false,
data: {}, data: {},
sdDataSource:sdDataSource, sdDataSource:sdDataSource,
}); });
//下拉列表渲染函数 //下拉列表渲染函数
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:hlsCombobox name="hlsCombobox" id="hlsCombobox" <h:hlsCombobox name="hlsCombobox" id="hlsCombobox"
bind="enabled: isEnabled,source: sdDataSource, value:data.code" bind="enabled: isEnabled,source: sdDataSource, value:data.code"
colspan="3" colspan="3"
dataTextField="meaning" dataTextField="meaning"
dataValueField="code" dataValueField="code"
placeholder="hlsCombobox" placeholder="hlsCombobox"
prompt="hlsCombobox" prompt="hlsCombobox"
promptColspan="1" promptColspan="1"
valuePrimitive="true" valuePrimitive="true"
style="width:100 style="width:100
change="onComboboxChange" change="onComboboxChange"
template="fn:itemTemplate" template="fn:itemTemplate"
/> />
``` ```
#### 特别注意 valuePrimitive="true" 如果该值为false，选中的值将不会匹配给dataTextField和dataValueField #### 特别注意 valuePrimitive="true" 如果该值为false，选中的值将不会匹配给dataTextField和dataValueField
dataValueField dataValueField
> **提示:** 某些属性类型为**String \| Function** 时，表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" ) > **提示:** 某些属性类型为**String \| Function** 时，表明它可以定义为字符串或者函数。因此当需要定义为Function时需要增加前缀**fn:**来区分(例如函数template="fn:itemTemplate" )
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