树型表格

可以折叠的表格,像树一样的表格,还可以长叶子,效果图如下

1. 引入必要文件

public/img/js/lib/cmstop.treetable.js
pubic/img/js/lib/treetable/style.css

2. 使用

表格元素

<table class="table_list" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th class="t_c bdr_3">
名称</th>
      <th class="t_c" width="250">
</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

创建应用

var tree = new ct.treeTable('#treeTable',{
   //
树结构所在列索引
            treeCellIndex:0,
   //
行数据模板
            template: '<tr id="row_{pageid}"><td>{}</td><td>{}</td></tr>',
   // tr
id属性值前缀
   rowIdPrefix:’row_’,
   //
子与父关联字段
   parentField:’parentid’,
   //
初始化树是否折叠 默认true
   collapsed:true,
   //
请求数据url
            baseUrl:'?app=page&controller=page&action=tree',
   // json
数据载入完毕 回调函数
   jsonLoaded:function(json){},
   //
一行数据准备好并插入到表格后 回调函数
            rowReady:function(id, tr, json){},
   //
所有行准备好后 回调函数
   rowsPrepared:function(tbody){}
});
</script>

3. API

// 添加节点
<treeTable>.addRow(<Hash> json);
//
更新节点
<treeTable>.updateRow(<mixed> id, <Hash> json)
//
删除节点 包括分支
<treeTable>.deleteRow(<mixed> id)
//
载入数据
<treeTable>.load(<string> where)



Copyright ©2009 - 2014 CmsTop.Com.All rights reserved.
思拓合众