Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
H
hel-developer-guide
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
chenhao
hel-developer-guide
Commits
e383fe58
Commit
e383fe58
authored
7 years ago
by
custom
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Updates 前端组件/hlsCombobox.md
Auto commit by GitBook Editor
parent
968e6946
master
patch-1
1.0.0-Release
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
161 additions
and
155 deletions
+161
-155
hlsCombobox.md
前端组件/hlsCombobox.md
+161
-155
No files found.
前端组件/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>
```
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment