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);
}
}

 


种桃道士归何处,前度刘郎今又来。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平