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