关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

easyui combobox 只能从下拉中选择值

发布时间:2019-11-09 09:22:08

easyui combobox 只能从下拉中选择值:

onHidePanel : function () {
                  var _options = $(this).combobox('options');
                  var _data = $(this).combobox('getData');/* 下拉框所有选项 */
                  var _value = $(this).combobox('getValue');/* 用户输入的值 */
                  var _b = false;/* 标识是否在下拉列表中找到了用户输入的字符 */
                  for (var i = 0; i < _data.length; i++) {
                     if (_data[i][_options.valueField] == _value) 
                     {
                         _b = true;
                        break;
                     }
                            }
                     if (!_b) 
                     {
                      $.messager.alert('警告', '只能从下拉列表中选择值!');   
                      $(this).combobox('setValue', '');
                     }
                        }


另外一个方法:

EasyUI combogrid/combobox过滤时限制只能选择现有项,有需要的朋友可以参考下。

在使用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;
            }
        });
    });


easyui combogrid另一种方法(这种方法也可以):

onHidePanel: function () {
                 var t = $(this).combogrid('getValue');//获取combogrid的值
                 var g = $(this).combogrid('grid');// 获取数据表格对象
                 var r = g.datagrid('getSelected');// 获取选择的行
                 console.log(r);
                 if (r == null || t != r.subjectName) {//没有选择或者选项不相等时清除内容
                    $.messager.alert('警告', '请选择,不要直接输入!');   
                    $(this).combogrid('setValue', '');
                 } else {
                       //do something...
                       }
                }


最终配合的方法:好用 good  reversed结合onHidePanel

limitToList: true,//只能从下拉中选择值
 reversed: true,//定义在失去焦点的时候是否恢复原始值。
onHidePanel: function () {
                  var t = $(this).combogrid('getValue');//获取combogrid的值
                  var g = $(this).combogrid('grid');// 获取数据表格对象
                  var r = g.datagrid('getSelected');// 获取选择的行
                  console.log(r);
                  if (r == null || t != r.subjectName) {//没有选择或者选项不相等时清除内容
                     $.messager.alert('警告', '请选择,不要直接输入!');   
                     $(this).combogrid('setValue', '');
                     } 
                     else 
                     {
                       //do something...
                      }
                        },
            {
                title: '项目(品名)', field: 'serviceName', sortable: true, width: '150', editor: {
                    type: 'combogrid', options: {
                        required: true, panelWidth: 150, validType: 'length[1,1000]', url: '/sys/ashx/DataSourceFieldHandler.ashx?tablename=MJaccountingSubjects&wherefield=usetype&wherestr=room&field=subjectType&q=收入', columns: [[
                            { field: 'KeyId', title: 'ID', width: 20, hidden: false },
                            { field: 'subjectType', title: '类型', width: 30, hidden: false },
                            { field: 'subjectName', title: '项目', width: 100 },
                            { field: 'note', title: '备注', hidden: true, width: 100 },
                        ]], textField: 'subjectName', idField: 'subjectName', missingMessage: '服务名称不能为空!',
                        limitToList: true,//只能从下拉中选择值
                        reversed: true,//定义在失去焦点的时候是否恢复原始值。
                        onHidePanel: function () {
                            var t = $(this).combogrid('getValue');//获取combogrid的值
                            var g = $(this).combogrid('grid');// 获取数据表格对象
                            var r = g.datagrid('getSelected');// 获取选择的行
                            console.log(r);
                            if (r == null || t != r.subjectName) {//没有选择或者选项不相等时清除内容
                                $.messager.alert('警告', '请选择,不要直接输入!');   
                                $(this).combogrid('setValue', '');
                            } else {
                                //do something...
                            }
                        },
                 
                    }
                }
            }



/template/Home/Zkeys/PC/Static