treeTable也是一种很常用的插件，以数型table的形式来展示数据，效果图如下：
不多说了，直接贴代码吧：
需要引入的文件：
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.treetable.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.treetable.theme.default.css" />
<link rel="stylesheet" type="text/css" href="jquery.treetable.css" />
html代码：
<table id="example-advanced">
<tr data-tt-id="0">
<td>app</td>
</tr>
<tr data-tt-id="1" data-tt-parent-id="0">
<td>controllers</td>
</tr>
<tr data-tt-id="1-1" data-tt-parent-id="1">
<td>application_controller.rb</td>
</tr>
<tr data-tt-id="2">
<td>helpers</td>
</tr>
<tr data-tt-id="2-1" data-tt-parent-id="2">
<td>models</td>
</tr>
<tr data-tt-id="2-1" data-tt-parent-id="2">
<td>views</td>
</tr>
</table>
<a href="#" onclick="jQuery('#example-advanced').treetable('expandAll'); return false;">展开所有</a>
<a href="#" onclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">关闭所有</a>
<br/>
双击可以看到选择的是哪个
js代码：
<script>
$(function(){
//加载treetable
$("#example-advanced").treetable({ expandable: true });
//选中高亮
$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
//双击提示
$("#example-advanced tbody").on("dblclick", "tr", function() {
//console.log($(this).attr('data-tt-id'));
alert("你选择的是"+$(this).attr('data-tt-id'));
});
})
</script>
源码连接如下：
http://download.csdn.net/detail/s592652578/8520831