在使用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. 毕加索发布轻量化转化引擎及BIMSOP协作云平台

    一直以来,杂务缠身,博客都好久没有更新了,以后还是要继续坚持总结一下.希望能有时间坚持下去 :) 月初在国家会议中的智能展会上,我分享了毕加索公司近来的工作,即自行研发的轻量化转化云平台,以及以此为基 ...

  2. Lazarus 初识

    Lazarus 使用 Free Pascal 的编译器,支持 Object Pascal 语言,与 Delphi 高度兼容,并看做后者的自由软件替代品. Lazarus 下载与安装 我们先去 Laza ...

  3. 未能加载文件或程序集“SuperMap.Data.dll”

    重新配置的新的开发环境,使用的是原来的工程文件,编译通过,运行报错:"未能加载文件或程序集"SuperMap.Data.dll"或它的某一个依赖项.找不到指定的模块&qu ...

  4. PHP知识梳理

      前端 HTML.CSS. JS(DOM操作.事件操作).Jquery(选择器.属性/值操作.事件操作).ajax PHP基础 变量(类型.类型转换) 常量(系统.自定义) 运算(算术.字符串.赋值 ...

  5. SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

  6. 深入理解linux系统下proc文件系统内容

    深入理解linux系统下proc文件系统内容 内容摘要:Linux系统上的/proc目录是一种文件系统,即proc文件系统. Linux系统上的/proc目录是一种文件系统,即proc文件系统.与其它 ...

  7. Atitit 分布式管理 vs 集中式管理

    Atitit 分布式管理 vs 集中式管理 1. 集中式管理缺点 1 1.1. 单点故障 1 1.2. 没有灵活性 1 1.3. 打败vs 征服 参考 尼可罗·马基雅弗利编著的<君主论> ...

  8. vue2.0引入现有css文件

    1.在vue文件中的<style>内填写需要引用的文件 如: @import "./css/indexTest.css";

  9. Elasticsearch常用配置及性能参数[转]

    cluster.name: estest   集群名称node.name: “testanya”  节点名称 node.master: false  是否主节点node.data: true   是否 ...

  10. yaf项目将500错误打印到页面上

    一般在yaf项目调试的时候,如果代码有错误,页面只会响应500错误,但看不到哪里报了什么错误,通过开启yaf的一个配置可以将错误信息显示在页面上. 打开项目的index.php入口文件,在开头加入如下 ...