使用步骤:
1.去官网下载这个插件,点击下载,导入相应的文件;
注意:在引入css的时候多加了theme.default.css这个文件,可以更美观,强烈推荐使用;
注意:不要忘记加入Jquery
2.编写一个测试的html页面;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/jquery.treetable.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.treetable.theme.default.css" rel="stylesheet" />
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.treetable.js"></script>
<script>
$(function () {
$("#example-basic-expandable").treetable({ expandable: true });
})
</script>
</head>
<body>
<table id="example-basic-expandable">
<tbody>
<tr data-tt-id="0" >
<td>app</td>
</tr>
<tr data-tt-parent-id="0" data-tt-id="1">
<td>controllers</td>
</tr>
<tr data-tt-parent-id="1" data-tt-id="5">
<td>application_controller.rb</td>
</tr>
<tr data-tt-parent-id="0" data-tt-id="2">
<td>helpers</td>
</tr>
<tr data-tt-parent-id="0" data-tt-id="3">
<td>models</td>
</tr>
<tr data-tt-parent-id="0" data-tt-id="4">
<td>views</td>
</tr>
</tbody>
</table>
</body>
</html>
3.一些属性解释:
a.首先,有一个table,只要按照以上的这种格式,就可以出现属性结构,并且可以为table多加上几个列,可以显示更多的信息,例如,可以加个编辑删除的列;
b.data--tt-id这个属性代表本身节点的id,只能够唯一一个,但是data-tt-parent-id代表这个节点的父类的id,
c.严格按照一定的顺序展示节点,比如A节点的子节点a、b、c,必须紧紧跟在A节点的后面出现;
d.最后调用$("#example-basic-expandable").treetable({ expandable: true });