jquery表格树GridTree的懒加载版本（含demo工程，源码）

2011年01月24号 最新表格树已经发布了:http://renjie120.iteye.com/admin/blogs/894183

  主要修改:添加懒加载无限层次分页;

               添加表格树动态刷新

               添加表格树动态添加子节点

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

转载请注明出处： http://renjie120.iteye.com/

 

最新动态：version1.0 http://code.google.com/p/gridtree-jquery-plugin-demo/  （2010.09.25）

欢迎在google code界面进行提问与讨论！谢谢。

 

此前的表格树说明

 

表格树开发的心得

重要说明：
（1）关于懒加载： 即第一次显示表格树的时候只显示第一层的部分节点，然后在当点击含有子节点的图标时，动态的到后台查询子节点，这样就避免的一次加载全部的节点，速度有很大的提高。懒加载模式下，不可以使用“全部展开”，“全部折叠”等方法，理由是全部展开就等于一次性加载全部节点了，效率的问题依然不可以解决！使用过ext表格的动态加载的同学们，应该有懒加载的概念，不过ext懒加载表格没有限制“全部展开”方法，效率很低，我的设计就做了这样的处理。

（2）添加了三个重要的回调方法：
        onLazyLoadSuccess:懒加载执行完之后,可以进行处理.
        onSuccess:表格树load完毕可以进行处理,类似回调函数.
        onPagingSuccess:表格树翻页执行完毕,可以进行处理.
如果你不满意默认的表格处理，你完全可以在这里的方法重新做你喜欢的事情，包括选择模式的自定义等等。懒加载模式下，“选择模式”都做了简化处理，没有5 种选择，你要实现个性化的选择模式就需要在onLazyLoadSuccess定义方法处理！

1.下面是一个简单的使用后台数据的配置

var content = {
        columnModel : [{
                    header : '编码',
                    headerIndex : 'districtId',
                    width:’100px’
                }, {
                    header : '地域名称',
                    headerIndex : 'districtName',
                    width:’100px’
                }, {
                    header : '父级节点',
                    headerIndex : 'districtParent'
                }],
        dataUrl : APP_PATH + '/district.do?method=getGridTree',
        idColumn : 'districtId',
        parentColumn : 'districtParent',
        tableId : 'testTable', 
        el : 'newtableTree'
    }；

说明：
（1）columnModel:表示要显示出来的列的描述.
    header:表头的列的显示(必写)
headerIndex:表格该列的数据来源于哪一具体的数据描述.(必写)
（2）dataUrl：后台请求的地址
（3）idColumn：标明要进行唯一性确认的标示列的列名（在分析树形结果时必须使用的属性， 其对应的数据值不得有重复）
（4）parentColumn：标明表示父级id的列的列名
（5）tableId：形成的表格的id
（6） el：表格树渲染的对象，也就是在body中要用来显示表格树的div的id
配置完如上参数之后，再执行loadData（参数）和makeTable（）方法就可以得到最简单的表格树了。


2.添加表格列的多样化显示，示例如下：
在配置文件中的columnModel属性使用如下设置:
columnModel:[
    {header:'唯一标识',headerIndex:'disId'},
    {header:'地域名称',headerIndex:'disName'},
    {header:'父级节点',headerIndex:'disParent',
columntype:{inputtype:’html’,nameId:'testHtml',htmlStr:’<font color=”red”>$</font>’}},
    {header:'测试单选',headerIndex:'rd',width:'300px',            
        columntype:{inputtype:'radiobox',style:'testradio',values:['1','2'],texts:['男','女'],nameId:'sexRd'}},
    {header:'测试下拉菜单',headerIndex:'radi',                
        columntype:{inputtype:'select',style:'testselect',values:['1','2'],texts:['男','女'],nameId:'sexSel'}},
    {header:'测试多选',headerIndex:'multi',width:'10%',               
      columntype:{inputtype:'checkbox',style:'testmulti',values:['1','2','3','4'],texts:['上','下','左','右'],
nameId:'fangxiang', disabledIndex:'rddisbled',  isibledIndex:'rdvisabled'}}],
配置说明:
    columntype:列的类型说明
    inputtype:表示要使用的列的类型,现在暂时支持:’radiobox’,’select’,’checkbox’,’textbox’,’html’.
    style(当inputType不等于html时有作用):样式说明,针对引入的表单控件的样式
    values(当inputType= radiobox, select, checkbox时有作用):表单的实际值,是一个js数组
    texts(当inputType= radiobox, select, checkbox时有作用):表单的显示值,是一个js数组
    nameId:表单的name属性前缀.实际的name属性是该值+所在行的id.
    htmlStr(当inputType=html时有作用):自定义一段html字符串,.其中的$将被headerIndex指向的值替换.
    disabledIndex:'disabledColumn',控制表单元素是否禁用的一个属性,值为在json数据中存在的一列名,如果对应的值为1则禁用,否则可用
    visibledIndex:'visibleColumn', 控制表单元素是否可见的一个属性,值为在json数据中存在的一列名,如果对应的值为1或者没有设置该值,就可见,否则不可见
    onclick:function(){alert(1);},  如果类型是checkbox或者radiobox,添加了定义onclick方法的接口.

