可输入下拉框 Comboinput

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

可设置的属性

Name	Type	Default	Description
`name`	String		控件的名字，唯一标志
`title`	String		控件title
`hidden`	Boolean		隐藏
`validates`	Validators		校验器
`value`	String		值
`readonly`	Boolean		只读
`selections`	Array		选项
`url`	String		远程加载待选值的URL JSON数据格式举例：示例如下
`textField`	String	`text`	待选值中显示值的field
`valueField`	String	`value`	待选中真实值的field
`groupField`	String	`group`	待选中真实值的field
`emptySelection`	Boolean		增加一个空待选值
`realText`	Boolean		设置值时的text将被忽略，根据value从待选值取
`dropHeight`	Number		下拉高度
`dropWidth`	Number		下拉宽度，默认跟控件同宽
`group`	Boolean		下拉选项是否分组
`disableinput`	Boolean		是否禁止输入
`inputval`	Boolean		是否保留输入值
`arrowSelect`	Boolean		上下键选择
`dropTrigger`	String	`click`	下拉触发方式 click
`hoverTip`	String		悬停提示
`innerPanel`	Boolean		下拉面板内置（dom渲染在控件dom内）

JSON数据格式举例：

[
    {"text" : "男" , "value" : "1" },
    {"text" : "女" , "value" : "2" }
]

可读取的属性

Name	Type	Default	Description
`name`	String		控件的名字，唯一标志
`title`	String		控件title
`hidden`	Boolean		隐藏
`validates`	Validators		校验器
`value`	String		值
`text`	String		显示文字
`readonly`	Boolean		只读
`selections`	Array		选项
`url`	String		远程加载待选值的URL
`textField`	String	`text`	待选值中显示值的field
`valueField`	String	`value`	待选中真实值的field
`groupField`	String	`group`	待选中真实值的field
`emptySelection`	Boolean		增加一个空待选值
`realText`	Boolean		设置值时的text将被忽略，根据value从待选值取
`dropHeight`	Number		下拉高度
`dropWidth`	Number		下拉宽度，默认跟控件同宽
`group`	Boolean		下拉选项是否分组
`disableinput`	Boolean		是否禁止输入
`inputval`	Boolean		是否保留输入值
`arrowSelect`	Boolean		上下键选择
`dropTrigger`	String	`click`	下拉触发方式 click
`hoverTip`	String		悬停提示
`innerPanel`	Boolean		下拉面板内置（dom渲染在控件dom内）

方法

validate

Description： 执行校验

Name	Type	Description
调用参数		无
返回值	Boolean	校验是否成功

调用举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
var result = widget.doMethod('validate');

intoView

Description： 把控件移动到页面可视范围

调用举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
widget.doMethod('intoView');

addValidator

Description： 增加校验器

调用参数

Name	Type	Description
`validator`	Object	校验器对象

返回值：无

调用举例：

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

removeValidator

Description： 删除校验器

调用参数

Name	Type	Description
`name`	String	校验器名称

返回值：无

调用举例：

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

showValidateMsg

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

调用参数

Name	Type	Description
`msg`	String	提示信息

返回值：无

调用举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
//提示不能为空
widget.doMethod('showValidateMsg' , '控件不能为空');

hideValidateMsg

Description： 隐藏校验信息，多用于自定义校验器的开发

调用举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
widget.doMethod('hideValidateMsg');

select

Description： 通过值来选择对应待选值

调用参数

Name	Type	Description
`val`	String	取消选择的值

返回值：无

调用举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
widget.doMethod('select'  , 'testVal');

clear

Description： 取消选择

调用举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
widget.doMethod('clear');

Description： 打开下拉面板

调用举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
widget.doMethod('dropDown');

事件

change

Description： 值改变

Name	Description
回调函数参数	无

绑定举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
widget.on('change' , function(){
    //控制台输出新值
    console.info('new value' , this.get('value'));
});

Description： 下拉面板显示

Name	Type	Description
回调函数参数		无
`returnValue`	Boolean	`this.returnValue=false` 阻止弹出

绑定举例：

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

renderSelection

Description： 单个选项渲染事件，可以通过this.returnValue来改变自定义html

