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... } }, } } }
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4