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


Posted in Javascript onMay 13, 2017

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

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

Javascript 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
web.js.字符串与正则表达式操作
May 13 #Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 #Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 #jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 #jQuery
vue.js 初体验之Chrome 插件开发实录
May 13 #Javascript
JS中cookie的使用及缺点讲解
May 13 #Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 #jQuery
You might like
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python random模块常用方法
2014/11/03 Python
python字符串替换的2种方法
2014/11/30 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python实现单词翻译功能
2017/06/06 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
pytorch中图像的数据格式实例
2020/02/11 Python
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
股份合作协议书
2014/04/12 职场文书
社团活动总结书
2014/06/27 职场文书
2014年工程师工作总结
2014/11/25 职场文书
教师辞职书范文
2015/02/26 职场文书
院系推荐意见
2015/06/05 职场文书
从事会计工作年限证明
2015/06/23 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript