treegrid.bootstrap使用说明

时间:2023-11-10 20:21:56

treegrid.bootstrap使用说明

这个插件是用来做有层次的表格的,大概如图:

官网  http://maxazan.github.io/jquery-treegrid/

使用这个控件之前需要引入以下css及js(因为用到了 bootstrap.js 所以加上了 bootstrap的样式和脚本)

bootstrap.min.css

jquery.treegrid.css

jquery.min.js

bootstrap.min.js

jquery.treegrid.js

jquery.treegrid.bootstrap3.js

然后将需要用到的<table>标签中加入对应样式:

<table class="tree table table-hover table-bordered table-condensed">

<tr class="treegrid-1">

<td>Root node</td><td>Additional info</td>

</tr>

<tr class="treegrid-2 treegrid-parent-1">

<td>Node 1-1</td><td>Additional info</td>

</tr>

<tr class="treegrid-3">

<td>Node 1-2</td><td>Additional info</td>

</tr>

<tr class="treegrid-4 treegrid-parent-3">

<td>Node 1-2-1</td><td>Additional info</td>

</tr>

</table>

然后引用js

<script type="text/javascript">

$(document).ready(function () {

$('.tree').treegrid();

});

</script>

结果如下:

可以从上面的一段html中看出,使用这个控件的关键点有:

1,每一行<tr>都有唯一的id号   treegrid-***

2,子节点的<tr>都有parentID号  treegrid-parent-**

3,子节点必须紧跟在父节点后面,否则表格会排序错误(已测试过了)

总结一点:使用这个treegrid 就是把 <tr class=”treegrid-** treegrid-parent-**”>拼写正确。

treegrid.bootstrap使用说明

例子代码中展示了动态生成treegrid的程序,

大概的思路是:

1, 找到所有父节点

2, 遍历父节点,生成<tr> ,如果该父节点有子节点,进行步骤3

3, 遍历子节点,生成<tr> ,返回步骤2

总的来说是一个递归的过程