因項目需要,需要在表格中加入tree,使用了jquery的tree table,經美化,完美相容各種架構的table;
請移步下載下傳tree table 的js檔案及css檔案等,http://ludo.cubicphuse.nl/jquery-treetable/;
用到css檔案:
用到js檔案:
使用示例:
Parent |
Child |
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);
}
}