Easyui datagrid combobox输入框非法输入判断与事件总结

测试环境

jquery-easyui-1.5.3

常见事件

onSelect // 选择下拉列表项时触发的事件

onHidePanel // 收起下拉列表时触发的事件

onChange // commbox输入框的值改变时触发事件

单选Combobox

针对单选Combobox

1、点选

通过点选下拉列表中可选项,并自动收起下拉列表

如果选取项和当前输入框的值不一样，会先后触发事件：onSelect -> onChange -> onHidePanel；

如果选取项和当前输入框的值一样，仅会触发事件：onHidePanel

2、输入

通过在Combobox输入框中手动输入数据

如果停止输入后的数据和输入前的值不一样，则触发事件：onChange

连续不停的输入(时间间隔够短)只能算一次输入,只会触发一次onChange事件，收起下拉框时自动触发onHidePanel事件。

根据以上规律，我们可以通过是否触发onSelect来区分是否是“手动”输入还是“点选”输入，进而判断输入是否合法：如果是“手动”输入，那就判断输入值是否在下拉列表里，否则判断选取值是否和当前combobox输入框的一致。

关键代码

<script type="text/javascript">

var textChanged=false; // 用于判断是否combobox选取、输入的内容是否改变

var rowsSelected=undefined; // 用于记录选取的行

// 选择下拉列表项时触发的事件

function onSelect(row) {

rowsSelected = row;

}

// commbox输入框的值改变时触发事件

textChanged = true;

}

// 收起下拉列表时触发的事件

function onHidePanel() {

var text = $(this).combobox('getText'); // 获取输入的值

if (textChanged) {

if (rowsSelected == undefined) { // 表明是手动输入的值

// 循环遍历下拉列表框的选项，判断输入值是否存在选项中，否则清空

// getData none 返回加载的数据。

var comboboxData = $(this).combobox('getData');

var if_found = false; // 用于标记输入值是否在选项中

for (var j=0; j<comboboxData.length; j++) {

var dataObj = comboboxData[j];

if (dataObj.productname == text) {

if_found = true;

break;

} else {

if_found = false;

}

}

if (!if_found) {

$(this).combobox('clear'); // clear none 清除组合框（combobox）的值。

$.messager.alert('提示', '请选择现有项', 'warning');

}

} else {

if (text != rowsSelected.productname) {

$(this).combobox('clear');

$.messager.alert('提示', '请选择现有项', 'warning'); }

}

textChanged = false;

}

rowsSelected = undefined;

}

</script>

<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:1000px;height:auto"

data-options="

iconCls: 'icon-edit',

singleSelect: false,

toolbar: '#tb',

url: 'datagrid_data1.json',

method: 'get',

......

">

<thead>

<tr>

<th data-options="field:'productid',width:100,

formatter:function(value,row){

return row.productname;

},

editor:{

type:'combobox',

options:{

valueField:'productid',

textField:'productname',

method:'get',

url:'products.json',

required:true,

onSelect:onSelect,

onHidePanel:onHidePanel,

onChange:onChange

}

}">Product</th>

......

</tr>

</thead>

</table>

多选Combobox

1、点选

新增未选：点选还没有被选中的选项，先后触发事件: onSelect -> onChange

取消已选：点选已经被选中的选项，先后触发事件：onUnselect -> onChange

收起下拉列表时，触发事件: onHidePanel

2、输入

新增未选：输入值如果匹配到下拉列表中的某个未选项，则自动选中该项，先后触发事件: onSelect -> onChange

取消已选：修改已经输入且有匹配项的值，修改成无匹配项的值，则自动取消已选中的对应项，先后触发事件：onUnselect -> onChange

如果停止输入的值和输入前的不一样，则一定会触发onChange，但是不一定触发onSelect，onUnselect事件，仅上述的情况才会触发

另外，调用clear方法清空输入框导致和清空前的不一样，也会调用onChange；调用clear方法清空输入框导致发生取消选中已选项，也会调用onUnselect事件。

收起下拉列表时，触发事件: onHidePanel

通过以上规律，我们可以在触发onSelect事件时，存储选取的值，在触发onUnselect事件时，移除取消选中的值，然后在收起下拉列表时，获取输入框的值和存储的值，转为字符串数组，进行比较，进而判断输入是否合法。

关键代码

<script type="text/javascript">

var textChanged=false; // 用于判断是否combobox选取、输入的内容是否改变

var item_list = []; // 用于存储选取的值

// 选择下拉列表项时触发的事件

function onSelect(row) {

item_list.push(row.productname);

}

function onUnselect(row) {

var index = item_list.indexOf(row.productname);

if(index != -1) {

item_list.splice(index, 1);

}

}

// commbox输入框的值改变时触发事件

function onChange(newValue, oldValue) {

textChanged = true;

}

// 注意，这里，收起下拉列表时，会自动设置newValue为[],oldValue设置为最新的值

// 收起下拉列表时触发的事件

function onHidePanel() {

var text = $(this).combobox('getText'); // 获取输入的值

if (textChanged) {

if (JSON.stringify(text.split(',')) != JSON.stringify(value_list)) {

$(this).combobox('clear');

$.messager.alert('提示', '请选择现有项', 'warning');

}

textChanged = false;

}

textChanged = false;

}

}

</script>

注意：这里使用了JSON.stringify进行转换：数组转成字符串类型的数组，如果选项或者输入值等有不支持字符，可能报错，不够严谨。

<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:1000px;height:auto"

data-options="

iconCls: 'icon-edit',

singleSelect: false,

toolbar: '#tb',

url: 'datagrid_data1.json',

method: 'get',

......

">

<thead>

<tr>

<th data-options="field:'productid',width:100,

formatter:function(value,row){

return row.productname;

},

editor:{

type:'combobox',

options:{

valueField:'productid',

textField:'productname',

method:'get',

url:'products.json',

required:true,

multiple:'true',

onSelect:onSelect,

onHidePanel:onHidePanel,

onChange:onChange

}

}">Product</th>

......

</tr>

</thead>

</table>

说明：

multiple:'true', 设置combobox支持多选。

附：我早些前的做法，如下，获取输入框的值，然后遍历逗号分隔的每项是否在下拉列表中，是的话停止遍历，进行下一个项的检测，只要有一项不符则判断为非法输入。

// 收起多选combobox下拉列表时触发事件

function onHidePanelForCombobox(){

var text = $(this).combobox('getText');

text = text.split(',');

var list = [];

var json = {};

var res = '';

// 去除重复数据

for(var i = 0; i < text.length; i++){

if(!json[text[i]]) {

list.push(text[i]);

res = res + text[i] + ','

json[text[i]] = true;

}

}

res = res.substring(0,res.length-1); // 删除最右侧逗号

if(textChanged) {

var mark = false;

var comboboxData = $(this).combobox('getData');

outerBlock:{

for (var i=0; i<list.length; i++) {

var item = list[i];

innerBlock:{

for (var j=0; j<comboboxData.length; j++) {

var dataObj = comboboxData[j];

if(dataObj.productname == item) {

mark = true; //用户输入项，存在下拉列表选项中,停止查找

break innerBlock;

}else{ //遍历完内存循环还没找到，标记false

mark = false;

}

}

if(!mark) {

break outerBlock;

}

}

}

}

if(!mark) {

$(this).combobox('clear');

$.messager.alert('告警', '请通过下拉列表择现有项', 'warning');

} else {

$(this).combobox('clear');

$(this).combobox('setText', res);

}

}

textChanged = false;

}