web页面树形表格的实现

在做web项目的时候，我们通常会遇到这样的情况，一些数据需要用树形的结构来表示他们之间的关系，那么要怎么来实现呢？这里介绍使用插件jquery-treetable来实现的方法。
1 下载源码，地址:http://ludo.cubicphuse.nl/jquery-treetable/,也可以在线查看Api。
2 在自己的页面里面引入js文件和css文件，如何要结合jqueryUI使用则要引入jqueryUI的js文件。
<link rel="stylesheet" type="text/css" href="treetable/css/jquery.treetable.css">
<link rel="stylesheet" type="text/css" href="treetable/css/jquery.treetable.theme.default.css">
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<!-- jquery-ui -->
<script type="text/javascript" src="treetable/js/jquery-ui.js"></script> 
<script type="text/javascript" src="treetable/js/jquery.treetable.js"></script>
3 定义标签<table id="example-basic" class="treetable"></table>，class属性必须为treetable，这个跟样式有关，注意<tbody><tr></tr></tbody>,同样的道理。
当然你也可以去样式文件修改自定义样式。
<table id="example-basic" class="treetable">
       <thead>
         <tr>
          <th>类别名称</th>
          <th>类别编号</th>
          <th>增加时间</th>
          <th>操作</th>
         </tr>
       </thead>
       <tbody class="json-list">
        <tr data-tt-id="1" class="expanded">
        <td><span class="indenter" style="padding-left: 0px;"><a href="#" title="Collapse">&nbsp;</a></span>零食</td>
        <td>1</td>
        <td>2015-01-26 11:05:35</td>
        <td><a href="javascript:void(0);" οnclick="getModifyPageAndJump(1)">修改</a>|<a href="javascript:void(0);" οnclick="deleteById(1);">删除</a>|<a href="javascript:void(0);" οnclick="getPageAndJump(1);">查看商品信息</a></td>
        </tr>
        <tr data-tt-id="4" data-tt-parent-id="1" class="collapsed" style="display: table-row;">
        <td><span class="indenter" style="padding-left: 19px;"></span>酸类零食</td>
        <td>4</td>
        <td>2015-01-26 14:08:07</td>
        <td><a href="javascript:void(0);" οnclick="getModifyPageAndJump(4)">修改</a>|<a href="javascript:void(0);" οnclick="deleteById(4);">删除</a>|<a href="javascript:void(0);" οnclick="getPageAndJump(4);">查看商品信息</a></td>
        </tr>
       </tbody>
</table>
4 调用jquery.treetable.js脚本。相关动作和事件请查api。
$("#example-basic").treetable({ expandable: true });  
$("#example-basic tbody tr").mousedown(function() {
$("tr.selected").removeClass("selected");
$(this).addClass("selected");
});

5 效果如下：