這幾天在項目中前臺使用到了easyui 的 combogrid插件為用戶提供點選數(shù)據(jù)項的功能。由于數(shù)據(jù)項的內(nèi)容可能有很多，所以僅僅是點選還不夠，需要能夠?qū)τ脩舻妮斎脒M(jìn)行過濾，即根據(jù)用戶的輸入將某一列與用戶輸入匹配的數(shù)據(jù)項篩選保留下來。

實現(xiàn)這一功能需要以下幾個步驟：

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需要加載的數(shù)據(jù)

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進(jìn)行配置

$("#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: '盤條規(guī)格'},       ]],       onSelect: function (index,row) {         //業(yè)務(wù)功能，不予展示       },       onChange: function (q){         doSearch(q,wireRod,['codeDesc','code','name','specification'],$(this));       },       onShowPanel:function () {           $(this).combogrid('grid').datagrid('loadData', wireRod);       }     }); 

4.doSearch方法

//q為用戶輸入，data為遠(yuǎn)程加載的全部數(shù)據(jù)項，searchList是需要進(jìn)行模糊搜索的列名的數(shù)組，ele是combogrid對象 //doSearch的思想其實就是，進(jìn)入方法時將combogrid加載的數(shù)據(jù)清空，如果用戶輸入為空則加載全部的數(shù)據(jù)，輸入不為空 //則對每一個數(shù)據(jù)項做匹配，將匹配到的數(shù)據(jù)項加入rows數(shù)組，相當(dāng)于重組數(shù)據(jù)項，只保留符合篩選條件的數(shù)據(jù)項， //如果篩選后沒有數(shù)據(jù)，則combogrid加載空，有數(shù)據(jù)則重新加載重組的數(shù)據(jù)項 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);   }