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

?

總的來說是一個遞歸的過程

?

轉載于:https://www.cnblogs.com/fuqiang88/p/4768879.html

總結

以上是生活随笔為你收集整理的treegrid.bootstrap使用说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。