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" οnclick="jQuery('#example-advanced').treetable('expandAll'); return false;">展开a>

<a href="#" class="btn btn-blue" οnclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">关闭la>

样式修改：

<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>