使用 ztree外掛，製作樹形選單

zTree 是一個依靠 jQuery實現的多功能 “樹外掛”。優異的效能、靈活的配置、多種功能的組合是zTree 最大優點。

下載 ztree 3.5.02版本

api 文件

css 樣式

demo 案例

js 核心類庫檔案

all.js = core + check + edit + hide  開發中只需要引入all.js

在頁面引入 ztree

<!--引入ztree  -->

<scripttype="text/javascript"src="${pageContext.request.contextPath }

<linkrel="stylesheet"type="text/css"

href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"/>

案例一：標準資料tree

1、 在顯示樹位置寫<ul> 標籤

<!--顯示樹 -->

<ulid="basicTree"class="ztree"></ul>

2、 通過js編寫setting物件

//設定樹引數

var setting = {};

3、 設定樹節點資料

//資料

varzNodes = [

{"name":"選單一"},//每個{} 就是一個節點

{"name":"選單二"}

];

4、初始化樹

//初始化樹

$.fn.zTree.init($("#basicTree"), setting, zNodes);

複雜樹

問題：標準資料樹，不適用大資料的樹結構

案例二：簡單資料ztree

1、 在顯示ztree位置定義ul

<!--顯示樹(簡單資料) -->

<ulid="simpleTree"class="ztree"></ul>

2、 設定ztree引數setting

//設定樹引數

varsetting = {

data : {

simpleData : {

enable : true

}

}

};

3、 樹節點資料

//資料

varzNodes = [

// id 代表本節點編號，pId代表父節點編號

{"id":"1","pId":"0","name":"選單一"},

{"id":"2","pId":"0","name":"選單二"}

];

4、 初始化樹

//初始化樹

$.fn.zTree.init($("#simpleTree"), setting, zNodes);

複雜樹

通過url屬性，完成樹節點跳轉

通過icon屬性，定製節點圖示