树形下拉框 Combotree

Constructor

Implements: Widget

Tutorials: 控件对象使用快速入门

可设置的属性

NameTypeDefaultDescription
nameString控件的名字,唯一标志
titleString控件title
hiddenBoolean隐藏
readonlyBoolean只读
idFieldStringid数据中主键的field
pidFieldStringpId数据中父节点的field
textFieldStringtext数据中显示值的field
valueFieldStringvalue数据中真实值的field
urlString远程待选值地址
showLineBoolean是否显示树形连线
showIconBoolean是否显示树形图标
lazyBoolean是否延迟加载待选值
dropHeightNumber200下拉高度
dropWidthNumber下拉宽度,默认跟控件同宽
hoverTipString悬停提示

可读取的属性

NameTypeDescription
nameString控件的名字,唯一标志
titleString控件title
hiddenBoolean隐藏
readonlyBoolean只读
idFieldString数据中主键的field
pidFieldString数据中父节点的field
textFieldString数据中显示值的field
valueFieldString数据中真实值的field
urlString远程待选值地址
showLineBoolean是否显示树形连线
showIconBoolean是否显示树形图标
lazyBoolean是否延迟加载待选值
dropHeightNumber下拉高度
dropWidthNumber下拉宽度,默认跟控件同宽
hoverTipString悬停提示
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: 增加校验器

调用参数

NameTypeDescription
validatorObject校验器对象

返回值: 无

调用举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
//通过api增加必填校验器
widget.doMethod('addValidator' , vjsp.Validators.get(
    'required',
    [],
    widgetLang.validate.required
));

removeValidator

Description: 删除校验器

调用参数

NameTypeDescription
nameString校验器名称

返回值: 无

调用举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
//删除必填校验
widget.doMethod('removeValidator' , 'required');

showValidateMsg

Description: 显示校验信息,多用于自定义校验器的开发

调用参数

NameTypeDescription
msgString提示信息

返回值: 无

调用举例:

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'));
});

Description: 面板打开

NameTypeDescription
回调函数参数
returnValueBooleanthis.returnValue=false 阻止打开

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('dropdown' , function(){
    //阻止弹出
    this.returnValue = false;
});

select

Description: 选择事件

回调函数参数

NameTypeDescription
nodeObject树节点数据

返回值: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来设置是否匹配

回调函数参数

NameTypeDescription
wordString搜索关键字
selectionObject待选项数据

返回值: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: 单击

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('click' , function(e){
    vjsp.alert('click event');
});

dblclick

Description: 双击

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('dblclick' , function(e){
    vjsp.alert('dblclick event');
});

contextmenu

Description: 弹出上下文菜单

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('contextmenu' , function(e){
    vjsp.alert('contextmenu event');
});

mousedown

Description: 鼠标按下

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mousedown' , function(e){
    vjsp.alert('mousedown event');
});

mouseup

Description: 鼠标弹起

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mouseup' , function(e){
    vjsp.alert('mouseup event');
});

mousemove

Description: 鼠标移动

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mousemove' , function(e){
    vjsp.alert('mousemove event');
});

mouseover

Description: 鼠标移动控件上

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mouseover' , function(e){
    vjsp.alert('mouseover event');
});

mouseout

Description: 鼠标离开

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mouseout' , function(e){
    vjsp.alert('mouseout event');
});

mouseenter

Description: 鼠标移入

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mouseenter' , function(e){
    vjsp.alert('mouseenter event');
});

mouseleave

Description: 鼠标移出

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('mouseleave' , function(e){
    vjsp.alert('mouseleave event');
});

keypress

Description: 按键按下并弹起

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('keypress' , function(e){
    vjsp.alert('keypress event');
});

keydown

Description: 按键按下

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('keydown' , function(e){
    vjsp.alert('keydown event');
});

keyup

Description: 按键弹起

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('keyup' , function(e){
    vjsp.alert('keyup event');
});

blur

Description: 失去焦点

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('blur' , function(e){
    vjsp.alert('blur event');
});

focus

Description: 获得焦点

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('focus' , function(e){
    vjsp.alert('focus event');
});

input

Description: 正在输入

回调函数参数

NameTypeDescription
eObjectjQuery事件对象

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('input' , function(e){
    vjsp.alert('input event');
});

hidden

Description: 隐藏事件(隐藏显示触发 回调参数为隐藏状态)

回调函数参数

NameTypeDescription
hiddenStateBoolean隐藏状态true为隐藏、false为取消隐藏

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('hidden' , function(hiddenState){
    if(hiddenState){
        vjsp.alert('控件被隐藏');
    }else{
        vjsp.alert('控件取消隐藏');
    }
});

readonly

Description: 只读事件 (只读状态改变触发 回调参数为只读状态)

回调函数参数

NameTypeDescription
readonlyStateBoolean只读状态 true为只读、false为取消只读

绑定举例:

var widget = vjsp.Parser.getWidgetByName('combotree');
widget.on('readonly' , function(readonlyState){
    if(readonlyState){
        vjsp.alert('控件只读');
    }else{
        vjsp.alert('控件取消只读');
    }
});