ps:小白可以一看，大神勿打~

用過(guò) ztree 的盆友們都知道，ztree 功能強(qiáng)大，就功能上來(lái)說(shuō)，追求著“無(wú)處不按鈕”的體驗(yàn)，但好用不好看?？赡苡信笥颜f(shuō)：“我這棵樹只有我自己看，夠用就行”

（我聽不見(jiàn)，你沒(méi)追求~）。對(duì)于這種更多時(shí)候是在背面展示的內(nèi)容，我們追求一個(gè)詞：簡(jiǎn)約，什么叫簡(jiǎn)約？簡(jiǎn)約就是：簡(jiǎn)單中透露著大氣，樸實(shí)中內(nèi)斂著奢華。呃~

對(duì)不起，扯遠(yuǎn)了，看最終效果圖：

對(duì)比一下原型ztree，想要女神女友，還需改版ztree~

正文

對(duì)于ztree，我們審查下代碼就能發(fā)現(xiàn)，它里面的圖標(biāo)是一整張圖片，以背景圖片配合background-position，來(lái)實(shí)現(xiàn)的。這樣做的好處從性能方面來(lái)說(shuō)儲(chǔ)存消耗小，加載快，從更新方面來(lái)說(shuō)

，新版本圖標(biāo)上傳圖片覆蓋就行了，當(dāng)然前提是你得有個(gè)ui或者懂ps和ai的前端，光ps肯定是不夠的，圖標(biāo)必須是矢量才能保證清晰度效果。

知道了 ztree 圖標(biāo)是背景圖片方式生成的，那么改版ztree我們就有了兩個(gè)思路：

第一種：做一張尺寸一樣的圖片（注意圖片里面圖標(biāo)大小也一致?）去覆蓋，這樣的方便之處在于我們只需要知道背景圖片在哪個(gè)文件夾

就能完成改版，不需要去看源碼（想想挺方便哈），而條件在上面提過(guò)了；

第二種：注意它是背景圖片，如果我們代碼中在某圖標(biāo)位置添加文字（當(dāng)然不能過(guò)多，不然會(huì)撐大）或尺寸合適的圖片并不會(huì)改變布局，而是覆蓋在背景圖片上，

這樣的話我們就可以在背景圖片所在的標(biāo)簽里面加上 fontawesome 中對(duì)應(yīng)的類名就可以實(shí)現(xiàn)效果了，至于那張背景圖，刪掉唄~

步驟

找個(gè) demo 看一下 ztree 中各個(gè)圖片對(duì)應(yīng)的標(biāo)簽（折疊，文件夾，復(fù)選框，點(diǎn)線）有什么特別之處，比如說(shuō)類名 id等，這里我們以 折疊圖標(biāo)為例，下面是源代碼：

我們可以看到現(xiàn)在折疊圖片是折疊狀態(tài)的：類名對(duì)應(yīng)roots_close。

展開源碼：

展開對(duì)應(yīng)的類名是：roots_open。

這樣看來(lái)我們可以想到：對(duì)應(yīng)于不同的狀態(tài)? -? 不同的類名? -? 不同的類名對(duì)應(yīng)不同的樣式即背景圖片位置不同? -? 不同的圖標(biāo)。

也就是說(shuō)我們只需要在不同的狀態(tài)的時(shí)候添加相應(yīng)的 fontawesome 圖標(biāo)調(diào)用類名就可以輕松完全圖標(biāo)修改了，到底是不是這樣呢？試試看。

打開 ztree中?jquery.ztree.all.js，查找:root_open :

查找結(jié)果顯示找不到，這傷害來(lái)得太突然，突然就有了一種“朕的大清要亡了的感覺(jué)”，冷靜，這個(gè)不行，查另一個(gè)看看，還有個(gè)switch，查找：

這下就有驚喜了，看圖我們可以知道 switch 被定義為了 SWITCH，這樣的話我們瞬間就可以想到會(huì)不會(huì)是 root_close 是由兩個(gè)

變量通過(guò) _ 組合起來(lái)的呢，試一下就知道了， 查找root ：

到了這里，暗松口氣外加會(huì)心一笑：有了。查找ROOT，這里我選擇了區(qū)分大小寫查找，因?yàn)槲覀円呀?jīng)知道了它是被定義為了大寫 ROOT 參數(shù)，后面只會(huì)以

ROOT 形式出現(xiàn)在需要它的位置，看代碼：