簡單好用的TreeGrid

最近寫的程式需要呈現在表格上階層資料關係，找了些相關的PlugIn後，發現TreeGird此PlugIin，完全符合我的需求:
1.載入的.js及.css很少且很輕量，只需載入bootstrap，而不用載入其他太多的PlugIn ps:我目前找plugIn也是以此方向去找。
2.Script撰寫簡單，只需一行程式$('.tree').treegrid();。
3.階層的定義方式很直覺，直接以Table並在tr加上css名稱來區分上下關係。
4.直接定義在HTML上，內容調整相當容易
5.事件支援 如:展開/收合
6.狀態保存(需引用jquery.cookie.js)

開始介紹如何使用前，先看一下範例成果

使用方式:

1.撰寫script，載入treegrid.css,.treegrid.js，ps:若要用到bootstrap樣式，再載入jquery.treegrid.bootstrap3.js

<link href="Content/jquery.treegrid.css" rel="stylesheet" />   
<script src="Scripts/jquery.treegrid.js"></script>
    <script src="Scripts/jquery.treegrid.bootstrap3.js"></script>
    <script>
        $(function () {
            $(".tree").treegrid();
        });
    </script>

2.定義表格階層

<table class="table tree">
        <tr class="treegrid-1">
            <td>Root </td>
        </tr>
        <tr class="treegrid-2 treegrid-parent-1">
            <td> Apple</td>
        </tr>
        <tr class="treegrid-3 treegrid-parent-2">
            <td>  iPhone5s</td>
        </tr>
        <tr class="treegrid-4 treegrid-parent-2">
            <td>iPadMini</td>
        </tr>
        <tr class="treegrid-5 treegrid-parent-1">
            <td> HTC</td>
        </tr>
        <tr class="treegrid-6 treegrid-parent-5">
            <td> NewOne</td>
        </tr>
        <tr class="treegrid-7 treegrid-parent-1">
            <td> Nokia </td>
        </tr>
        <tr class="treegrid-8 treegrid-parent-7">
            <td> Lumia620 </td>
        </tr>
        <tr class="treegrid-9 treegrid-parent-7">
            <td> Lumia920</td>
        </tr>
        <tr class="treegrid-10">
            <td>Root 2</td>
        </tr>
        <tr class="treegrid-11 treegrid-parent-10">
            <td> Samesung</td>
        </tr>
    </table>

上方css class的重點

1.treegrid-*為識別id的命名方式 treegrid-流水號
2.若為子節點則在後方的css 加上“treegrid-parent-*”為對應到父節點的id
更多介紹請參考
http://maxazan.github.io/jquery-treegrid/
範例下載
https://github.com/kimx/TreeGridLab/