easyui combogrid实现本地模糊搜索过滤多列的代码实例

作者：袖梨 2022-06-29

这几天在项目中前台使用到了easyui 的 combogrid插件为用户提供点选数据项的功能。由于数据项的内容可能有很多，所以仅仅是点选还不够，需要能够对用户的输入进行过滤，即根据用户的输入将某一列与用户输入匹配的数据项筛选保留下来。

实现这一功能需要以下几个步骤：

1.声明一个combogrid

 代码如下 复制代码

 

       

      

          data-options="required:true"> 

2.js中请求combogrid需要加载的数据

 代码如下 复制代码

varwireRod; 

    $.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加载空，有数据则重新加载重组的数据项 

 代码如下 复制代码

functiondoSearch(q,data,searchList,ele){ 

    ele.combogrid('grid').datagrid('loadData', []); 

    if(q ==""){ 

      ele.combogrid('grid').datagrid('loadData', data); 

      return; 

    } 

    varrows = []; 

    $.each(data,function(i,obj){ 

      for(varpinsearchList){ 

        varv = 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请求以请求过滤后的数据，但是这样的不好在于，明明我们已经向后台请求过一次全部的数据，为什么还要再多次请求过滤的数据呢，服务器的负载会加重，所以这种事情能在前端做了就挺好

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本网站。

相关文章

精彩推荐