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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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中的加密功能
2006/10/09 PHP
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
PHP模板解析类实例
2015/07/09 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
js的event详解。
2006/09/06 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
js中function()使用方法
2013/12/24 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
英文求职信结束语大全
2013/10/26 职场文书
保洁主管岗位职责
2013/11/20 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
服装设计师求职信
2014/06/04 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
老乡会致辞
2015/07/28 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
Nginx跨域问题解析与解决
2022/08/05 Servers