jquery treeTable外掛程式使用細則

標籤：

簡介

treeTable是跨瀏覽器、效能很高的jquery的樹表組件，它使用非常簡單，只需要引用jquery庫和一個js檔案，介面也很簡單。

優點

1. 相容主流瀏覽器: 支援IE6和IE6+, Firefox, chrome, Opera, Safari
2. 介面簡潔: 在普通表格的基礎上增加父子關係的自訂標籤就可以
3. 組件效能高: 內部實現了只綁定了table的事件、使用了css sprite合并圖片等
4. 提供兩種風格: 通過參數來設定風格

                      

介面配置參數

• theme: string {主題，有兩個選項：default、vsStyle. 預設:default}
• expandLevel: int {樹表的展開層次. 預設:1}
• column: int {可控制列的序號. 預設:0，即第一列}
• onSelect: function {擁有controller自訂屬性的元素的點擊事件，return false則中止展開. 預設值:

  function($treeTable, id) {       //$treeTable 當前樹表的jquery對象.       //id 當前行的id            //返回false，則直接退出，不會激發後面的beforeExpand和子節點的展開       return true; }

• beforeExpand: {展開子節點前觸發的事件, 預設值：

function($treeTable, id) {       //$treeTable 當前樹表的jquery對象.       //id 當前行的id }

屬性說明

• id: string 行的id
• pId: string 父行的id
• controller: bool 指定某一個元素是否可以控制行的展開
• hasChild: bool 指定某一個tr元素是否有孩子（動態載入需用到）
• isFirstOne: bool 指定某一個tr元素是否是第一個孩子（自動產生屬性，唯讀）
• isLastOne: bool 指定某一個tr元素是否是最後一個孩子（自動產生屬性，唯讀）
• prevId: string 前一個兄弟節點的id（自動產生屬性，唯讀）
• depth: string 當前行的深度（自動產生屬性，唯讀）

使用方式$("#元素id").treeTable({}) 如:

引用的檔案

<script src="/script/jquery.js" type="text/javascript"> </script> 
<script src="/script/treeTable/jquery.treeTable.js" type="text/javascript"> </script>

js代碼

<script type="text/javascript">        $(function(){            var option = {                theme:‘vsStyle‘,                expandLevel : 2,                beforeExpand : function($treeTable, id) {                    //判斷id是否已經有了孩子節點，如果有了就不再載入，這樣就可以起到緩衝的作用                    if ($(‘.‘ + id, $treeTable).length) { return; }                    //這裡的html可以是ajax請求                    var html = ‘<tr id="8" pId="6"><td>5.1</td><td>可以是ajax請求來的內容</td></tr>‘                             + ‘<tr id="9" pId="6"><td>5.2</td><td>動態內容</td></tr>‘;                    $treeTable.addChilds(html);                },                onSelect : function($treeTable, id) {                    window.console && console.log(‘onSelect:‘ + id);                                    }            };            $(‘#treeTable1‘).treeTable(option);        });    </script>

html結構

<table id="treeTable1" style="width: 100%">                <tr>                    <td style="width: 200px;">                        標題</td>                    <td>                        內容</td>                </tr>                <tr id="1">                    <td>                        <span controller="true">1</span></td>                    <td>                        內容</td>                </tr>                <tr id="2" pid="1">                    <td>                        <span controller="true">2</span></td>                    <td>                        內容</td>                </tr>                <tr id="3" pid="2">                    <td>                        3</td>                    <td>                        內容</td>                </tr>                <tr id="4" pid="2">                    <td>                        4</td>                    <td>                        內容</td>                </tr>                <tr id="5" pid="4">                    <td>                        4.1</td>                    <td>                        內容</td>                </tr>                <tr id="6" pid="1" haschild="true">                    <td>                        5</td>                    <td>                        注意這個節點是動態載入的</td>                </tr>                <tr id="7">                    <td>                        8</td>                    <td>                        內容</td>                </tr>            </table>

 

關於作者: benzhan(詹潮江)版本變更

1.0版本：建立準系統。(2011-05-04)

1.1版本：(2011-05-08)

這個版本提高了效能，做了以下改進：   

* 1、使用了Css Sprite Tools 合并了分散的表徵圖 
* 2、使用了.id的方式來代替原來[pId=id]，這樣選擇孩子效率更高 
* 3、把css剝離出來，增加動態添加css，每次家在前判斷是否添加過   
關於第二點，非常感謝onli同學的提醒。但我並沒有直接修改我的介面，直接除去pId，而是在第一次遍曆時將pId作為class名添加到節點中。這樣有兩個好處： （1）介面可讀性會比較好，pId比class更容易理解。 （2）第二點，如果直接使用class，那節點本來就有樣式，這樣擷取到的className還要去分解空格得到pId，挺麻煩的。

1.3版本：(2011-05-09)

這個版本擴充了事件，做了以下改進：   
* 1、增加onSelect事件，onSelect: function($treeTable, id){} 
* 2、增加beforeExpand事件，beforeExpand : function($treeTable, id){}   動態載入節點就靠beforeExpand 事件了。

1.4.2版本：(2011-09-03)

這個版本修複了bug，做了以下改進： 
* 1、修複了多個tableTree不在同個頁面的bug，並且可以讓不同的tableTree使用不同的主題。
* 2、增加了controller的自訂標籤來控制可點擊的地區。

jquery treeTable外掛程式使用細則