資訊專欄INFORMATION COLUMN
摘要：簡介是一個依靠實現(xiàn)的多功能樹插件。使用說明下載文件將需要使用的相關的文件分別放置到相應目錄，并且保證相對路徑正確。頁面分別在和中引入文件，如代碼所示。設置是否顯示節(jié)點的圖標。
簡介
zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。
網址：http://www.ztree.me/v3/main.p...
上面的網址里有ztree的詳細介紹、Demo 演示、API 文檔、入門指南 以及下載。
這里不再贅述。
使用說明1、下載ztree文件
將需要使用的 zTree v3.x 相關的 js、css、img 文件分別放置到相應目錄，并且保證相對路徑正確。
2、引入ztree文件
將下載的ztree文件保留需要用的相關的 js、css、img 文件整個復制到自己的項目相應的文件夾下，如下圖，我習慣將這類插件統(tǒng)一放在common/plugin/下，（其他不需要用的文件可以刪除。
3、html 頁面
分別在和中引入css、js文件，如代碼所示。
按照以下代碼，制作 html 頁面，注意：
zTree 的容器 className 別忘了設置為 "ztree"?。?！
示例代碼html代碼：
ztreeDemo
js代碼：
（這些代碼，我寫在了按習慣的相應頁面html同名的.js文件中，在
引入的ztree.all.min.js之下，將該文件引入頁面即可。）
$(function () {
init();
});
function init() {
builePlanTree();
}
//ZTREE
function builePlanTree() {
var setting = {
view: {
showIcon: true//設置 zTree 是否顯示節(jié)點的圖標。
},
data: {
simpleData: {
enable: true
}
},
callback: {
// beforeExpand: beforeExpand,
// onExpand: onExpand,
onClick: zTreeOnClick
}
}
var zNodes =[
{ id:1, pId:0, name:"課程目錄", open:true},
{ id:11, pId:1, name:"季度產品知識課程", open:true},
{ id:111, pId:11, name:"13Q4產品知識", },
{ id:112, pId:11, name:"14Q1產品知識", },
{ id:113, pId:11, name:"14Q2產品知識", },
{ id:114, pId:11, name:"14Q3產品知識", },
{ id:115, pId:11, name:"14Q4產品知識", },
{ id:12, pId:1, name:"項目宣講類課程", open:true},
{ id:121, pId:12, name:"項目宣講類課程1"},
{ id:122, pId:12, name:"項目宣講類課程2"},
{ id:123, pId:12, name:"項目宣講類課程3"},
{ id:13, pId:1, name:"移動商學院", open:true},
{ id:131, pId:13, name:"技能類"},
{ id:132, pId:13, name:"心態(tài)類"},
{ id:132, pId:13, name:"知識類"}
];
$.fn.zTree.init($("#planTree"), setting, zNodes);
function zTreeOnClick(event, treeId, treeNode) {
//這里定義點擊書中節(jié)點時，相應的頁面其他的操作，示例：
// 每次點擊節(jié)點后， 彈出該節(jié)點的 tId、name 的信息
alert(treeNode.tId + ", " + treeNode.name);
};
}
這樣頁面上的樹目錄就成了，效果如下圖所示：
總結
很明顯，這樣的樹只是一個靜態(tài)固定節(jié)點的樹，在大型項目中，往往需要不同的用戶看到不同的目錄，不同的地區(qū)顯示不同的目錄，等等，但你又不能一個一個定義這些配置來滿足那么多數(shù)據需求，所以就需要異步加載子節(jié)點的的父節(jié)點，通過構造treeNode的 JSON 數(shù)據對象方法來實現(xiàn)，這個方法會在本專欄 zTree -- jQuery 樹插件 構造treeNode JSON 數(shù)據對象 詳細介紹。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/78795.html
摘要：前言是一個依靠實現(xiàn)的多功能樹插件。不同的樹目錄根據不同的數(shù)據，在服務器端編寫好不同的，將其配置在這里即可。依賴獲取的數(shù)據類型，默認值。依賴用于對返回數(shù)據進行預處理的函數(shù)。詳細說明參見文檔代碼還是樹插件使用方法與例子中的那個，不在重復粘貼。 前言 zTree 是一個依靠 jQuery 實現(xiàn)的多功能 樹插件。 網址：http://www.ztree.me/v3/main.p... 上回說到...
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行 書籍 《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行 書籍 《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行 書籍 《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...
閱讀 1004·2021-11-15 18:06
閱讀 2371·2021-10-08 10:04
閱讀 2656·2019-08-28 18:03
閱讀 906·2019-08-26 13:42
閱讀 1924·2019-08-26 11:31
閱讀 2431·2019-08-23 17:13
閱讀 932·2019-08-23 16:45
閱讀 2059·2019-08-23 14:11
