树形下拉框 Combotree
Constructor
Implements: Widget
Tutorials: 控件对象使用快速入门
可设置的属性
Name | Type | Default | Description |
---|---|---|---|
name | String | 控件的名字,唯一标志 | |
title | String | 控件title | |
hidden | Boolean | 隐藏 | |
readonly | Boolean | 只读 | |
idField | String | id | 数据中主键的field |
pidField | String | pId | 数据中父节点的field |
textField | String | text | 数据中显示值的field |
valueField | String | value | 数据中真实值的field |
url | String | 远程待选值地址 | |
showLine | Boolean | 是否显示树形连线 | |
showIcon | Boolean | 是否显示树形图标 | |
lazy | Boolean | 是否延迟加载待选值 | |
dropHeight | Number | 200 | 下拉高度 |
dropWidth | Number | 下拉宽度,默认跟控件同宽 | |
hoverTip | String | 悬停提示 |
可读取的属性
Name | Type | Description |
---|---|---|
name | String | 控件的名字,唯一标志 |
title | String | 控件title |
hidden | Boolean | 隐藏 |
readonly | Boolean | 只读 |
idField | String | 数据中主键的field |
pidField | String | 数据中父节点的field |
textField | String | 数据中显示值的field |
valueField | String | 数据中真实值的field |
url | String | 远程待选值地址 |
showLine | Boolean | 是否显示树形连线 |
showIcon | Boolean | 是否显示树形图标 |
lazy | Boolean | 是否延迟加载待选值 |
dropHeight | Number | 下拉高度 |
dropWidth | Number | 下拉宽度,默认跟控件同宽 |
hoverTip | String | 悬停提示 |
hidden | 隐藏事件(隐藏显示触发 回调参数为隐藏状态) |
方法
validate
Description: 执行校验
返回值: Boolean 校验是否成功
调用举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
var result = widget.doMethod('validate');
intoView
Description: 把控件移动到页面可视范围
调用举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.doMethod('intoView');
addValidator
Description: 增加校验器
调用参数
Name | Type | Description |
---|---|---|
validator | Object | 校验器对象 |
返回值: 无
调用举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
//通过api增加必填校验器
widget.doMethod('addValidator' , vjsp.Validators.get(
'required',
[],
widgetLang.validate.required
));
removeValidator
Description: 删除校验器
调用参数
Name | Type | Description |
---|---|---|
name | String | 校验器名称 |
返回值: 无
调用举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
//删除必填校验
widget.doMethod('removeValidator' , 'required');
showValidateMsg
Description: 显示校验信息,多用于自定义校验器的开发
调用参数
Name | Type | Description |
---|---|---|
msg | String | 提示信息 |
返回值: 无
调用举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
//提示不能为空
widget.doMethod('showValidateMsg' , '控件不能为空');
hideValidateMsg
Description: 隐藏校验信息,多用于自定义校验器的开发
调用举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.doMethod('hideValidateMsg');
事件
change
Description: 值改变 绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('change' , function(){
//控制台输出新值
console.info('new value' , this.get('value'));
});
dropdown
Description: 面板打开
Name | Type | Description |
---|---|---|
回调函数参数 | 无 | |
returnValue | Boolean | this.returnValue=false 阻止打开 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('dropdown' , function(){
//阻止弹出
this.returnValue = false;
});
select
Description: 选择事件
回调函数参数
Name | Type | Description |
---|---|---|
node | Object | 树节点数据 |
返回值:Boolean this.returnValue=false
阻止选择
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('select' , function(node){
//如果节点的值以'test'开头 则阻止选择
if(node[this.get('valueField')].indexOf('test') === 0){
this.returnValue = false;
}
});
match
Description: 搜索匹配事件,通过this.returnValue
来设置是否匹配
回调函数参数
Name | Type | Description |
---|---|---|
word | String | 搜索关键字 |
selection | Object | 待选项数据 |
返回值:Boolean this.returnValue=true
匹配(显示待选项),this.returnValue=false
不匹配(隐藏待选项)
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('match' , function(word , selection){
//更改搜索匹配为 待选项的text和value 如果有一个包含word 就匹配
this.returnValue = selection[this.get('textField')].indexOf(word) !== -1
||selection[this.get('valueField')].indexOf(word) !== -1;
});
click
Description: 单击
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('click' , function(e){
vjsp.alert('click event');
});
dblclick
Description: 双击
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('dblclick' , function(e){
vjsp.alert('dblclick event');
});
contextmenu
Description: 弹出上下文菜单
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('contextmenu' , function(e){
vjsp.alert('contextmenu event');
});
mousedown
Description: 鼠标按下
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mousedown' , function(e){
vjsp.alert('mousedown event');
});
mouseup
Description: 鼠标弹起
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mouseup' , function(e){
vjsp.alert('mouseup event');
});
mousemove
Description: 鼠标移动
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mousemove' , function(e){
vjsp.alert('mousemove event');
});
mouseover
Description: 鼠标移动控件上
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mouseover' , function(e){
vjsp.alert('mouseover event');
});
mouseout
Description: 鼠标离开
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mouseout' , function(e){
vjsp.alert('mouseout event');
});
mouseenter
Description: 鼠标移入
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mouseenter' , function(e){
vjsp.alert('mouseenter event');
});
mouseleave
Description: 鼠标移出
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mouseleave' , function(e){
vjsp.alert('mouseleave event');
});
keypress
Description: 按键按下并弹起
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('keypress' , function(e){
vjsp.alert('keypress event');
});
keydown
Description: 按键按下
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('keydown' , function(e){
vjsp.alert('keydown event');
});
keyup
Description: 按键弹起
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('keyup' , function(e){
vjsp.alert('keyup event');
});
blur
Description: 失去焦点
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('blur' , function(e){
vjsp.alert('blur event');
});
focus
Description: 获得焦点
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('focus' , function(e){
vjsp.alert('focus event');
});
input
Description: 正在输入
回调函数参数
Name | Type | Description |
---|---|---|
e | Object | jQuery事件对象 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('input' , function(e){
vjsp.alert('input event');
});
hidden
Description: 隐藏事件(隐藏显示触发 回调参数为隐藏状态)
回调函数参数
Name | Type | Description |
---|---|---|
hiddenState | Boolean | 隐藏状态true 为隐藏、false 为取消隐藏 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('hidden' , function(hiddenState){
if(hiddenState){
vjsp.alert('控件被隐藏');
}else{
vjsp.alert('控件取消隐藏');
}
});
readonly
Description: 只读事件 (只读状态改变触发 回调参数为只读状态)
回调函数参数
Name | Type | Description |
---|---|---|
readonlyState | Boolean | 只读状态 true 为只读、false 为取消只读 |
绑定举例:
var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('readonly' , function(readonlyState){
if(readonlyState){
vjsp.alert('控件只读');
}else{
vjsp.alert('控件取消只读');
}
});