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 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
论JavaScript模块化编程
Mar 07 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
layui 实现加载动画以及非真实加载进度的方法
Sep 23 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
ajax实现无刷新分页(php)
2010/07/18 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
python的exec、eval使用分析
2017/12/11 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
用Python读取几十万行文本数据
2018/12/24 Python
python日志模块logbook使用方法
2019/09/19 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
招聘单位介绍信
2014/01/14 职场文书
教师绩效考核方案
2014/01/21 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
读书演讲主持词
2014/03/18 职场文书
党风廉政承诺书
2014/03/27 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
家庭经济困难证明
2015/06/23 职场文书
运动会3000米加油稿
2015/07/21 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
导游词之太湖
2019/10/08 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
MySQL大小写敏感的注意事项
2021/05/24 MySQL
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python