jquery的tree table(樹表)

　　因項目需要，需要在表格中加入tree，使用了jquery的tree table，經美化，完美兼容各種框架的table；

　　請移步下載tree table 的js文件及css文件等，http://ludo.cubicphuse.nl/jquery-treetable/；

     用到css文件：<link rel="stylesheet" href="../../style/jquery.treetable.css">

<link rel="stylesheet" href="../../style/jquery.treetable.theme.default.css">

用到js文件：<script src="../../js/jquery-1.10.1.min.js"></script>

<script src="../../js/bootstrap-treeview.min.js"></script>

 

使用示例：

<table id="tableId">
  <tr data-tt-id="1">
    <td>Parent</td>
  </tr>
  <tr data-tt-id="2" data-tt-parent-id="1">
    <td>Child</td>
  </tr>
</table>   

data-tt-id為2的tr  通過data-tt-parent-id指向1節點，意思就是第二個tr是第一個tr的子節點；

一行js搞定，$("#tableId).treetable({expandable : true});

層級復雜的表格通過后台遞歸查詢查出數據list后，可以通過判斷該節點是否具有父節點來給tr增加parent_id,看示例：

var trArr = $("#tableId tr");

for (var i = 0; i < trArr.length; i++) {
$("#tableId tr:eq(" + i + ")").attr(
"data-tt-id", tabledate[i].orgId);
if (tabledate[i].parentOrg != '') {
$("#tableIdtr:eq(" + i + ")").attr(
"data-tt-parent-id", tabledate[i].parentOrg);
}
}