EasyUI combogrid/combobox过滤时限制只能选择现有项

来源：互联网发布：2016双十一数据直播编辑：程序博客网时间：2024/06/16 03:02

在使用EasyUI的combogrid时可以通过输入进行过滤，达到快速选择的目的，但是手工输入不存在的项也不会出错，结果提交到数据库后就会产生错误。

比如idField是int型的，输入的数据通过是检索textField，并非int型，无法提交到后台。

如果直接禁止输入，在选项多的时候就很难快速选择了。

现在的解决方案是通过多个事件来判断是否输入了不存在的项目：

        $("#artName").combogrid({            onChange: function (newValue, oldValue) {                artChanged = true;//记录是否有改变（当手动输入时发生)            },            onHidePanel: function () {                var t = $(this).combogrid('getValue');                if (artChanged) {                    if (selectRow == null || t != selectRow.id) {//没有选择或者选项不相等时清除内容                        alert('请选择，不要直接输入');                        $(this).combogrid('setValue', '');                    } else {                        //do something...                    }                }                artChanged = false;                selectRow = null;            },            onShowPanel: function () {            },            panelWidth: 400,            url: 'getInfo.ashx',            idField: 'id',            textField: 'name',            mode: 'remote',            fitColumns: true,            columns: [[                { field: 'id', title: 'ID', width: 20 },                { field: 'Text', title: '类别', width: 80 },                { field: 'name', title: '名称', align: 'left', width: 120 },                { field: 'size', title: '尺码', align: 'left', width: 60 },                {                    field: 'Qty', title: '配额', width: 80, formatter: function (value, row, index) {                        return '每' + row.preYear + '年' + row.Qty + '件';                    }                },                { field: 'classID', title: '类别ID', align: 'center', width: 60, hidden: true }            ]],            onSelect: function (index, row) {                selectRow = row;            }        });    });

首先在手动输入时触发onChange，设置标识为true

当选择现有项时设置selectRow为当前选项

当收起选项时检查是否符合条件，不符合则清除输入内容

0 1