原创jquery插件treeTable（转）
由于工作需要，要直觀的看到某個業務是由那些子業務引起的異常，所以我需要用樹表的方式來展現各個層次的數據。
需求：
? ? ? ? ?1、數據層次分明；
?? ? ? ? 2、數據讀取慢、需要動態加載孩子節點；
?? ? ? ? 3、支持默認展開多少層。
? ? ?在網上找到了很多資料，發現treeTable方面的組件質量都不高，有些還不錯樣式不符合，性能也比較差。想想樹表也挺簡單的，不就是通過隱藏或者展現某些tr來實現嘛。于是乎，自己寫一個。
? ? ? 2011年5月4號恰好放假一個下午，于是在家里風風火火開始構造自己的樹表插件。
?? ? ?樣式我就用了http://www.hanpau.com/index.php?page=jqtreetable，包括圖片以及參數命名都借鑒了。但這款插件質量不怎樣，使用方式很麻煩，效率低。
一、使用接口
?? ??個人覺得，接口這部分是一款插件是否好用的核心。
? jqTreeTable的用法：
? html結構
? js調用
? 這個使用方式比較麻煩，后臺不僅要構造html，而且還要構造出map的數組。
?所以，我自己的組件改造了這種結構，如下：
?? html結構
? ?js調用
? ? 我這種方式只需要構造html，把父子關系當作自定義屬性放在html中，使用相對方便。(注意：我剛開始是使用 key="1" pKey="2"的方式來標識一行的數據，以及行之間的關系，但想到以后通過自定義屬性key來選擇行效率比較低，所以改為id來存儲行的唯一標識。)
二、html的格式
? ? 在jqTreeTable中：
? ? 扣紅的html對應的格式是：
?這里有兩個問題：
? 1、都用圖片在網速慢的情況時會產生很多圖片占用符...，不好看。
? 2、直接用圖片會產生很多小圖片，且不能合并。
以下是我優化的結構：
?這樣解決了上述問題：
1、在網速慢的情況時只不過看不到背景，可不會出現圖片占用符。
2、使用背景偏移的方式，可以把小圖片合并在同張圖片中。
三、原創treeTable的實現
基本邏輯
1、展開節點的圖標有分最后一個跟非最后一個，例如：展開節點時最后一個的展開和最后一個的展開。(需要isLastOne)
2、如果父節點是最后一個節點，則前綴加，如果父節點不是最后一個節點，則前綴加。(需要isLastOne、hasChild)
3、如果有孩子，則顯示+或-號，如果沒有則是普通的葉子節點。(需要hasChild)
4、有孩子的節點點擊則展開或者隱藏相應的子節點。(需要hasChild) 5、如果存在前一個兄弟節點，則使用節點的前綴圖標，若不存在則用父節點的圖標。(需要isFirstOne)實現過程
1、在html中，我只是把父子節點的關系寫在自定義屬性，但對于節點是否有孩 子(hasChild)，是否是最后一個節點(isLastOne)，是否是第一個節點(isFirstOne)，都還不知道。所以第一步要分析出這些信 息，把這些信息都記錄到自定義屬性。【注意：這些信息其實也可以記錄到DOM對象的自定義屬性中，但DOM對象的自定義屬性無法在生成html的時候初始 化，所以不采用。】
2、先掃描所有的tr，構造出兩個map，分別記錄{'pId' => ['id1', 'id2']}和{id => pId}的關系。
3、再次掃描所有的tr，根據兩個map的關系，給tr增加hasChild、isLastOne、isFirstOne等自定義標簽，并開始構造節點圖標。
4、給整個table增加點擊事件監控，如果是來自(hasChild)的父節點則進行點擊事件。【亮點：jqTreeTable是給每個圖標都綁定事件，而我是給整個table綁定一個點擊事件，提高性能。】
最后效果：
5月4號那天，花了下午完成基本功能，晚上一直自主加班到1點完善功能和優化性能，包括使用span替換img，使用table整體的點擊事件等。為自己的執著而加班，最后效果還比較滿意。還差將圖片合并成一張，再改改css，就ok了。
原創jquery插件treeTable v1.1
這個版本提高了性能，做了以下改進：
* 1、使用了Css Sprite Tools 合并了分散的圖標
* 2、使用了.id的方式來代替原來[pId=id]，這樣選擇孩子效率更高
* 3、把css剝離出來，增加動態添加css，每次家在前判斷是否添加過
關于第二點，非常感謝onli同學的提醒。但我并沒有直接修改我的接口，直接除去pId，而是在第一次遍歷時將pId作為class名添加到節點中。這樣有兩個好處：
(1)接口可讀性會比較好，pId比class更容易理解。
(2)第二點，如果直接使用class，那節點本來就有樣式，這樣獲取到的className還要去分解空格得到pId，挺麻煩的。
原創jquery插件treeTable V1.3
這個版本擴展了事件，做了以下改進：
* 1、增加onSelect事件，onSelect: function($treeTable, id){}
* 2、增加beforeExpand事件，beforeExpand?: function($treeTable, id){}
動態加載節點就靠beforeExpand 事件了。
原創jquery插件treeTable V1.4.2
這個版本修復了bug，做了以下改進：
* 1、修復了多個tableTree不在同個頁面的bug，并且可以讓不同的tableTree使用不同的主題。
* 2、增加了controller的自定義標簽來控制可點擊的區域。
轉：http://zhanchaojiang.iteye.com/blog/1036454- treeTable.rar?(35.1 KB)
- 描述: treeTable V1.0
- 下載次數: 210
- treeTable_V1.1.rar?(28.8 KB)
- 下載次數: 54
- treeTable_v1.3.rar?(29.5 KB)
- 下載次數: 87
- treeTable_v1.4.2.rar?(42.6 KB)
- 下載次數: 716
總結
以上是生活随笔為你收集整理的原创jquery插件treeTable（转）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL Server表分区
- 下一篇： 时间交易