JQuery 树形表格插件使用

第一步：

 1.上官网下载，treetable插件提供了历史版本，我这里使用的是最新的3.1.0的版本。

2.插件引用，当你下载的时候，会有很多个文件，但是根据他们的api来看，如果你只想做简单的效果，js除了引用juquery外，只需要引用jquery.treetable.js插件，如果你想让它有默认的外观样式还需要引入它们的jquery.treetable.css和jquery.treetable.theme.default.css，这两个文件的作用我后面会说明。

第二步：建立table格式

<table id="example-advanced">    <tr data-tt-id="1">        <td>大家电</td>    </tr>    <tr data-tt-id="2" data-tt-parent-id="1">        <td>---电视</td>    </tr>    <tr data-tt-id="3" data-tt-parent-id="1">        <td>---洗衣机</td>    </tr>    <tr data-tt-id="4" data-tt-parent-id="1">        <td>---冰箱</td>    </tr></table>

第三步：引入JS

/* 初始化数据 */

$("#example-advanced").treetable({ expandable: true });
/* 高亮显示 */
$("#example-advanced tbody").on("mousedown", "tr", function() {    $(".selected").not(this).removeClass("selected");    $(this).toggleClass("selected");});
/* 点击展开&&关闭 */
<a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('expandAll'); return false;">展开</a><a href="#" class="btn btn-blue" onclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">关闭l</a>

样式修改：

<style>    table.treetable{        border-color: #ddd;    }    table.treetable{        border:1px solid #ddd;        border-top:none;        border-left: none;        margin: 0;    }    table.treetable thead tr th{        border-color: #ddd;        border-top:none;        border-left: none;        border-bottom: none;        font-weight: bold;    }    table.treetable tbody tr td{        border-left: none;    }</style>