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為當前選項

當收起選項時檢查是否符合條件，不符合則清除輸入內容