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

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

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

這幾天在項目中前臺使用到了easyui 的 combogrid插件為用戶提供點選數(shù)據(jù)項的功能。由于數(shù)據(jù)項的內(nèi)容可能有很多，所以僅僅是點選還不夠，需要能夠?qū)τ脩舻妮斎脒M行過濾，即根據(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進行配置

$("#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è)務功能，不予展示 
      }, 
      onChange: function (q){ 
        doSearch(q,wireRod,['codeDesc','code','name','specification'],$(this)); 
      }, 
      onShowPanel:function () { 
          $(this).combogrid('grid').datagrid('loadData', wireRod); 
      } 
    });

4.doSearch方法

//q為用戶輸入，data為遠程加載的全部數(shù)據(jù)項，searchList是需要進行模糊搜索的列名的數(shù)組，ele是combogrid對象 
//doSearch的思想其實就是，進入方法時將combogrid加載的數(shù)據(jù)清空，如果用戶輸入為空則加載全部的數(shù)據(jù)，輸入不為空 
//則對每一個數(shù)據(jù)項做匹配，將匹配到的數(shù)據(jù)項加入rows數(shù)組，相當于重組數(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); 
  }

combogrid有兩種mode,local和remote，默認為local，其實remote mode也可以做多列模糊搜索，因為它會向后臺發(fā)送一個包含叫做‘q'的參數(shù)的http請求以請求過濾后的數(shù)據(jù)，但是這樣的不好在于，明明我們已經(jīng)向后臺請求過一次全部的數(shù)據(jù)，為什么還要再多次請求過濾的數(shù)據(jù)呢，服務器的負載會加重，所以這種事情能在前端做了就挺好

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

您可能感興趣的文章: