EasyUI combogrid/combobox过滤时限制只能选择现有项

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;
            }
        });
    });

首先在手动输入时触发onChange,设置标识为true

当选择现有项时设置selectRow为当前选项

当收起选项时检查是否符合条件,不符合则清除输入内容

时间: 2025-01-22 13:12:24

EasyUI combogrid/combobox过滤时限制只能选择现有项的相关文章

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

$("#start_date").datebox({ onSelect: function (beginDate) { $('#end_date').datebox().datebox('calendar').calendar({ validator: function (endDate) { var date = new Date(); return beginDate <= endDate; } }); } }); //获取日期框的值用js代码 $('#start_date'

easyui中如何设置下拉列表框combobox只能选择,列表框内不能输入

像下面这样,用easyui的combobox做的下拉列表,要使它只可以选择列表里面的值,不可以直接输入或删除值 data-options在支持HTML5的浏览器中有效,如果浏览器版本较低,那么最好直接把配置写成属性,例如: <input id="demoCombo" type="text" class="easyui-combobox" editable="false"/> 或者不行的话就用js来控制: $(&qu

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

下拉框有DropDownStyle这一属性,把DropDownStyle类型选为DropDownList,则下拉框只能选择不能输入了.但是这时的下拉框是没有默认值的,即使在Text属性中输入默认值,也不起作用.就要在(某某某.Designer.cs)文件中修改.这是没有修改的:this.NameTemplateBox.Cursor = System.Windows.Forms.Cursors.Default; this.NameTemplateBox.DropDownStyle = System

利用easyUI的combobox打造自动提示组件

自动提示是时下一个很流行的功能,比如说百度.谷歌的搜索输入框都使用到了这么一个功能. 由于easyUI的combobox设计师已经考虑到了这个功能,所以只需简单几步我们可以轻松打造自己的自动提示组件. 自动提示有两种模式,一种是本地(local)一种是远程的(remote). local的意思也就是说先将所有的数据都加载到客户端页面,之后仅仅是在这些已加载的数据中去过滤,不会向服务器发出额外的请求 而remote呢,也就是说事先并不加载所有数据,而是等到用户输入关键字之后,再向服务器发出请求,返

利用easyUI的combobox打造自己主动提示组件

自己主动提示是时下一个非常流行的功能,比方说百度.谷歌的搜索输入框都使用到了这么一个功能. 因为easyUI的combobox设计师已经考虑到了这个功能.所以仅仅需简单几步我们能够轻松打造自己的自己主动提示组件. 自己主动提示有两种模式,一种是本地(local)一种是远程的(remote). local的意思也就是说先将全部的数据都载入到client页面,之后不过在这些已载入的数据中去过滤,不会向server发出额外的请求 而remote呢,也就是说事先并不载入全部数据.而是等到用户输入keyw

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

Combobox用法和方法参数: 1. 需要引入class=" easyui-combobox" 2. 参数设置需要在data-options中设置 3. 属性参数配置: valueField:基础数据值名称绑定到Combobox(提交值) textField:基础数据的字段名称绑定的Combobox(显示值) mode:定义当文本改变时如何加载列表数据,当设置为remote模式下,什么类型的用户将被发送http请求参数名为'q'的服务器,以获取新的数据. url:从远程URL来加载列

easyui 筛选数据及仅允许选择数据

先说需求,本地已缓存数据源,用户输入拼音码或编号,筛选数据作为新的数据源,然后通过键盘选择. 再说问题,easyui combogrid控件,在mode为local,也就是将数据源缓存在本地的情况下,一般情况下,是通过 filter:function(q,row){ var opts=$(this).options; return row[opts.textField].indexOf(q)>-1; } 官网api也有介绍,但是在实际项目中有两个问题: 数据量较大,每次筛选很慢. 不知道是不是数

EasyUI ComboGrid的绑定,上下键和回车事件,输入条件查询

首先我们先看一下前台的绑定事件 1.先定义标签 <input id="cmbXm" type="text" style="width: 100px;" /> 2.cmbgrid的绑定方法,这里先全部列出代码,接下来我们分别看看各个属性的意思 $('#cmbXm').combogrid({ panelWidth: 570, idField: 'PATIENT_NO', textField: 'NAME', url: '/Ashx/yzx

使用EasyUI的combobox控件实现级联搜索条件

昨天接到一个需求,是做一个简单的查询页面,相对于目前公司系统有一个新的东西,需要实现多级机构的级联查询.公司系统的前端框架采用的是jquery-easyui-1.4.3, 在以前接触到的系统中,前端做的不是太多,有采用velocity+html的,实现这种级联倒是做过,只是没怎么记录.现在使用easyui,需要学习一下. 看了些关于easyui的东东,打算采用combobox的input来实现这个级联查询功能. 首先,combobox 实现 动态加载 选项的方法有: reload(url)  .