zoukankan      html  css  js  c++  java
  • 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',  20 },
                    { field: 'Text', title: '类别',  80 },
                    { field: 'name', title: '名称', align: 'left',  120 },
                    { field: 'size', title: '尺码', align: 'left',  60 },
                    {
                        field: 'Qty', title: '配额',  80, formatter: function (value, row, index) {
                            return '每' + row.preYear + '年' + row.Qty + '件';
                        }
                    },
                    { field: 'classID', title: '类别ID', align: 'center',  60, hidden: true }
                ]],
                onSelect: function (index, row) {
                    selectRow = row;
                }
            });
        });

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

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

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

  • 相关阅读:
    vscode 前端好用插件汇总
    IE8和IE9下textarea滚动选中的问题
    javascript实现数字整数位每三位一个逗号分隔
    简单枚举(算法竞赛入门经典)
    拓扑排序(算法竞赛入门经典)
    七桥问题--欧拉(算法竞赛入门经典)
    走迷宫问题 算法竞赛入门经典
    ZOJ1008
    ZOJ1163
    HDU 1069 Monkey and Banana
  • 原文地址:https://www.cnblogs.com/azhqiang/p/4432648.html
Copyright © 2011-2022 走看看