发表时间：2010-04-03
最后修改：2011-01-25
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对应的直接子节点（不包括孙子节点！）详细请参考示例后台工程的代码！
