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

by:授客 QQ:1033553122

 

测试环境

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;     

}

内容来源于网络如有侵权请私信删除
你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!

相关课程