這幾天在項目中前臺使用到了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請求以請求過濾后的數據，但是這樣的不好在于，明明我們已經向后臺請求過一次全部的數據，為什么還要再多次請求過濾的數據呢，服務器的負載會加重，所以這種事情能在前端做了就挺好
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
