在使用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. [Vuex] Split Vuex Store into Modules using TypeScript

    When the Vuex store grows, it can have many mutations, actions and getters, belonging to different c ...

  2. 【Linux】Centos下安装ffmpeg

    一.准备工作 1.系统环境:CentOS release 6.9 (Final) 2.安装依赖包 yum install -y autoconf automake cmake freetype-dev ...

  3. Xcode真机调试失败:The identity used to sign the executable is no longer valid

    在Xcode中突然好久没有使用真机调试了.今天使用真机的时候.出现例如以下的警告.并真机执行失败: The identity used to sign the executable is no lon ...

  4. Spark的历史与发展(目录)

    对于一个具有相当技术门槛与复杂度的平台,Spark从诞生到正式版本的成熟,经历的时间如此之短,让人感到惊诧.2009年,Spark诞生于伯克利大学AMPLab,最开初属于伯克利大学的研究性项目.它于2 ...

  5. Unity StreamingMipmaps 简单测试

    StreamingMipmaps是Unity2018.2中加入的新功能,意指通过CPU控制,只加载部分Mipmap图片以节省更多的内存及显存空间. 我测试时遇到了问题,后来发现必须打包出来测才有效(注 ...

  6. 检查linux的磁盘空间占用

    先初步看看哪个目录占用最大$ df -h 然后细看遍历某目录的占用情况:$ sudo du -a /data  | sort -nr | less(单位是KB)

  7. Mac笔记本中是用Idea开发工具在Java项目中调用python脚本遇到的环境变量问题解决

    问题描述: mac笔记本本身会自带几个python版本,比如python2.7版本,我没有改动mac默认的python版本,只是安装了python3.7版本. 使用Pycharm开发Python项目没 ...

  8. python – 基于pandas中的列中的值从DataFrame中选择行

    如何从基于pandas中某些列的值的DataFrame中选择行?在SQL中我将使用: select * from table where colume_name = some_value. 我试图看看 ...

  9. 用反卷积(Deconvnet)可视化理解卷积神经网络还有使用tensorboard

    『cs231n』卷积神经网络的可视化与进一步理解 深度学习小白——卷积神经网络可视化(二) TensorBoard--TensorFlow可视化 原文地址:http://blog.csdn.net/h ...

  10. Visual studio中编译和使用libpng和zlib

    Visual studio中编译和使用libpng和zlib https://blog.csdn.net/jinzhuojun/article/details/7972747