EasyUI combogrid/combobox过滤时限制只能选择现有项
2015-04-16 17:11
393 查看
EasyUI combogrid/combobox过滤时限制只能选择现有项,有需要的朋友可以参考下。
在使用EasyUI的combogrid时可以通过输入进行过滤,达到快速选择的目的,但是手工输入不存在的项也不会出错,结果提交到数据库后就会产生错误。
比如idField是int型的,输入的数据通过是检索textField,并非int型,无法提交到后台。
如果直接禁止输入,在选项多的时候就很难快速选择了。
现在的解决方案是通过多个事件来判断是否输入了不存在的项目:
首先在手动输入时触发onChange,设置标识为true
当选择现有项时设置selectRow为当前选项
当收起选项时检查是否符合条件,不符合则清除输入内容
在使用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为当前选项
当收起选项时检查是否符合条件,不符合则清除输入内容
相关文章推荐
- EasyUI combogrid/combobox过滤时限制只能选择现有项
- easyUI combobox 文本框 多项选择 限制选择的个数。
- easyui combobox可编辑的情况下,只能首字母开始过滤的问题选项
- Easyui 验证验证扩展,限制combobox 只能输入选项内容
- 解决juqery easyui combobox只能选择问题
- easyui中如何设置下拉列表框combobox只能选择,列表框内不能输入
- easyui combobox可编辑的情况下,只能首字母开始过滤的问题选项
- Easyui + asp.net MVC 系列教程 第19-23 节 完成注销 登录限制过滤 添加用户
- 修改easyui日期控件只显示年月,并且只能选择年月
- easyui 选择框(ComboBox)选中时触发事件
- Easyui combobox 始终选择第一个的问题
- easyui combobox 拼音检索快捷选择输入
- 基于jquery的选择标签至文本域效果,可多选/可过滤重复/可限制个数的实现代码
- easyui combobox 本地数据实现输入中文拼音简码过滤数据
- easyui datebox 限制日期选择大小
- easyui combobox 下拉列表添加选择项
- 摇滚21 选择标签至文本域效果,可多选/可过滤重复/可限制个数(已封装)
- [原] combobox如何让用户不能输入只能从下拉列表里面选择
- EasyUI 1.3.2 中 Combobox自动检索 键盘上下选择Bug问题
- EasyUi日期控件datebox设置,只显示年月,也只能选择年月