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

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

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

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需要加载的数据

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: '盘条规格'},
      ]],
      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加载空,有数据则重新加载重组的数据项
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也可以做多列模糊搜索,因为它会向后台发送一个包含叫做‘q'的参数的http请求以请求过滤后的数据,但是这样的不好在于,明明我们已经向后台请求过一次全部的数据,为什么还要再多次请求过滤的数据呢,服务器的负载会加重,所以这种事情能在前端做了就挺好

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

(0)

相关推荐

  • 简介EasyUI datagrid editor combogrid搜索框的实现

    首先需要datagrid editor对combogrid的扩展,这个是别人实现的: $.extend($.fn.datagrid.defaults.editors, { combogrid: { init: function (container, options) { var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container); in

  • EasyUi中的Combogrid 实现分页和动态搜索远程数据

    jquery easyui中的combogrid比较特殊,算是combo和grid的组合,combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择,又可以进行搜索,展示与当前输入的字符相匹配的数据.如果数据量大的情况,就需要combogrid具有分页的功能.下面给大家介绍EasyUi中的Combogrid 实现分页和动态搜索远程数据. $('#mallid').combogrid({ panelWidth:500, idField:'mallid', //ID字段 t

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

    这几天在项目中前台使用到了easyui 的 combogrid插件为用户提供点选数据项的功能.由于数据项的内容可能有很多,所以仅仅是点选还不够,需要能够对用户的输入进行过滤,即根据用户的输入将某一列与用户输入匹配的数据项筛选保留下来. 实现这一功能需要以下几个步骤: 1.声明一个combogrid <div class="fitem"> <label>盘条基本信息编号:</label> <input class="easyui-com

  • 前端JavaScript实现本地模糊搜索功能的方法实例

    目录 一.项目前景 二.涉及知识点 Object.assign()的用法 filter()方法 indexOf()模糊查询 DEMO完整代码如下: 总结 一.项目前景 随着vue.react在实际开发中应运越来越广泛,前端对数据的处理越来越多.这篇文章主要目的就是为了对服务端返回的数据进行处理,按照条件进行模糊查询,从而减少向服务端发送请求的次数,来提高性能和用户体验.下面以一个简单的DEMO,来实现模糊查询的功能: 测试用的数据如下: var data = [{ "title": &

  • jQuery EasyUI datagrid实现本地分页的方法

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

  • ASP.NET MVC使用EasyUI的datagrid多选提交保存教程

    需要实现EasyUI的datagrid组件加入选择checkbox列,并提交后台批量添加的功能,页面代码如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(function() { //searchbox $('#selectgoods-keywords').searchbox({ searcher: function(val, name) { searchInfo

  • Python过滤函数filter()使用自定义函数过滤序列实例

    filter函数: filter()函数可以对序列做过滤处理,就是说可以使用一个自定的函数过滤一个序列,把序列的每一项传到自定义的过滤函数里处理,并返回结果做过滤.最终一次性返回过滤后的结果. filter()函数有两个参数: 第一个,自定函数名,必须的 第二个,需要过滤的列,也是必须的 DEMO 需求,过滤大于5小于10的数: 复制代码 代码如下: # coding=utf8 # 定义大于5小于10的函数 def guolvhanshu(num):     if num>5 and num<

  • 一步一步教你网站同步镜像(转载)

    1.介绍 现在的网站随着访问量的增加,单一服务器无法承担巨大的访问量,有没有什么方便快捷的方式解决这个问题呢,答案是"有"!比如建立服务器群,进行均衡负载. 但是如果要解决像电信网通这样的互访问题(中国网民的悲哀..),这个解决办法就无能为了了! 要解决这个问题最方便快捷的方式就是建立镜像网站!由访问者自己选择适合自己网络的速度最快的网站!这样即可以解决线路问题,又可以解决访问量问题! 2.网站同步的数据分类 网站数据基本分为两类: 一类是文件,比如HTML,ASP,PHP等网页文件,

  • FTP虚拟用户的使用方法

    虚拟用户原理 因为在linux之下,使用vsftp建立用户之后,默认使用ftp访问的时候,是会访问到对应的用户家目录.如果想多个用户同时访问某一个目录,同时对同一目录下有着不同的权限,比如部分用户只能看,不修改,或者有的用户只能下载不能上传这些权限,这些设定只能通过vsftp中的虚拟用户来进行设定,普通的用户无法达到这样的效果. 故先通过建立一个普通系统用户,建立家目录,然后将所有的虚拟用户映射到对应的普通系统用户家目录中,然后再对各虚拟用户进行权限控制,达到上述的效果. 新建用户 新建用户ma

  • 几种MySQL中的联接查询操作方法总结

    前言 现在系统的各种业务是如此的复杂,数据都存在数据库中的各种表中,这个主键啊,那个外键啊,而表与表之间就依靠着这些主键和外键联系在一起.而我们进行业务操作时,就需要在多个表之间,使用sql语句建立起关系,然后再进行各种sql操作.那么在使用sql写出各种操作时,如何使用sql语句,将多个表关联在一起,进行业务操作呢?而这篇文章,就对这个知识点进行总结. 联接查询是一种常见的数据库操作,即在两张表(多张表)中进行匹配的操作.MySQL数据库支持如下的联接查询: CROSS JOIN(交叉联接)

  • 分享十三个最佳JavaScript数据网格库

    JavaScript 是一种通常被用在网页开发中的编程语言.它主要是在互联网上的网页浏览器中开发出效果出众且可交互的特效.它是客户端脚本语言中的一种,是被用来作为通过用户的网页浏览器进行处理的源代码.JavaScript 是动态.高级.可解释且无类型的编程语言.JavaScript 主要被用在不是基于 Web 的环境之中,像是特定站点的浏览器,桌面小部件以及 PDF 文件.事实上,JavaScript 还被程序员们用在了视频游戏开发之中. 数据网格可以帮助解决在 HTML 表格上对带有过滤.分页

随机推荐