treeTable v 1.4.2

簡介

treeTable是跨瀏覽器、性能很高的jquery的樹表組件，它使用非常簡單，只需要引用jquery庫和一個js文件，接口也很簡單。

優點

兼容主流瀏覽器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
接口簡潔: 在普通表格的基礎上增加父子關系的自定義標簽就可以
組件性能高: 內部實現了只綁定了table的事件、使用了css sprite合並圖片等
提供兩種風格: 通過參數來設置風格

效果圖

接口

配置參數

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

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的自定義標簽來控制可點擊的區域。

點擊這里下載引自：星火幽藍

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery插件treeTable 原創jquery插件treeTable（轉）在layui中使用treetable.js插件 treetable 用法小例 JQuery/JS插件日期插件編寫自己的jquery插件 jQuery插件之validate noty – jQuery通知插件 jquery----icheck插件 jQuery Migrate 插件用法