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