表格树jquery插件GridTree配置说明

2011新年版本表格树新加的配置属性：

   下载地址：http://renjie120.javaeye.com/blog/894183  （在此javseye贴后面回帖讨论！）

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.a('父节点id','子串json串'):对指定的节点添加孩子节点

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

 

---

 

懒加载版本表格树（10年4月2日）配置详细说明

直接看我的工程吧！公开源码

因为现在发布的版本比较多了，所以这次把最新的配置说明全部重新说明一遍，对于以前的版本是向前兼容的。使用的方法基本和以前一样。

重要说明：

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

（2）添加了三个重要的回调方法：

        onLazyLoadSuccess:懒加载执行完之后,可以进行处理.
        onSuccess:表格树load完毕可以进行处理,类似回调函数.
        onPagingSuccess:表格树翻页执行完毕,可以进行处理.

如果你不满意默认的表格处理，你完全可以在这里的方法重新做你喜欢的事情，包括选择模式的自定义等等。懒加载模式下，“选择模式”都做了简化处理，没有5种选择，你要实现个性化的选择模式就需要在onLazyLoadSuccess定义方法处理！

---

写在 10年3月10号：

    有几次遇到网友提出来后台版本不好使用的问题，经过沟通发现是版本不对的问题，现在最新的版本和一个后台代码的实例工程，都可以在http://renjie120.javaeye.com/blog/583388找到。

    现在表格树代存在比较突出的一个问题是效率不高，如果一页显示有400条数据的话，可能要4秒多，如果有多样化的列，时间更多。具体原因是因为页面渲染的问题比较耗时，后面将有时间就修改这个严重的bug，修改完成之后将尽快发布（估计3月底吧），谢谢大家的关注。

    现在为止表格树的代码中绝大多数代码用纯js进行的处理，今天突然看到flexigrid这个漂亮的表格，形式和我的表格树比较类似，他就是采用的大多数jquery实现的，我以前担心jquery会影响效率的问题可能不是那么严重，后面有时间将重构全部的代码采用jquery实现，如果代码比较满意，会公布源码（现在就是代码自己不喜欢，所以就没有开源，忘谅解！如果需要源码，请联系我，邮箱：lishuia1n2d3y4@sina.com）

 

    下一版本将解决的问题：

    1.解决突出的性能问题，打算采用lazy-load方式(类似ext树的实现方式)

    2.简化后台json的数据格式

    3.整理一下js代码结构，并开源

    4.有时间就做代码重构的工作，尽量多的使用jquery（有效解决浏览器兼容问题）

 

    谢谢支持的朋友！ 

 

表格树的后台代码示例

 

支持火狐版本的文档说明（含新增的配置和方法接口说明）


以下是老版本的说明，功能比较简单，也可以使用。但是不支持火狐。

---

 

GridTree下载地址 

更新版本下载地址（10.11） 

GridTree方法说明 

GridTree接受后台json数据

GridTree的原理和编程心得

以下是配置的详细说明

1.功能简要说明：

     1.1.支持静态json数据格式
     1.2.支持后台代码传递json数据
     1.3.支持前台分页（将数据的第一层节点进行分页）
     1.4.支持全部展开，全部折叠
     1.5.支持显示“自增序列”列
     1.6.支持显示“选择按钮”列
     1.7.支持自定义行的单击双击事件

2.需要引入的最重要的js文件：

<script language="javascript" src="GridTree.min.js"></script>

3.在body里面需要定义一个div： 

<div id='newtableTree' style='width:1000px;height:345px;border: 1px solid #000099;'>          正在装载，请等待。。。 </div>

4.然后在body的onload里面调用一个js方法，在这个js方法中进行表格树的创建： 

(下面是在最老版本中的使用方法,最近的代码请看demo或者这里)

var myTree= new GridTree(); function test() {                         var content = {columns:{pid:'区域id',name:'地域名称',parentId:'上级区域id'},        widths:['30%','30%','30%'],        data:[         {name:"地球",parentId:"1",pid:"2"},         {name:"亚洲",parentId:"2",pid:"3"},         {name:"天王星",parentId:"1",pid:"18"},         {name:"海王星",parentId:"1",pid:"19"}         ],        //dataUrl : 'http://localhost:3333/KeepMoney/tableTree.do?method=testGetListStr',        idColumn:'pid',        parentColumn:'parentId',         tableId:'testTable'，        el:'newtableTree'         };  //装载表格数据  myTree.loadData(content);  //显示树形表格  myTree.makeTable(); }

 

说明：以上的红色标明的属性和方法是必不可少的。

      配置属性说明：

      columns：要显示出来的数据列的列名（必须在后面的data中的json数组中有这个列）

      widths：设置列的宽度，可以为百分比或者像素等

      data：静态的json数组

      dataUrl：动态的url地址返回json数据（后面将详细介绍）

      idColumn：标明要进行唯一性确认的标示列的列名（在分析树形结果时必须使用的属性，其对应的数据值不得有重复）

      parentColumn：标明表示父级id的列的列名

      tableId：形成的表格的id

      el：表格树渲染的对象，也就是在body中要用来显示表格树的div的id

配置完如上参数之后，再执行loadData（参数）和makeTable（）方法就可以得到最简单的表格树了。

5.分页：实现的是前台分页，显示的是局部的数据。

      pageBar：true;表示要展示分页栏，也就是会出现分页的效果

      pageSize：10;表示每页显示的第一级节点的数目（如果不设置，默认是3个每页）

6.自动出现自增序列：可以在每一行添加一列计算行数，每页从1开始递增的

     rowCount：true;默认是没有这一列

     countColumnDesc：‘序列’;自增列的列头名(如果不设置默认是'序列')

7.出现选择列：

     checkOption：1；可以选择1或者2，如果是1就是单选按钮，2就是多选按钮，其他将不出现选择列。

     checkColumnDesc：‘请选择’；选择列的列头名（如果不设置，默认就是‘请选择’）

8.自定义设置一些图片：

      openImg：'./images/plus.gif'；可以打开的图标的文件。默认是‘’。

      closeImg：‘./images/minus.gif’；收缩节点的图标文件。默认是‘’

      blankImg：‘./images/blank.gif’；树叶节点前面的图标文件，默认是‘’

      lonelyImg：‘./images/tv-item.gif’；第一层显示出来的树叶节点前面的图标，默认是‘’

9.设置自动展开全部的节点：

      expandAll:true,表格树显示的时候自动展开全部的孩子节点。

我的更多文章：

• 【原】懒加载表格树版本配置详细说明(2010-04-02 22:26:32)
• 【原】支持火狐表格树的特别说明(2009-11-19 22:06:08)
• [原]编写表格树GridTree过程遇到的问题和我的心得(2009-10-11 22:16:28)
• [原]10.11日，表格树GridTree的更新说明(2009-10-11 21:51:27)
• [原]GridTree接受后台传递数据(2009-10-07 19:20:59)
• [原]jquery插件GridTree的方法接口(2009-10-07 18:43:46)
• [原]我的表格树jquery插件GridTree配置说明(2009-10-06 00:00:00)