第一步：
1.上官网下载。
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>
table {font-size:12px
width:100%
height:500px
color:#ff0000
}
font-size:12px字体大小12像素
width:100%表格宽度100%，也可以用像素
height:500px高度500像素
color:#ff0000字体红色
<table border="1">属于html的标签属性，border只能控制显示线条的粗细，不能控制边框的所有外观（颜色、线条类型等），并且 border="1" 在每个浏览器中呈现的效果也有细微的差别。table{
border:1px solid #000000
} 采用css样式能精准的控制边框的外观，并且也做到左边线是什么外观，右边线是什么外观（left-border:... right-border:...）等。
