zTree：JQuery樹形外掛使用示例
阿新 • • 發佈：2019-02-09
最近在做一個Web平臺，其中想用一個樹形展示。上網搜了搜基於JQuery的樹形外掛還真不少，最後選定zTree。關於zTree這裡只是簡單給出一個使用的示例。
首先宣告zTree的配置資訊，然後宣告zTree的節點資訊，最後初始化zTree。
下面給出一個示例：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>zTree Deom</title> <link rel="stylesheet" type="text/css" href="css/zTreeStyle.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.ztree.all-3.5.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //配置zTree var setting = { view: { showLine: false, expandSpeed: "slow" } }; //zTree節點資料 var treeNodes = [ { name: "手機", children: [ { name: "諾基亞", children: [ {name: "Lumia"}, {name: "NokiaX"}, {name: "Asha"}, ] }, {name: "三星"}, {name: "索愛"}, {name: "華為"} ] }, { name: "電腦", children: [ {name: "聯想"}, {name: "惠普"}, {name: "華碩"}, {name: "巨集碁"} ] } ]; //初始化zTree var tree = $("#tree"); tree = $.fn.zTree.init(tree, setting, treeNodes); }); </script> </head> <body> <div style="margin: 0 auto"> <ul id="tree" class="ztree"></ul> </div> </body> </html>
結果如圖：
其中對zTree圖示的改變可在節點資訊（上面示例中的treeNodes中通過屬性進行改變）中改變，但是這樣改變的是某個節點的圖示。通過修改CSS樣式表可以達到統一修改圖示的目的。
開啟zTreeStyle.css（zTree預設的的樣式檔案）進行自定義圖示的修改。其中CSS涉及到的原圖使用了CSS Sprites技術，我們只需要修改我們想要改變的樣式，其它的可以不用去管。