第105款插件：jquery.treetable.js的使用

[TOC]

之前我们用过 ztree.js，它是有一个json数据，然后将之变为树状结构！

现在我们的情况是有一个表格，想将之变为树状结构，怎么来操作呢？

下边我来为大家介绍一款jquery的插件jquery.treetable.js插件，这款神器就是这样诞生的！

演示地址

最简演示

treetable拖拽

插件介绍

1、GitHub 地址官方网站：https://github.com/ludo/jquery-treetable

备注：clone下来后记得 bower install，否则会看不到实际效果的

再备注：网上我共找到好几个treetable，其实都挺好用的！但这一款是数年来一直在更新的。可靠实用！

2、 API 地址 http://ludo.cubicphuse.nl/jquery-treetable/

3、 jQuery 官网链接 http://plugins.jquery.com/treetable/1

需要加载的JS和CSS内容

需要说明的是，必须引用的JS和扩展代码：

jquery.js
jquery.treetable.js  这是表格树JS
jquery.treetable.css  这是表格树的CSS
jquery.treetable.theme.default.css  这是默认主题样式，可以根据实际情况加载不同的样式

这里是引用bootcdn.cn的绝对地址，有兴趣的可以直接使用

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--tree/start-->
<script src="https://cdn.bootcss.com/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>
<link href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.css" rel="stylesheet">
<!--tree/end-->

表格特征

<table id="id">
    <tr data-tt-id="0"><td>app</td></tr>
    <tr data-tt-id="1" data-tt-parent-id="0"><td>controller</td></tr>
</table>

很明显，我们多了data-tt-id和data-tt-parent-id两个值

名称	备注
data-tt-id	级别，0为1级，1为2级
data-tt-parent-id	上一级的ID

下边来讲一下表格的演变过程

分析过程

（一）我们常用的表格

<h1>原始-表格</h1>
<table>
    <tr>
        <td>app</td>
    </tr>
    <tr>
        <td>controller</td>
    </tr>
    <tr>
        <td>admin.php</td>
    </tr>
    <tr>
        <td>model</td>
    </tr>
    <tr>
        <td>validate</td>
    </tr>
    <tr>
        <td>view</td>
    </tr>
</table>

（二）经过变化静态树表格

只需要 $("#id").treetable(); 这一句代码即可！

<h3>静态树-表格</h3>

<table id="example-basic-static">
    <tr data-tt-id="0">
        <td>app</td>
    </tr>
    <tr data-tt-id="1" data-tt-parent-id="0">
        <td>controller</td>
    </tr>
    <tr data-tt-id="5" data-tt-parent-id="1">
        <td>admin.php</td>
    </tr>
    <tr data-tt-id="2" data-tt-parent-id="0">
        <td>model</td>
    </tr>
    <tr data-tt-id="3" data-tt-parent-id="0">
        <td>validate</td>
    </tr>
    <tr data-tt-id="4" data-tt-parent-id="0">
        <td>view</td>
    </tr>
</table>
<script>
    $(function() {
        $("#example-basic-static").treetable();
    })
</script>

（三）经过变化的可伸缩（加参数）-表格

这一个表格和一个表格是一样的，只不过多加了一个参数而已

只需要 $("#id").treetable({expandable: true}); 这一句代码即可！

有关更多的参数请参考：

<h1>可伸缩-表格</h1>
<table id="example-basic-expandable">
    <tr data-tt-id="0">
        <td>app</td>
    </tr>
    <tr data-tt-id="1" data-tt-parent-id="0">
        <td>controller</td>
    </tr>
    <tr data-tt-id="5" data-tt-parent-id="1">
        <td>admin.php</td>
    </tr>
    <tr data-tt-id="2" data-tt-parent-id="0">
        <td>model</td>
    </tr>
    <tr data-tt-id="3" data-tt-parent-id="0">
        <td>validate</td>
    </tr>
    <tr data-tt-id="4" data-tt-parent-id="0">
        <td>view</td>
    </tr>
</table>
<script>
    $(function() {
        $("#example-basic-expandable").treetable({
            expandable: true
        });
    })
</script>