easyui combogrid實(shí)現(xiàn)本地模糊搜索過濾多列

更新時間：2017年05月13日 14:43:40 作者：bwju

本篇文章主要介紹了easyui combogrid實(shí)現(xiàn)本地模糊搜索過濾多列，非常具有實(shí)用價值，需要的朋友可以參考下

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

實(shí)現(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ù)項(xiàng)，searchList是需要進(jìn)行模糊搜索的列名的數(shù)組，ele是combogrid對象 
//doSearch的思想其實(shí)就是，進(jìn)入方法時將combogrid加載的數(shù)據(jù)清空，如果用戶輸入為空則加載全部的數(shù)據(jù)，輸入不為空 
//則對每一個數(shù)據(jù)項(xiàng)做匹配，將匹配到的數(shù)據(jù)項(xiàng)加入rows數(shù)組，相當(dāng)于重組數(shù)據(jù)項(xiàng)，只保留符合篩選條件的數(shù)據(jù)項(xiàng)， 
//如果篩選后沒有數(shù)據(jù)，則combogrid加載空，有數(shù)據(jù)則重新加載重組的數(shù)據(jù)項(xiàng) 
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，默認(rèn)為local，其實(shí)remote mode也可以做多列模糊搜索，因?yàn)樗鼤蚝笈_發(fā)送一個包含叫做‘q'的參數(shù)的http請求以請求過濾后的數(shù)據(jù)，但是這樣的不好在于，明明我們已經(jīng)向后臺請求過一次全部的數(shù)據(jù)，為什么還要再多次請求過濾的數(shù)據(jù)呢，服務(wù)器的負(fù)載會加重，所以這種事情能在前端做了就挺好

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: