jQuery插件表格树GridTree--2011新年版本（优化懒加载性能）

表格树是用来展示多层次的表格的工具,在实际项目中有使用.并且此前已经发布了不少的版本,这次是最新的一版,比较稳定了.公开源码,主要使用jquery和普通JavaScript实现.

此前的表格树的详细配置说明

最近修改了此前表格树，根据需求新加了功能以及做了一些相关修改：
1.添加了动态刷新表格树的方法    
    
2.添加了动态添加子节点的方法 
  
3.支持无限层次的节点分页（lazyPage : true）

4.支持非顶层节点的缓冲显示（lazyMorePage:true ）

5.修改此前版本的一些bug，例如删除了analyzeAtServer属性（定义了也没有用）。

下面罗列出新的属性和API方法：
1.lazyPageSize:进行懒加载分页以及懒加载缓存显示的每页页数，默认为10

2.lazyPage:设置为true表示使用懒加载分页，即在除了第一层进行默认的表格树分页之外，在子树的层次也进行分页，具体请看demo中的“懒加载树示例2(lazyPage:true)”链接

3.lazyMorePage:设置为true表示开启使用懒加载的缓存模式，即在对子树层次显示的时候，逐步显示节点，例如子树一层有1000个节点，设置了lazyPageSize=50的话，第一次显示50个节点，点击节点前面的图标再显示画面的50个节点（全部显示完请点20下，呵呵），具体请看demo中的“懒加载树示例3(lazyMorePage:true)”链接

注意：lazyPage和lazyMorePage不可以同时设置为true。
注意：设置了这两种懒加载模式之后，和普通的懒加载处理类似，也是需要做两个java方法返回json串，即dataUrl和lazyLoadUrl中的链接。

4.myTree.reload():进行表格树的重新加载，此前方式只可以通过链接的刷新实现，通过这个新方法可以局部刷新表格树

5.myTree.appendChild('父节点id','子串json串'):对指定的节点添加孩子节点

6.删除analyzeAtServer属性：如果配置了该属性也不会有效果，主要目的是简化了后台传递json串的格式。通过运行demo工程，可以看到后面实时打印出来的json串。
  修改了在chrom下面的一个bug：懒加载模式下面的分页出现问题。

关于性能：
    这次修改，主要就是做的对懒加载性能方面的改善，在实际项目中发现第一层进行了分页处理之后，但是子节点还有上千条节点，结果依然出现严重的js性能问题，于是想到了继续进行分页的点子。



欢迎提出建议！

附件做了修改,现在可以直接运行了.不用再做修改.

评论

30 楼 xyc717 2014-06-14  

多好的东西啊……

29 楼 wyfn18 2014-01-21  

看起来不错，下来试试

28 楼 hutao 2013-09-13  

哥们，下载不了啊，我急需要用啊，我QQ  112641249，能给我发一份吗，非常感谢！！！

27 楼 鲁愚平 2013-07-01  

请教，如何把表头那一行做成链接的形式呢？

26 楼 renjie120 2013-06-07  

鲁愚平 写道

您好！我想借用您的树控件，但是我没有使用过JAVA，刚刚把JSP的环境搭建好，我应该把您的工程放在哪个目录下呢？我直接放在webapps下，不管用

我这个是js的东西，和java没有直接关系的，可能就里面的一个url可能有点联系，对应返回一个json串的请求就ok了。

25 楼 鲁愚平 2013-06-02  

您好！我想借用您的树控件，但是我没有使用过JAVA，刚刚把JSP的环境搭建好，我应该把您的工程放在哪个目录下呢？我直接放在webapps下，不管用

24 楼 li4haoo 2013-01-14  

你好，正在使用你的插件，非常紧急明天要提交任务了。有个问题想问你GridTree.all.js 报缺少对象错误，即：_cancelFaher: function(checkboxDom) {
                var nodeId = checkboxDom.value;
                if (!checkboxDom.checked) {
                    while (1 == 1) {
                        var parentId = _$('_node' + nodeId)._node_parent;
                        if (_$(parentId)) {
                            nodeId = parentId.replace('_node', '');
                            if (!g._anyChildChoosed(parentId)) {
                                var obj = _$('_chk' + nodeId).firstChild;
                                if (_notBindDisabled(obj)) obj.checked = 0;

                            }

                        } else {
                            break;  这里，我是想多选文本框时的id

23 楼 renjie120 2013-01-07  

rainingword 写道

树在分页的处理上非常强大，值得学习，但没有对树的节点进行搜索的功能，加上就完美了。由于我们项目上也用jquery tb_tree做了一个树，有分页，有搜索。可惜是一次从内存中读取，不是异步加载。在表中有200万条树的记录时，每次第一次加载异常慢。因此想采用楼主的树，再开发搜索功能来完成对原有树的改造。一切为了用户啊。

呵呵

我自己做了搜索的功能的。不过版本没有更新了。现在做android的开发的东西了。

22 楼 rainingword 2013-01-06  

树在分页的处理上非常强大，值得学习，但没有对树的节点进行搜索的功能，加上就完美了。由于我们项目上也用jquery tb_tree做了一个树，有分页，有搜索。可惜是一次从内存中读取，不是异步加载。在表中有200万条树的记录时，每次第一次加载异常慢。因此想采用楼主的树，再开发搜索功能来完成对原有树的改造。一切为了用户啊。

21 楼 renjie120 2012-11-09  

shelleydiu 写道

楼主，这个插件可以默认树，子节点为表格吗，求帮助

不可以，需要自己修改。

20 楼 shelleydiu 2012-10-17  

楼主，这个插件可以默认树，子节点为表格吗，求帮助

19 楼 ry.china 2011-12-30  

做的非常强大了，完全能够满足我的需求，如果全部用jquery的话，代码量应该更少

18 楼 huayi550 2011-10-09  

这个Demo符合我的需求，我找了几个Tree都是单独的Tree，不支持Grid

17 楼 renjie120 2011-08-29  

玻璃杯 写道

请问这棵树支持asp.net+c#吗？

如果asp.net和C#支持js的话,这个表格树就支持.
我没有用过C#和asp.net.
C#和asp.net可以使用jquery么??如果可以使用,那我这个表格树也可以.

16 楼 玻璃杯 2011-08-28  

请问这棵树支持asp.net+c#吗？

15 楼 bill600 2011-01-29  

不过我们还要以拖拽和排序

14 楼 bill600 2011-01-29  

项目里要用 自己写了一个和你的差不多 早看到就省事了

13 楼 rmn190 2011-01-28  

不错的东西 ， 看到楼主的作品想起来了在上家公司自己搞的一个类似的东西， 当时在项目中做到了四层展开， 但显得很乱。

可惜没有给抽出一个很规范的框架来。

多谢楼主分享！

12 楼 chengji518 2011-01-27  

这个Demo写得非常不错！谢 了，借鉴之用

11 楼 iamyumingxing 2011-01-27  

大概看了一下,不错!