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
總的來說是一個遞歸的過程