treeTable

简介

treeTable是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。

优点

  1. 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
  2. 接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以
  3. 组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等
  4. 提供两种风格: 通过参数来设置风格
使用方式

$("#元素id").treeTable({}) 如:

引用的文件


<link href="/static/wgt/treeTable/themes/default/treeTable.min.css" rel="stylesheet" />
<script src="/static/wgt/treeTable/jquery.treeTable.min.js" type="text/javascript"> </script>

            
js代码

            
$(function(){
    var option = {
        theme:'vsStyle',
        expandLevel : 2,
        beforeExpand : function($treeTable, id) {
            //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
            if ($('.' + id, $treeTable).length) { return; }
            //这里的html可以是ajax请求
            var html = '<tr id="8" pId="6"><td>5.1</td><td>可以是ajax请求来的内容</td></tr>'
                     + '<tr id="9" pId="6"><td>5.2</td><td>动态的内容</td></tr>';

            $treeTable.addChilds(html);
        },
        onSelect : function($treeTable, id) {
            window.console && console.log('onSelect:' + id);
        }

    };
    $('#treeTable1').treeTable(option);
});

           
html结构

           
<table id="treeTable1" style="width:100%">
    <tr>
        <td style="width:200px;">标题</td>
        <td>内容</td>
    </tr>
    <tr id="1">
        <td><span controller="true">1</span></td>
        <td>内容</td></tr>
    <tr id="2" pId="1">
        <td><span controller="true">2</span></td>
        <td>内容</td></tr>
    <tr id="3" pId="2">
        <td>3</td>
        <td>内容</td>
    </tr>
    <tr id="4" pId="2">
        <td>4</td>
        <td>内容</td>
    </tr>
    <tr id="5" pId="4">
        <td>4.1</td>
        <td>内容</td>
    </tr>
    <tr id="6" pId="1" hasChild="true">
        <td>5</td>
        <td>注意这个节点是动态加载的</td>
    </tr>
    <tr id="7">
        <td>8</td>
        <td>内容</td>
    </tr>
</table>
演示
标题 内容
1 内容
2 内容
3 内容
4 内容
4.1 内容
5 注意这个节点是动态加载的
8 内容
标题 内容
1 内容
2 内容
3 内容
4 内容
4.1 内容
5 注意这个节点是动态加载的
8 内容
接口

配置参数

  • theme: string {主题，有两个选项：default、vsStyle. 默认:default}
  • expandLevel: int {树表的展开层次. 默认:1}
  • column: int {可控制列的序号. 默认:0，即第一列}
  • onSelect: function {拥有controller自定义属性的元素的点击事件，return false则中止展开. 默认值: 
    function($treeTable, id) {
      //$treeTable 当前树表的jquery对象.
      //id 当前行的id
    
      //返回false，则直接退出，不会激发后面的beforeExpand和子节点的展开
      return true;
}
  • beforeExpand: {展开子节点前触发的事件, 默认值：
    • function($treeTable, id) {
      //$treeTable 当前树表的jquery对象.
      //id 当前行的id
}

属性说明

  • id: string 行的id
  • pId: string 父行的id
  • controller: bool 指定某一个元素是否可以控制行的展开
  • hasChild: bool 指定某一个tr元素是否有孩子（动态加载需用到）
  • isFirstOne: bool 指定某一个tr元素是否是第一个孩子（自动生成属性，只读）
  • isLastOne: bool 指定某一个tr元素是否是最后一个孩子（自动生成属性，只读）
  • prevId: string 前一个兄弟节点的id（自动生成属性，只读）
  • depth: string 当前行的深度（自动生成属性，只读）