treegrid.bootstrap使用说明

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的程序，

 

大概的思路是：

1， 找到所有父节点

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

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

 

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