這段時間在維護(hù)公司的項目销睁，去年做的項目里面有ztree樹的例子泳秀，想起之前還沒有開始寫博客标沪，一些知識點也無從找起，要新加一個右擊節(jié)點事件嗜傅，折騰了半天金句，其中也包含了一些知識點，稍稍做了一些demo吕嘀。
zTree 是利用 JQuery 的核心代碼违寞，實現(xiàn)一套能完成大部分常用功能的 Tree 插件
? 兼容 IE、FireFox偶房、Chrome 等瀏覽器
? 在一個頁面內(nèi)可同時生成多個 Tree 實例
? 支持 JSON 數(shù)據(jù)
? 支持一次性靜態(tài)生成 和 Ajax 異步加載 兩種方式
? 支持多種事件響應(yīng)及反饋
? 支持 Tree 的節(jié)點移動趁曼、編輯、刪除
? 支持任意更換皮膚 / 個性化圖標(biāo)（依靠css）
? 支持極其靈活的 checkbox 或 radio 選擇功能
? 簡單的參數(shù)配置實現(xiàn) 靈活多變的功能
在官網(wǎng)能夠下載到zTree的源碼棕洋、實例和API挡闰，其中作者pdf的API寫得非常詳細(xì)。
圖片.png
需求掰盘，點擊根節(jié)點的時候摄悯，alert出所點擊的事件里面的具體節(jié)點信息，在這個過程里愧捕，如果點擊到了父節(jié)點（嘉定監(jiān)獄）奢驯，則不顯示任何信息
1：在setting 配置里面，給callback設(shè)置次绘，單擊事件onClick : zTreeOnClick瘪阁；
圖片.png
2：寫一個函數(shù)zTreeOnClick
// 單擊事件
function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name);
}
3：父節(jié)點不需要點擊事件，父節(jié)點為1邮偎，如果節(jié)點為1 的時候管跺，不執(zhí)行下一步
if (treeNode.id == "1") {
return;
}
圖片.png
項目js部分完整代碼，僅供參考
var detain = function() {
AssetSavetype = null;
AssetSelecttype = null;
getFloorList();
initLoadMap('detainmap');
var beforeNodeID;
var basePath;
var url;
var setting = {
check : {
enable : true,
chkStyle : "radio",
radioType : "all"
},
view : {
selectedMulti : true,
showLine : false
},
data : {
key : {
name : "name"
},
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pId",
}
},
edit : {
enable : true,
removeTitle : "刪除節(jié)點",
showRemoveBtn : setRemoveBtn,
showRenameBtn : setRenameBtn
},
async : {
enable : true,
url : "/bison/design/detain/getTree",
autoParam : [ "id" ],
type : "get",
dataFilter : ajaxDataFilter,
dataType : "json"
},
callback : {
// 單擊事件
onClick : zTreeOnClick,
onCheck : zTreeOnCheck,
beforeRemove : zTreeBeforeRemove,
onRemove : zTreeOnRemove,
onRename : zTreeOnRename
}
};
var zTreeObj;
// 初始化根節(jié)點
function initTree() {
$.get(basePath + "/design/detain/initNode?type=1", function(data) {
// 設(shè)置父節(jié)點不顯示checkbox
data.returnData.node.nocheck = true;
zTreeObj = $.fn.zTree.init($("#zTree"), setting,
data.returnData.node);
});
}
// 單擊事件禾进，向后臺發(fā)起請求
function zTreeOnClick(event, treeId, treeNode) {
if (treeNode.id == "1") {
return;
}
alert(treeNode.tId + ", " + treeNode.name);
}
function setRemoveBtn(treeId, treeNode) {
if(treeNode.id == 1){
return false;
}
return true;
}
function setRenameBtn(treeId, treeNode) {
if(treeNode.id == 1){
return false;
}
return true;
}
function zTreeBeforeRemove(treeId, treeNode) {
if (confirm("是否確認(rèn)刪除"))
return true;
return false;
}
function zTreeOnRemove(event, treeId, treeNode) {
$.ajax({
url : basePath + "/design/detain/deleteNode",
data : {
id : treeNode.id,
},
type : "get",
success : function(data) {
}
});
deleteDetain(treeNode.id);
}
function zTreeOnRename(event, treeId, treeNode) {
$.ajax({
url : basePath + "/design/detain/updateName",
data : {
id : treeNode.id,
name : treeNode.name
},
type : "POST",
success : function(data) {
}
});
}
// 異步加載數(shù)據(jù)過濾器
function ajaxDataFilter(treeId, parentNode, responseData) {
var data = responseData.returnData.treeList;
return data;
}
;
// 節(jié)點勾選事件
function zTreeOnCheck(event, treeId, treeNode) {
// 顯示圍欄
if (beforeNodeID != treeNode.id) {
electronicLayerOff = true;
beforeNodeID = treeNode.id;
}
showDetain([ treeNode.id ]);
}
;
// 獲取項目路徑
function getContextPath() {
var currentPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = currentPath.indexOf(pathName);
var localhostPath = currentPath.substring(0, pos);
var projectName = pathName.substring(0,
pathName.substr(1).indexOf('/') + 1);
return (localhostPath + projectName);
}
// 顯示配置記錄
function showDetain(DetainNum) {
electronicLayer.getSource().clear();
if (electronicLayerOff) {
for (var num = 0; num < DetainNum.length; num++) {
var electronicParam = {
service : 'WFS',
version : '1.1.0',
request : 'GetFeature',
typeName : DBs + ':detain',
outputFormat : 'application/json',
cql_filter : "bid='" + DetainNum[num] + "'"
};
$.ajax({
url : wfsUrl,
data : $.param(electronicParam),
type : 'GET',
dataType : 'json',
success : function(response) {
var features = new ol.format.GeoJSON()
.readFeatures(response);
electronicLayer.getSource().addFeatures(features);
}
});
}
electronicLayerOff = false;
} else {
electronicLayerOff = true;
}
}
// 資產(chǎn)FID獲取
var FIDObject = function(Filter, Typename) {
var Fid = [];
$.ajax({
url : wfsUrl,
data : {
service : 'WFS',
version : '1.1.0',
request : 'GetFeature',
typename : Typename,
outputFormat : 'application/json',
cql_filter : Filter
},
type : 'GET',
dataType : 'json',
async : false,
success : function(response) {
if (response.features.length == 1) {
Fid[0] = response.features[0].id;
} else if (response.features.length > 1) {
for (var i = 0; i < response.features.length; i++) {
Fid[i] = response.features[i].id;
}
} else {
}
}
});
return Fid;
};
// 刪除配置記錄
function deleteDetain(id) {
var Filter = "bid=" + "'" + id + "'";
var Typename = DBs + ':detain';
var newFeature = new ol.Feature();
newFeature.setId(FIDObject(Filter, Typename)[0]);
var tableType = 'detain';
updateNewFeature([ newFeature ], tableType, 'remove');
if (beforeNodeID == id) {
electronicLayer.getSource().clear();
}
}
// 添加配置
$("#adddetain").on("click", function() {
layer.open({
type : 2,
title : '添加配置',
area : [ '550px', '550px' ],
// fix : false, ?
content : [ './adddetain.jsp', ],
end : function() {
initTree();
electronicLayer.getSource().clear();
}
});
});
return {
init : function() {
basePath = getContextPath();
initTree();
}
};
}();
原文作者：祈澈姑娘
原文鏈接：http://www.reibang.com/u/05f416aefbe1創(chuàng)作不易豁跑，轉(zhuǎn)載請告知
90后前端妹子，愛編程命迈，愛運營贩绕，愛折騰火的。堅持總結(jié)工作中遇到的技術(shù)問題壶愤，堅持記錄工作中所所思所見，歡迎大家一起探討交流馏鹤。
