這幾天在項目中前臺使用到了easyui 的 combogrid插件為用戶提供點選數據項的功能。由于數據項的內容可能有很多，所以僅僅是點選還不夠，需要能夠對用戶的輸入進行過濾，即根據用戶的輸入將某一列與用戶輸入匹配的數據項篩選保留下來。

實現這一功能需要以下幾個步驟：

1.聲明一個combogrid

<div class="fitem"><label>盤條基本信息編號:</label><input class="easyui-combogrid" type="text" id="addWireRodId" name="wireRodId" style="width: 150px"data-options="required:true"></input> </div>
2.js中請求combogrid需要加載的數據

var wireRod;$.ajax({url: "../wireRod/getAll?rows=100000&sort=id&order=asc",type: "post",dataType: "json",success: function (result) {wireRod = result.wireRod.list;} }); 3.對combogrid進行配置

$("#addWireRodId").combogrid({idField:'id',textField:'codeDesc',remoteSort: false,panelWidth: 360,columns: [[{field: 'codeDesc', title: '盤條序號', sortable: true, width: 70},{field: 'code', title: '盤條編碼'},{field: 'name', title: '盤條名稱'},{field: 'specification', title: '盤條規格'},]],onSelect: function (index,row) {//業務功能，不予展示},onChange: function (q){doSearch(q,wireRod,['codeDesc','code','name','specification'],$(this));},onShowPanel:function () {$(this).combogrid('grid').datagrid('loadData', wireRod);}});

4.doSearch方法

//q為用戶輸入，data為遠程加載的全部數據項，searchList是需要進行模糊搜索的列名的數組，ele是combogrid對象 //doSearch的思想其實就是，進入方法時將combogrid加載的數據清空，如果用戶輸入為空則加載全部的數據，輸入不為空 //則對每一個數據項做匹配，將匹配到的數據項加入rows數組，相當于重組數據項，只保留符合篩選條件的數據項， //如果篩選后沒有數據，則combogrid加載空，有數據則重新加載重組的數據項 function doSearch(q,data,searchList,ele){ele.combogrid('grid').datagrid('loadData', []);if(q == ""){ele.combogrid('grid').datagrid('loadData', data);return;}var rows = [];$.each(data,function(i,obj){for(var p in searchList){var v = obj[searchList[p]];if (!!v && v.toString().indexOf(q) >= 0){rows.push(obj);break;}}});if(rows.length == 0){ele.combogrid('grid').datagrid('loadData', []);return;}ele.combogrid('grid').datagrid('loadData', rows);}
combogrid有兩種mode,local和remote，默認為local，其實remote mode也可以做多列模糊搜索，因為它會向后臺發送一個包含叫做‘q’的參數的http請求以請求過濾后的數據，但是這樣的不好在于，明明我們已經向后臺請求過一次全部的數據，為什么還要再多次請求過濾的數據呢，服務器的負載會加重，所以這種事情能在前端做了就挺好

您的幫助是我莫大的鼓勵！喜歡的話可以掃描左側二維碼隨意打賞哈~支付寶微信都可以，歡迎看看我的其他文章~

這篇文章目前收到了不少朋友的支持，在這里謝謝你們了，打賞有價，支持與鼓勵無價！

總結

以上是生活随笔為你收集整理的easyui combogrid 本地模糊搜索过滤多列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。