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