3.   表格树的其他配置说明
（7）debug:true，//出现一个展示表格树的加载信息的div框
（8）handleCheck:function(){},//定义点击选择按钮的事件.就是onclick的事件处理方法,可以不写.
（9）disabled:true,如果为true表示表格树中的按钮,多选框等禁用.默认为false.
（10）disableOptionColumn:'rddisbled',//用来标识指定的选择框是否禁用的属性,默认没有
（11）hidddenProperties: ['multi','disName'],//表示在一行还要添加一些隐藏的列值,不显示出来,但是要放在行中.注意设置属性的值是数组类型.可以不设置该属性.使用了这个属性,就可以在行对象中直接使用obj.multi得到该值,比较方便.
（12）chooesdOptionColumn:'rddisbled',//用来标识默认的选择多选框的属性,在有多选按钮的情况时候有用.
（13）handler :[{“onclick”,function(row){alert(row.id);}},
        {“ondblclick”:function(){alert(1);}}],
    为每一行的表格树添加自定义的事件处理函数.因为表格树每一行是tr,定义td支持的事件都可以在该属性中配置.注意其值是一个数组.如果不配置该属性,将有默认的实现.
 
4.懒加载树的配置说明
（14）lazy：为true则表示是懒加载树，然后必须设置下面两个属性：
（15）lazyLoadUrl：点击非树叶节点调用的后台请求地址，将传给后台一个参数值为‘pId’
（16）leafColumn：设置表示是否叶子节点的属性，如果对应的数据是‘1’则标示是父亲节点，为‘0’就表示是叶子节点没有孩子节点。（好像是反了，但是我的代码已经这样做了，已经改了很多了，不想再改了。如果大家不喜欢就直接改源码吧！）

5.回调函数配置说明
（17）onPagingSuccess:在翻页显示表格之后，最后一步将执行此回调函数，你可以做任意想做的事情，包括隐藏某列等等，只要熟悉js都ok！
（18）onLazyLoadSuccess：在点击父亲节点加载子节点之后，最后一步执行此回调方法，随便你做！
（19）onSuccess：在初次加载表格结束之后，你想做什么就做吧。

6.一些其他配置参数，不了解的看看这里：
（20）pageBar：true; 表示要展示分页栏，也就是会出现分页的效果
（21）pageSize：10;表示每页显示的第一级节点的数目（如果不设置，默认是3个每页）
（22）rowCount：true;默认是没有这一列
（23）countColumnDesc： ‘序列’;自增列的列头名(如果不设置默认是'序列')
（24）checkOption：1；可以选择1或者2，如果是1就是单选按钮，2就是多选按钮，其他将不出现选择列。
（25）checkColumnDesc：‘请选择’；选择列的列头名（如果不设置，默认就是‘请选择’）
（26）openImg：可以打开的图标的文件。
（27）closeImg：收缩节点的图标文件。
（28）blankImg：树叶节点前面的图标文件
（29）expandAll:true,表格树显示的时候自动展开全部的孩子节点。
（30）lazyLoadImg：在懒加载的等待期间，加号图标悄悄变成了这个图片！

7.可以不用管的几个属性
（31）analyzeAtServer：为true或者false，后台的json数据是不一样的！如果是懒加载的话，默认该参数是false。
（32）styleOption：为1，2两个可选值，换着看一下发现一个还将就的看着行，一个难看了点。
(33 )showMenu, contextMenu:以前想实现邮件增加，删除节点，现在没有实现。

8.关于后台代码
懒加载表格树，实际有两个java方法要进行处理，一个是dataUtl对应的请求，一个是lazyLoadUrl对应的请求。前者查询的list是第一层要展示的节点集合，而且要加上一个表示是否叶子节点的属性值！后者是查询传入的节点id对应的直接子节点（不包括孙子节点！）详细请参考示例后台工程的代码！

 

评论

8 楼 renjie120 2010-04-13  

我的联系方式
[e-mail]
欢迎赐教.

7 楼 renjie120 2010-04-13  

liliang205 写道

性能根本不行。数据量大点就不行了。树形grid 分页就没什么含义了。

你是不是经过测试的,使用lazy=true进行懒加载的表格树,性能是可以忍受的.不知道你指的性能慢是多少数据量慢.

如果是第一级树节点数目有上万的话,那慢的话,我没有办法,因为我的方案是分页+懒加载..

如果不喜欢这样的话,我的表格树插件就不适合.

为什么树形grid不分页呢?各个项目要求不一样,我们系统的就有分页.使用过ext的懒加载树,如果数据量大的话也会死机,我的表格树也不例外.

6 楼 liliang205 2010-04-13  

性能根本不行。数据量大点就不行了。树形grid 分页就没什么含义了。

5 楼 renjie120 2010-04-09  

除了懒加载,也可以不用懒加载啊!
通过lazy属性可以灵活配置..

不过后台代码也有不同...

4 楼 robyjeffding 2010-04-08  

就是发一些图片看看就更好了，在做树的列表时，如果数据量不是很多的话，一次性传问加载性能可能更大，就不需要每次点击一个节点，就跟后台交互了。。。

3 楼 zhangdaiping 2010-04-07  

表格树，和我发的那个差不多，只不过我的是Ext版本

2 楼 renjie120 2010-04-07  

呵呵 大家都懒得顶了..我发的版本太多了.

1 楼 triny1984 2010-04-07  

那么好的东西没有顶的？