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

您的帮助是我莫大的鼓励！喜欢的话可以扫描左侧二维码随意打赏哈~支付宝微信都可以，欢迎看看我的其他文章~

这篇文章目前收到了不少朋友的支持，在这里谢谢你们了，打赏有价，支持与鼓励无价！

easyui combogrid 本地模糊搜索过滤多列相关推荐

关于如何在使用easyui的时候添加一个操作列的问题
关于如何在使用easyui的时候添加一个操作列的问题首先分为不同的情况:在这里只介绍使用的是datagrid数据网格的列属性来添加操作列的方法: 就是跟普通的列属性的使用时一样的,当我们要想在每一行 ...
python和R对dataframe进行连接、行过滤更新列内容：dplyr、merge、inner、left、right、inner_join、left_join、sort_values、loc
python和R对dataframe进行连接.行过滤更新列内容:dplyr.merge.inner.left.right.inner_join.left_join.sort_values.loc.ar ...
easyui combogrid分页加载默认值时无法自动跳转到相应页的解决方案
2019独角兽企业重金招聘Python工程师标准>>> 当如果easyui combogrid分布加载时,有默认值,且默认值不在第一页时,此时combogrid里的显示值为idFie ...
hive 时间转字符串_07697.0.3如何在Kerberos环境下用Ranger完成对Hive的行过滤及列脱敏...
文档编写目的本篇文章主要介绍如何在CDP DC7.0.3集群中使用Ranger在Hive中进行行过滤及列脱敏,行级别的过滤相当于一个强制性的where子句,例如在订单表中,员工仅被允许查看自己所在地 ...
pandas过滤某列含有nan 的行
pandas中过滤某列中含有Nan的行 import pandas as pd import numpy as np"""过滤某列中含有Nan的行:return:&qu ...
easyui datagrid编辑时修改其它列的数值.
easyui datagrid编辑时修改其它列的数值. { field: 'converter', title: '转化器', align: 'left', width: 250,editor: {t ...
EasyUI Combogrid Bug
可编辑combobox在中文输入状态下的过滤缺陷在火狐或Opera浏览器中,combogrid 中文输入状态下存在一个缺陷(假设有两个选项,[{"value":"zha ...
jQuery EasyUI datagrid本地分页
2019独角兽企业重金招聘Python工程师标准>>> 代码如下: <!DOCTYPE html> <html> <head> <meta ...
JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
需求如下现有数据列三列 Name,Age,CreateDate 数据张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...

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

easyui combogrid 本地模糊搜索过滤多列相关推荐

最新文章

热门文章