在使用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过滤时限制只能选择现有项的更多相关文章

  1. easyui中设置开始日期只能选择比结束日期小的日期,js代码获取日期的值

    $("#start_date").datebox({ onSelect: function (beginDate) { $('#end_date').datebox().dateb ...

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

    datagrid combobox输入框非法输入判断与事件总结 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 常见事件 onSelect // 选择下拉列表 ...

  3. Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框

    Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框 Jquery EasyUI Combotree单选框,Jquery EasyUI Combotree只能选择叶子节点 ...

  4. devexpress 的combobox怎样只能选择不能输入

    我们知道listbox和combobox的区别就是listbox是下拉列表框,只能下拉,不支持在listbox中自定义输入,而combobox是textbox和listbox的合体,被称为组合框. c ...

  5. easyui combobox 拼音检索快捷选择输入

    easyui combobox 拼音检索快捷选择输入 效果如图   $.ajax({ url: UserActionUrl + '?action=listuserworktype', dataType ...

  6. C#中的ComboBox实现只能选择不能输入,且下拉框中有默认值。

    下拉框有DropDownStyle这一属性,把DropDownStyle类型选为DropDownList,则下拉框只能选择不能输入了.但是这时的下拉框是没有默认值的,即使在Text属性中输入默认值,也 ...

  7. 雷林鹏分享:jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

  8. EasyUI中combobox的使用方法和一个代码实例

    一.easyUI中select下拉框动态添加option选项 问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功.因为jquery easyui的下拉列表combobox是用DIV模 ...

  9. 表单(中)-EasyUI Combogrid 组合网格、EasyUI Numberbox 数字框、EasyUI Datebox 日期框、EasyUI Datetimebox 日期时间框、EasyUI Calendar 日历

    EasyUI Combogrid 组合网格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults.通过 $.fn.combogrid.defaults 重写 ...

随机推荐

  1. PHP类中self和$this的区别

    1.self代表类,$this代表对象2.能用$this的地方一定使用self,能用self的地方不一定能用$this静态的方法中不能使用$this,静态方法给类访问的. 今天在使用静态方法的时候,使 ...

  2. System.IO.File.WriteAllText("log.txt", "dddd");

    System.IO.File.WriteAllText("log.txt", "dddd");

  3. GUI编程及文件对话框的使用

    import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.io.File; import ...

  4. Unity3D中录制和输出wav文件

    近期在做视频录制方面的事情,看了下音频的录制和输出.主要参考官方的FrameCapturer: https://github.com/unity3d-jp/FrameCapturer wav文件结构较 ...

  5. 转:slf4j-api、slf4j-log4j12、log4j之间关系

    原文:https://www.cnblogs.com/lujiango/p/8573411.html 1. slf4j-api slf4j:Simple Logging Facade for Java ...

  6. atitit 读书与获取知识资料的attilax的总结.docx

    atitit 读书与获取知识资料的attilax的总结.docx 1.1. 读书即是获取知识,获取资料,获取信息的一种方式 2 2. 获取资料信息的目的,有什么作用,有什么用途?? 2 2.1. 扩大 ...

  7. [转]java List和数组相互转换方法

    原文地址:https://blog.csdn.net/zjx2016/article/details/78273192 前言在java项目中数组和list集合(这里指ArrayList)经常需要互相转 ...

  8. wamp 3.0.6(apache 2.4.23) 403 forbidden 解决办法

    https://www.cnblogs.com/airbreak/p/6369764.html

  9. 第四百零四节,python网站第三方登录,social-auth-app-django模块,

    第四百零四节,python网站第三方登录,social-auth-app-django模块, social-auth-app-django模块是专门用于Django的第三方登录OAuth2协议模块 目 ...

  10. 自动化测试工具Katalon简单使用

    前一段时间接触了下Katalon,当时只是简单用了下,今天看到Katalon给发邮件,发现都忘记了,因此重新学习并记录下来 Katalon是在Selemium相同的内核上构建起来的一个自动化测试工具 ...