写在最前面

这个星期一直在纠结easyui的treegrid的过滤功能,原因呢,自然是项目中一个莫名奇妙的需求。

easyui虽说是后端程序员的前端框架,但是说句实话,除去api,让我直接写里面的节点信息的话,还真是无从下手,在这里先对前端的同学膜拜下。

说下需求吧,最近一个项目中有个界面使用的easyui的treegrid展示,起初是没什么问题的,但是随着数据的导入发现实际操作上十分不便。原因呢是开发的时候treegrid并没有做分页的处理,目前测试环境数据达到456条,想从中找到一条然后处理的话,只能说费时费力了。于是便产生了开发个过滤搜索功能的想法。

起初感觉还是简单调用下api什么的,因为我记得datagrid就有个datagrid-filter.js官方扩展,但是查遍api手册,还是没有发现treegrid有什么现成的方法。只找到了两个属性,loader和loadFilter,好像有点什么关系。

期间我也看了下网上的解决方法,不知道是不是太简单了,网上关于TreeGrid过滤的资源很少。博问里也都被大牛无视了。~~~~(>_<)~~~~

解决思路

这里列举一个在园子里看到的文章,其他也没有找到类似相关的内容了

可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能,代码如下,来源地址:http://www.cnblogs.com/mikel/archive/2011/11/16/2250812.html

function searchROM() {

        var product = $('#Product').combobox('getValue');
        var keytype = $('#keytype').combobox('getValue');
        var keywords = $('#keywords').val();
        var url = encodeURI('/GoodsROM/ROMList?product=' + product + '&keytype=' + keytype + '&keywords=' + keywords+'&'+Math.random());
        $.post(url, {}, function(data) {
            var d = data;//返回json格式结果
            $('#grid').treegrid('loadData',d);//加载数据更新treegrid
        }, 'json');

    }

想法是很好的,但是奈何,我们后端的代码是封装在General里的,改后台代码影响很多,于是还是想到api,试试刚开始的loader和loadFilter吧。

 loadFilter:function(data){
            var newData = new Array();
            var filter = $("#filter").val();
            for(var i=0; i<data.length; i++){
                if(data[i].nodeName.indexOf(filter)>0){
                    // 定义一个数组
                    newData.push(data[i]);
                }
            }
            if(newData.length==0){
                return data;
            }else{
                return newData; 

            }
        },

我在查询出的结果上做过滤,返回处理后的结果,通过load方法重新加载。

效果不出所望,查询功能是实现了,但是因为每次查询都需要load一次数据库,本来页面初始化时数据的查询时长就达到20s,查一次来20s查一次来20s,谁受得了,结果自然被领导无情的打回了。

沿着这个思路继续找,既然访问数据库可以实现,那我是不是在页面初始化第一次的时候将数据存起来呢,所以我这次在loadFilter里就没有做逻辑的验证了,只是把data值取出来,然后将逻辑处理放在另外的函数里,功夫不负有心人,效果终究还是实现了,只是在初始化的时候查一次数据库,其他的搜索就不在load数据库了。下面贴出相关的代码给大家参考,有更好的想法的同学还请给个思路哈,这个先拜谢了。

var allData = new Array();
function doOrgChartInit(idTreeGrid, idMenu, idUriQuery) {
    var bFound = true;
    $('#' + idTreeGrid).treegrid({
        rownumbers:true,
        animate:true,
        collapsible:true,
        fitColumns:true,

        url:idUriQuery,
        idField:'nodeId',
        treeField:'nodeName',
        loadFilter:function(data){
          if (bFound&&data[0].nodeName!="Root") {
              allData = data;
              bFound = false;
         }
            return data;
        },
        columns:[
            [
                {halign:'center', align:'left',field:'nodeName', title:'名称', width:200},
                {halign:'center', align:'left',field:'description', title:'描述', width:100, align:'center'}
            ]
        ],

        // -----------------------------------------------------------------------------------  工具栏
        toolbar:[
            {
//                刷新
                iconCls:'icon-reload',
                handler:function () {
                    doTreeGridRefresh(idTreeGrid);
                }
            },
            '-',
            {
//                扩展当前结点
                iconCls:'icon-redo',
                handler:function () {
                    doTreeGridExpand(idTreeGrid);
                }
            },
            '-',
            {
//                收缩当前结点
                iconCls:'icon-undo',
                handler:function () {
                    doTreeGridCollapse(idTreeGrid);
                }
            },
            '-',
            {
//                搜索框
                text: '<input id="filter" type="text" />',

            },
            {
//                搜索
                iconCls:'icon-search',
                handler:function () {
                    doFilter(idTreeGrid);
                }
            }
        ],

        // -----------------------------------------------------------------------------------  弹出菜单
        onContextMenu:function (e, row) {
            e.preventDefault();
            $(this).treegrid('select', row.nodeId);
//            alert(row.orgChartPk);
            vOrgChartPk = row.orgChartPk;
            $('#' + idMenu).menu('show', {
                left:e.pageX,
                top:e.pageY
            });
        }
    });
}

