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 Easyui Tree的oncheck事件实现代码
May 28 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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
PHP分页类集锦
2014/11/18 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python中的数学运算操作符使用进阶
2016/06/20 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
应用数学自荐书范文
2013/11/24 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
社区七一党员活动方案
2014/01/25 职场文书
多媒体教室标语
2014/06/26 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
学习保证书100字
2015/02/26 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server