`
renjie120
  • 浏览: 234172 次
  • 性别: Icon_minigender_1
  • 来自: 上海
博客专栏
D11bba82-ec4a-3d31-a3c0-c51130c62f1c
Java应用集锦
浏览量:22342
社区版块
存档分类
最新评论

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对应的直接子节点(不包括孙子节点!)详细请参考示例后台工程的代码!

 

  • 大小: 18.2 KB
分享到:
评论
8 楼 renjie120 2010-04-13  
我的联系方式
renjie120@hotmail.com
欢迎赐教.
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  
那么好的东西没有顶的?

相关推荐

Global site tag (gtag.js) - Google Analytics