function doFilter(idTreeGrid) {
    var newData = new Array();
    var filter = $("#filter").val();
    if (allData.length==0) {
        alert("请先点击Root初始化界面");
        return false;
    }
    for(var i=0; i<allData.length; i++){
        if(allData[i].nodeName.indexOf(filter)>0){
            // 定义一个数组
            newData.push(allData[i]);
        }
    }
    if (filter=="") {
        $('#' + idTreeGrid).treegrid('loadData',allData);
    }else{
        $('#' + idTreeGrid).treegrid('loadData',newData);
    }
}

 只是记录下自己的思路,写的有点乱还请见谅。转载还请注明出处:http://www.cnblogs.com/allanzhang/p/7306974.html

谈一谈EasyUI的TreeGrid的过滤功能的更多相关文章

  1. 谈一谈EasyUI中TreeGrid的过滤功能

    写在最前面 这个星期一直在纠结easyui的treegrid的过滤功能,原因呢,自然是项目中一个莫名奇妙的需求. easyui虽说是后端程序员的前端框架,但是说句实话,除去api,让我直接写里面的节点 ...

  2. 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

    jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...

  3. easyUI中treegrid组件构造树形表格(简单数据类型)+ssm后台

    这几天做的项目要求用树形表格的形式展示一部分数据,于是就想到了使用easyUI的treegrid组件,但几经翻查各种资料,发现数据类型大多采取标准数据类型,即包含children元素的数据类型,小编查 ...

  4. Jquery EasyUI中treegrid

    Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲   最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...

  5. 谈一谈Java8的函数式编程(二) --Java8中的流

    流与集合    众所周知,日常开发与操作中涉及到集合的操作相当频繁,而java中对于集合的操作又是相当麻烦.这里你可能就有疑问了,我感觉平常开发的时候操作集合时不麻烦呀?那下面我们从一个例子说起. 计 ...

  6. 谈一谈泛型(Generic)

    谈一谈泛型 首先,泛型是C#2出现的.这也是C#2一个重要的新特性.泛型的好处之一就是在编译时执行更多的检查. 泛型类型和类型参数 ​ 泛型的两种形式:泛型类型( 包括类.接口.委托和结构 没有泛型枚 ...

  7. 从一张图开始,谈一谈.NET Core和前后端技术的演进之路

    从一张图开始,谈一谈.NET Core和前后端技术的演进之路 邹溪源,李文强,来自长沙.NET技术社区 一张图 2019年3月10日,在长沙.NET 技术社区组织的技术沙龙<.NET Core和 ...

  8. 谈一谈Elasticsearch的集群部署

      Elasticsearch天生就支持分布式部署,通过集群部署可以提高系统的可用性.本文重点谈一谈Elasticsearch的集群节点相关问题,搞清楚这些是进行Elasticsearch集群部署和拓 ...

  9. 谈一谈iOS事件的产生和传递

    谈一谈iOS事件的产生和传递 1.事件的产生 发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件队列中. UIApplication会从事件队列中取出最前面的事件,并将事件 ...

随机推荐

  1. 第13章 Linux的网络管理

    本文目录: 13.1 Linux数据包转发功能 13.2 和网络相关的几个文件说明 13.2.1 网卡配置文件ifcfg-* 13.2.2 DNS配置文件/etc/resolve.conf 13.2. ...

  2. 学习mysql语法--基础篇(二)

      前  言  mysql  mysql语法--本篇学习都是通过使用Navicat Premium(数据库管理工具),连接mysql数据. 本篇学习主要有两个部分: [SQL语句的组成]   DML ...

  3. 用netsh wlan命令行解决“Win10下WLAN不自动登陆”问题

    系统崩溃了,找了一个版本Windows 10重装后,发现进入系统后不会自动连接自己家的Wifi,每次都要手动点"登录",烦不胜烦. 于是百度.Google一起上,找解决方案,然后所 ...

  4. java设计模式综合项目实战视频教程

    java设计模式综合项目实战视频教程 视频课程目录如下: 第01节课:本课程整体内容介绍:X-gen系统概况,包括:引入.X-gen项目背景.X-gen的HelloWorld第02节课:X-gen整体 ...

  5. org.apache.commons.lang3 的随机数生成

    apache org.apache.commons.lang3 的随机数生成工具,方便使用. String a12 = RandomStringUtils.random(4, "012345 ...

  6. El表达式取map值

    map el表达取值 ${initMap['kehuList']}

  7. Python Click 学习笔记(转)

    原文链接:Python Click 学习笔记 Click 是 Flask 的团队 pallets 开发的优秀开源项目,它为命令行工具的开发封装了大量方法,使开发者只需要专注于功能实现.恰好我最近在开发 ...

  8. [leetcode-516-Longest Palindromic Subsequence]

    Given a string s, find the longest palindromic subsequence's length in s. You may assume that the ma ...

  9. 2.如何搭建MQTT环境

    1.源码下载https://github.com/andsel/moquette 注意下载2016.2版本2.idea下载http://confluence.jetbrains.com/display ...

  10. Spring MVC 项目搭建 -1- 创建项目

    Spring MVC 项目搭建 -1- 创建项目 1.创建 Dynamic Web project (SpringDemo),添加相关jar包 2.创建一个简单的controller类 package ...