Commit 0d324227 authored by zydgitboox's avatar zydgitboox

Deletes 前端组件/HlsCombobox.md

Auto commit by GitBook Editor
parent 31acb648
# 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 | id |
promptColspan | String | 提示语句需要占几列 |
promptClassName | String | 提示语句类名,默认不填 |
promptImage | String | 提示前面的文字图形,默认不填 |
prompt | String | 提示信息 |
colspan | String | 所占列数 |
hlsClassName | String | 类名,默认不填 |
dataSource | DataSource | 数据源 |
dataTextField | String | 返回的显示描述字段 |
dataValueField| String | 绑定的英文字段 |
enable | Boolean | 是否可编辑,true为可编辑,false不可编辑 |
placeholder | String | 占位符 |
template| Function| 渲染函数 |
change| 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" )
# hlsDatePicker标签
日期选择器(不包含时分秒)
xml配置
```xml
<!--基本用法-->
<h:hlsDatePicker id="hlsDatePickerId" bind="enabled:isEnabled,value:data.value" placeholder="hlsDatePicker"/>
```
### **主要属性**
属性名 | 类型 | 说明 |
-------- | -----| --- |
promptColspan | Integer | 描述字段所占列数 |
promptClassName | String| 描述的样式名称 |
prompt | String| 描述 |
colspan | Integer | datePicker所占列数 |
hlsClassName | String | 样式名称 |
animation | Boolean | 动画 |
format| String | 格式化 |
max| String | 最大时间 |
min| String | 最小时间 |
value | String | 值 |
name | String | name属性 |
bind | Function | 绑定数据 |
required | Boolean | 必输 |
change | Function | chang事件 |
placeholder | String | 占位符 |
timeFormat |String| 时间格式化 |
> **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
### **用法示例**
```javascript
//注意是写在script标签内的
var viewModel = kendo.observable({
data:{},
isEnabled:true
});
function open(){
//...
}
function change(e){
//...
}
```
```xml
<h:hlsDatePicker id="hlsDatePickerId"bind="enabled: isEnabled,value:data.value"
style="width:200px;"
max="2016-6-6"
placeholder="hlsDatePicker"
open="open"
required="true"
change="change"
prompt="日期选择器:"
/>
id:可写可不写;
bind:属性里面包含配置两个选项:
(1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置。
(2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量;
max:可选择日期的上限值;
style可改变该控件的样式;
open:点击控件调用的方法;
change:选择日期之后的事件;
prompt:为控件添加一个label,该属性一般和<h:hlsForm><h:hlsHBox>一起使用;
```
> **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
> - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**"
# hlsDatePicker标签
日期选择器(不包含时分秒)
xml配置
```xml
<!--基本用法-->
<h:hlsDatePicker id="hlsDatePickerId" bind="enabled:isEnabled,value:data.value" placeholder="hlsDatePicker"/>
```
### **主要属性**
属性名 | 类型 | 说明 |
-------- | -----| --- |
promptColspan | Integer | 描述字段所占列数 |
promptClassName | String| 描述的样式名称 |
prompt | String| 描述 |
colspan | Integer | datePicker所占列数 |
hlsClassName | String | 样式名称 |
animation | Boolean | 动画 |
format| String | 格式化 |
max| String | 最大时间 |
min| String | 最小时间 |
value | String | 值 |
name | String | name属性 |
bind | Function | 绑定数据 |
required | Boolean | 必输 |
change | Function | chang事件 |
placeholder | String | 占位符 |
timeFormat |String| 时间格式化 |
> **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
### **用法示例**
```javascript
//注意是写在script标签内的
var viewModel = kendo.observable({
data:{},
isEnabled:true
});
function open(){
//...
}
function change(e){
//...
}
```
```xml
<h:hlsDatePicker id="hlsDatePickerId"bind="enabled: isEnabled,value:data.value"
style="width:200px;"
max="2016-6-6"
placeholder="hlsDatePicker"
open="open"
required="true"
change="change"
prompt="日期选择器:"
/>
id:可写可不写;
bind:属性里面包含配置两个选项:
(1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置。
(2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量;
max:可选择日期的上限值;
style可改变该控件的样式;
open:点击控件调用的方法;
change:选择日期之后的事件;
prompt:为控件添加一个label,该属性一般和<h:hlsForm><h:hlsHBox>一起使用;
```
> **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
> - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**"
# hlsDatePicker标签
日期选择器(不包含时分秒)
xml配置
```xml
<!--基本用法-->
<h:hlsDatePicker id="hlsDatePickerId" bind="enabled:isEnabled,value:data.value" placeholder="hlsDatePicker"/>
```
### **主要属性**
属性名 | 类型 | 说明 |
-------- | -----| --- |
promptColspan | Integer | 描述字段所占列数 |
promptClassName | String| 描述的样式名称 |
prompt | String| 描述 |
colspan | Integer | datePicker所占列数 |
hlsClassName | String | 样式名称 |
animation | Boolean | 动画 |
format| String | 格式化 |
max| String | 最大时间 |
min| String | 最小时间 |
value | String | 值 |
name | String | name属性 |
bind | Function | 绑定数据 |
required | Boolean | 必输 |
change | Function | chang事件 |
placeholder | String | 占位符 |
timeFormat |String| 时间格式化 |
> **提示:** 属性用法请参考kendoui API文档 http://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker
### **用法示例**
```javascript
//注意是写在script标签内的
var viewModel = kendo.observable({
data:{},
isEnabled:true
});
function open(){
//...
}
function change(e){
//...
}
```
```xml
<h:hlsDatePicker id="hlsDatePickerId"bind="enabled: isEnabled,value:data.value"
style="width:200px;"
max="2016-6-6"
placeholder="hlsDatePicker"
open="open"
required="true"
change="change"
prompt="日期选择器:"
/>
id:可写可不写;
bind:属性里面包含配置两个选项:
(1)enabled配置日期选择器是否可以编辑,值为Boolean类型的变量,在viewModel里面配置。
(2)value配置日期选择器与变量关联,默认是在ViewModel下面的变量;
max:可选择日期的上限值;
style可改变该控件的样式;
open:点击控件调用的方法;
change:选择日期之后的事件;
prompt:为控件添加一个label,该属性一般和<h:hlsForm><h:hlsHBox>一起使用;
```
> **提示:**
> - 上述所有属性直接添加在标签内即可,(**[属性名] = "..."**),对于既是**String**类型又是**Function**类型的属性,只需要加**fn:**前缀区分即可,(**fn:函数名**)
> - 对于**max min**等本该是**时间类型**的属性,改为日期字符串,且连接符号为"**-**"
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