快捷導(dǎo)航

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

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

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

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

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

1.聲明一個(gè)combogrid

<div class="fitem"> 
      <label>盤(pán)條基本信息編號(hào):</label> 
      <input class="easyui-combogrid" type="text" id="addWireRodId" name="wireRodId" style="width: 150px" 
          data-options="required:true"></input> 
</div>

2.js中請(qǐng)求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.對(duì)combogrid進(jìn)行配置

$("#addWireRodId").combogrid({ 
      idField:'id', 
      textField:'codeDesc', 
      remoteSort: false, 
      panelWidth: 360, 
      columns: [[ 
        {field: 'codeDesc', title: '盤(pán)條序號(hào)', sortable: true, width: 70}, 
        {field: 'code', title: '盤(pán)條編碼'}, 
        {field: 'name', title: '盤(pán)條名稱(chēng)'}, 
        {field: 'specification', title: '盤(pán)條規(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為用戶(hù)輸入，data為遠(yuǎn)程加載的全部數(shù)據(jù)項(xiàng)，searchList是需要進(jìn)行模糊搜索的列名的數(shù)組，ele是combogrid對(duì)象 
//doSearch的思想其實(shí)就是，進(jìn)入方法時(shí)將combogrid加載的數(shù)據(jù)清空，如果用戶(hù)輸入為空則加載全部的數(shù)據(jù)，輸入不為空 
//則對(duì)每一個(gè)數(shù)據(jù)項(xiàng)做匹配，將匹配到的數(shù)據(jù)項(xiàng)加入rows數(shù)組，相當(dāng)于重組數(shù)據(jù)項(xiàng)，只保留符合篩選條件的數(shù)據(jù)項(xiàng)， 
//如果篩選后沒(méi)有數(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)樗鼤?huì)向后臺(tái)發(fā)送一個(gè)包含叫做‘q'的參數(shù)的http請(qǐng)求以請(qǐng)求過(guò)濾后的數(shù)據(jù)，但是這樣的不好在于，明明我們已經(jīng)向后臺(tái)請(qǐng)求過(guò)一次全部的數(shù)據(jù)，為什么還要再多次請(qǐng)求過(guò)濾的數(shù)據(jù)呢，服務(wù)器的負(fù)載會(huì)加重，所以這種事情能在前端做了就挺好

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

您可能感興趣的文章: