資訊專欄INFORMATION COLUMN
摘要：前言是一個依靠實現(xiàn)的多功能樹插件。不同的樹目錄根據(jù)不同的數(shù)據(jù)，在服務(wù)器端編寫好不同的，將其配置在這里即可。依賴獲取的數(shù)據(jù)類型，默認(rèn)值。依賴用于對返回數(shù)據(jù)進行預(yù)處理的函數(shù)。詳細(xì)說明參見文檔代碼還是樹插件使用方法與例子中的那個，不在重復(fù)粘貼。
前言
zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。
網(wǎng)址：http://www.ztree.me/v3/main.p...
上回說到，在大型項目中，往往需要不同的用戶看到不同的目錄，不同的地區(qū)顯示不同的目錄等等，面對這些龐大的數(shù)據(jù)，需要生成不同結(jié)構(gòu)的樹目錄，你不能一個一個定義這些配置來滿足那么多數(shù)據(jù)需求，這就需要異步加載子節(jié)點的的父節(jié)點，通過構(gòu)造treeNode的 JSON 數(shù)據(jù)對象方法來實現(xiàn)，如果你不嫌我啰嗦，接下來會給大家講述這個方法。
setting配置按照如下配置來構(gòu)造ztree:
//樹初始化
var myTreeSetting = {
view: {
showLine: true,
selectedMulti: false,
dblClickExpand: false
},
async: {
enable: true,
type: "get",
dataType:"json",
url:"/server/basic/major/info/findmajortree.json",
autoParam:["id=pId"],
dataFilter: filter
},
data: {
simpleData: {
enable: true,
idKey:"id",
pIdKey:"pId",
rootPId:0
}
}
};
解釋：
setting.async.url [ 依賴 jquery.ztree.core ]
Ajax 獲取數(shù)據(jù)的 URL 地址，默認(rèn)值："".設(shè)置固定的異步加載 url請注意地址的路徑，確保頁面能正常加載。
url 內(nèi)也可以帶參數(shù)，這些參數(shù)就只能是通過 get方式提交了，并且請注意進行data格式。不同的樹目錄根據(jù)不 同的數(shù)據(jù)，在服務(wù)器端編寫好不同的url，將其配置在這里即可。
setting.async.dataType[ 依賴 jquery.ztree.core]
Ajax 獲取的數(shù)據(jù)類型，默認(rèn)值："text"。這里我使用了json。
setting.async.dataFilter[ 依賴 jquery.ztree.core ]
用于對 Ajax 返回數(shù)據(jù)進行預(yù)處理的函數(shù)。之后代碼中會給出filter的定義。
詳細(xì)說明參見：zTree API 文檔 http://www.ztree.me/v3/api.php
代碼html：
還是zTree -- jQuery 樹插件 使用方法與例子中的那個html，不在重復(fù)粘貼, 。
js:
var treeNodes;
$(document).ready(function() {
initTree($("#planTree"));
});
//樹初始化
var myTreeSetting = {
view: {
showLine: true,
selectedMulti: false,
dblClickExpand: false
},
async: {
enable: true,
type: "get",
dataType:"json",
url:"/server/basic/major/info/findmajortree.json",
autoParam:["id=pId"],
dataFilter: filter
},
data: {
simpleData: {
enable: true,
idKey:"id",
pIdKey:"pId",
rootPId:0
}
}
};
//初始化樹，包括回調(diào)函數(shù)
function initTree(anchor){
//初始化節(jié)點
treeNodes = $.fn.zTree.init(anchor, classTreeSetting);
}
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i
如此，就可以實現(xiàn)了。
任它數(shù)據(jù)再多，樹結(jié)構(gòu)再復(fù)雜，這一個js就足以配置許多想要的書目錄了。
效果如下：
后記
在頁面上放這樣一個樹目錄當(dāng)然不是為了放在那里觀看的，例如，你想要點擊樹中的某個節(jié)點，頁面上的列表數(shù)據(jù)刷新為對應(yīng)的數(shù)據(jù)，等功能，都可以通過以下方法來完成。
在myTreeSetting中配置 callback，定義點擊事件。
callback: {
beforeClick: getCurrentNode,
onClick : zTreeOnClick
}
在js中定義這些函數(shù):
function getCurrentNode(treeId, treeNode) {
curNode = treeNode;
zTreeOnClick(curNode);
}
function zTreeOnClick(treeNode){
//此處編寫需要完成的業(yè)務(wù)邏輯代碼
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/86289.html
摘要：簡介是一個依靠實現(xiàn)的多功能樹插件。使用說明下載文件將需要使用的相關(guān)的文件分別放置到相應(yīng)目錄，并且保證相對路徑正確。頁面分別在和中引入文件，如代碼所示。設(shè)置是否顯示節(jié)點的圖標(biāo)。 簡介 zTree 是一個依靠 jQuery 實現(xiàn)的多功能 樹插件。 網(wǎng)址：http://www.ztree.me/v3/main.p... 上面的網(wǎng)址里有ztree的詳細(xì)介紹、Demo 演示、API 文檔、入門指...
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...
摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進行 書籍 《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...
閱讀 2411·2019-08-30 15:44
閱讀 1354·2019-08-30 13:01
閱讀 3390·2019-08-30 11:22
閱讀 3167·2019-08-29 15:23
閱讀 1682·2019-08-29 12:22
閱讀 3448·2019-08-26 13:58
閱讀 3511·2019-08-26 12:17
閱讀 3559·2019-08-26 12:16
