【ztree系列——圖標的修改】Bootstrap風格的ztree

前段時間項目中需要用樹形結構，在選取的時候參考了很多插件，經過很多嘗試，最后又回歸到了ztree上。以前用的界面框架是EasyUI，但是它的樹結構在實現起來有點復雜，並且功能不是特別完善。dtree在做demo的時候沒什么問題，但是放到項目中，從數據庫讀取數據后還需要進行轉換……碼了n個demo后，還是覺得ztree最好用！

1.ztree圖標

ztree功能強大，使用方便是一方面，但是若使用它自帶的圖標，在有些網頁設計中就不太搭調了，或者還會出現樣式沖突，使得圖標顯示凌亂的問題（在使用Bootstrap框架的時候，根節點的圖標會變形）。如果我們能自定義它的圖標，根據網頁風格來設定樣式，這樣就會讓我們的頁面看起來更加美觀了。我們先看一張，使用ztree原生態圖標的樹形結構。



在這棵樹中，一共有3種圖標，分別是“打開節點、關閉節點、葉子節點”三種類型的，它們都在ztree的css樣式中進行了定義。

2.分析ztree圖標的定義

從官網上可下載ztree文件 http://www.ztree.me/v3/main.php

它的樣式定義在metro.css文件里（或者是zTreeStyle.css……），其中可加載單個的圖片，也可以從一張圖片中根據坐標獲取我們要用的圖形。對metro.css比較重要的一個圖片是metro.png，在圖片中每個小方格是5px，在css中加載時按照橫縱坐標進行圖標的獲取。 


在ztree中，css主要用了兩種方式來加載圖標。第一種：根據背景圖，圖標大小，和坐標位置



第二種：直接加載圖片



這兩種方式，第二種比較常用，但是對於數據量大的情況，第一種方法貌似更好。對於我們想要修改的元素，可以先在網頁中定位一下，找到它具體的class，然后來這里更改就可以了。

3.Bootstrap風格裝飾ztree

以最近很流行的Bootstrap為例，給ztree裝飾成Bootstrap的風格。上邊我們已經分析過ztree是如何設定樣式，這里我們只需要任選其一做更改就行了，鑒於它使用了大量以背景圖片為基礎的圖標設定，我們最好還是設定成直接加載圖片的比較方便，要不然改的數據太多了……
1）ztree也有黑白色的css、png成套的樣式設置，為了更符合Bootstrap的圖標樣式，讓它替換掉原有的css文件和彩色圖標



如果頁面框架是Bootstrap的，則在顯示的時候根節點的圖標是“破碎”的，經過查找發現，是根節點圖標位置受到Bootstrap的影響，在css文件中找到設置它的位置，進行坐標更改



2）上邊的步驟只能算是在ztree內部設定，還不算加上Boostrap的風格。不過，我們只需要再給它更換一個圖標，看起來就有那么點味道了（為了展示方便，進行了換行處理）

/*.ztree li span.button.ico_docu{margin-right:2px; background-position: -147px -42px; vertical-align:top; *vertical-align:middle}*/

/*加載bootstrap的圖標，使用它的葉子圖標-2015-12-23*/
.ztree li span.button.ico_docu{
    margin-right:2px;
    background:url(./img/bootstrap.png) no-repeat scroll 0 0 transparent;
    vertical-align:top;
    background-position: -45px -117px; 
    vertical-align:top;
    *vertical-align:middle
}

這樣就是另一種風格了，如果你想要自定義其它風格，根據上邊的demo來做，應該不算什么難事了。

小結：

ztree中有自定義圖標的方法，但是在遇到圖標顯示不完整的時候還是沒辦法解決，最后更改了css文件才讓圖標顯示完整。在解決這個問題的過程中了解了ztree圖標的加載過程，所有順便練練手，直接從CSS來給ztree換了個風格。