一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

easyui combogrid实现本地模糊搜索过滤多列步骤

时间:2022-06-25 19:36:58 编辑:袖梨 来源:一聚教程网

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

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

原文链接:http://blog.csdn.net/u010251278/article/details/52083001

热门栏目