回调函数参数

Name	Type	Description
`selection`	Object	待选项数据

返回值：String this.returnValue='自定义html' 可以自定义渲染的HTML

绑定举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
widget.on('renderSelection' , function(selection){
    //需要注意如果更改了渲染html 则要注意样式的匹配和跟进
    this.returnValue = '<i>'+selection[this.get('textField')]+'</i>';
});

match

Description： 搜索匹配事件，通过this.returnValue来设置是否匹配

回调函数参数

Name	Type	Description
`word`	String	搜索关键字
`selection`	Object	待选项数据
`item`	Object	待选项的jQuery dom对象

返回值：Boolean this.returnValue=true 匹配（显示待选项）,this.returnValue=false 不匹配（隐藏待选项)

绑定举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
widget.on('match' , function(word , selection , item){
    //更改搜索匹配为 待选项的text和value 如果有一个包含word 就匹配
    this.returnValue = selection[this.get('textField')].indexOf(word) !== -1 
                     ||selection[this.get('valueField')].indexOf(word) !== -1;
});

setSelections

Description： 可以改变selections数据

回调函数参数

Name	Type	Description
`selections`	Array.<Object>	原始待选项数据集合

绑定举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
widget.on('setSelections' , function(selections){
    //给每一个待选项添加一个字段名为exval的额外数据
    for(var i=0 ; i<selections.length ; i++){
        selections[i].exval = '额外数据';
    }
});

select

Description： 选择事件

回调函数参数

Name	Type	Description
`val`	Object	被选择的值

返回值：Boolean this.returnValue=false 禁止选择

绑定举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
widget.on('select' , function(val){
    //如果待选项的值以 'test' 开头则禁止选择
    if(val.indexOf('test') === 0){
        this.returnValue = false;
    }
});

click

Description： 单击

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

dblclick

Description： 双击

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

contextmenu

Description： 弹出上下文菜单

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

mousedown

Description： 鼠标按下

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

mouseup

Description： 鼠标弹起

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

mousemove

Description： 鼠标移动

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

mouseover

Description： 鼠标移动控件上

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

mouseout

Description： 鼠标离开

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

mouseenter

Description： 鼠标移入

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

mouseleave

Description： 鼠标移出

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

keypress

Description： 按键按下并弹起

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

keydown

Description： 按键按下

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

keyup

Description： 按键弹起

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

blur

Description： 失去焦点

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

focus

Description： 获得焦点

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

input

Description： 正在输入

回调函数参数

Name	Type	Description
`e`	Object	jQuery事件对象

绑定举例：

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

hidden

Description： 隐藏事件（隐藏显示触发回调参数为隐藏状态）

回调函数参数

Name	Type	Description
`hiddenState`	Boolean	隐藏状态`true`为隐藏、`false`为取消隐藏

绑定举例：

var widget = vjsp.Parser.getWidgetByName('comboinput');
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('comboinput');
widget.on('readonly' , function(readonlyState){
    if(readonlyState){
        vjsp.alert('控件只读');
    }else{
        vjsp.alert('控件取消只读');
    }
});

# 可输入下拉框 Comboinput

# 可设置的属性

# 可读取的属性

# 方法

# validate

# intoView

# addValidator

# removeValidator

# showValidateMsg

# hideValidateMsg

# select

# clear

# dropDown

# 事件

# change

# dropdown

# renderSelection

# match

# setSelections

# select

# click

# dblclick

# contextmenu

# mousedown

# mouseup

# mousemove

# mouseover

# mouseout

# mouseenter

# mouseleave

# keypress

# keydown

# keyup

# blur

# focus

# input

# hidden

# readonly

可输入下拉框 Comboinput

可设置的属性

可读取的属性

方法

validate

intoView

addValidator

removeValidator

showValidateMsg

hideValidateMsg

select

clear

dropDown

事件

change

dropdown

renderSelection

match

setSelections

select

click

dblclick

contextmenu

mousedown

mouseup

mousemove

mouseover

mouseout

mouseenter

mouseleave

keypress

keydown

keyup

blur

focus

input

hidden

readonly