treegrid.bootstrap使用說明

?

這個(gè)插件是用來做有層次的表格的，大概如圖：

?

官網(wǎng)??http://maxazan.github.io/jquery-treegrid/

?

使用這個(gè)控件之前需要引入以下css及js（因?yàn)橛玫搅?bootstrap.js?所以加上了?bootstrap的樣式和腳本）

bootstrap.min.css

jquery.treegrid.css

jquery.min.js

bootstrap.min.js

jquery.treegrid.js

jquery.treegrid.bootstrap3.js

?

然后將需要用到的<table>標(biāo)簽中加入對應(yīng)樣式：

<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>

?

結(jié)果如下：

?

可以從上面的一段html中看出，使用這個(gè)控件的關(guān)鍵點(diǎn)有：

1，每一行<tr>都有唯一的id號???treegrid-***?

2，子節(jié)點(diǎn)的<tr>都有parentID號??treegrid-parent-**

3,子節(jié)點(diǎn)必須緊跟在父節(jié)點(diǎn)后面，否則表格會排序錯(cuò)誤（已測試過了）?

?

總結(jié)一點(diǎn)：使用這個(gè)treegrid?就是把?<tr?class=”treegrid-**?treegrid-parent-**”>拼寫正確。

?

?

?

例子代碼中展示了動態(tài)生成treegrid的程序，

?

大概的思路是：

1，?找到所有父節(jié)點(diǎn)

2，?遍歷父節(jié)點(diǎn)，生成<tr>?，如果該父節(jié)點(diǎn)有子節(jié)點(diǎn)，進(jìn)行步驟3

3，?遍歷子節(jié)點(diǎn)，生成<tr>?，返回步驟2

?

總的來說是一個(gè)遞歸的過程

?

轉(zhuǎn)載于:https://www.cnblogs.com/fuqiang88/p/4768879.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。