项目中需要多处以树状的形式体现组织结构。zTree是个很好的插件api文档完善。
代码对zTree做了初步封装,节省同事学习时间。
/****
树初始化:$.fn.initTree(treeContentId, initTreeUrl, AsyncUrl)
treeContentId: 用于展现 zTree 的 DOM 容器ID
initTreeUrl:初始化树url
AsyncUrl:异步加载树url
return:zTree
获取选中节点:$.fn.initTree.getSlectedNode()
return:treeNode
树节点点击事件回调函数function zTreeOnAsyncSuccess(event, treeId, treeNode)
treeNode: 被点击的节点 JSON 数据对象
return:null
树异步加载成功回调函数function zTreeOnAsyncSuccess(event, treeId, treeNode, msg)
treeNode: 进行异步加载的父节点 JSON 数据对象
msg:异步获取的节点数据,主要便于用户调试使用
return:null
****/
(function ($) {
var zTree;
$.fn.initTree = function (treeContentId, initTreeUrl, AsyncUrl) {
var setting = {
async : {
enable : true,
url : getUrl,
type : "post",
dataType : "json",
contentType : "application/x-www-form-urlencoded;charset=UTF-8",
autoParam : ["areaid"],
dataFilter : filter,
},
view : {
selectedMulti : false,
showIcon : false
},
check : {
enable : false,
chkStyle : "checkbox",
chkboxType : {
"Y" : "s",
"N" : "s"
}
},
data : {
key : {
name : "name"
},
simpleData : {
enable : true,
pIdKey : "pid",
idKey : "areaid"
}
},
edit : {
drag : {
isCopy : false,
isMove : false
},
enable : true,
editNameSelectAll : true,
showRemoveBtn : false,
showRenameBtn : false
},
callback : {
onClick : zTreeonClickEvent,
onAsyncSuccess : zTreeOnAsyncSuccessEvent
}
};
function getUrl(treeId, treeNode) {
if (treeNode == undefined) {
return initTreeUrl;
} else {
return AsyncUrl;
}
}
function filter(treeId, parentNode, childNodes) {
if (parentNode == undefined) {
if (childNodes.data.pid == undefined) { //无pid,加载企业树,只有一级
var data = childNodes.data;
var treedata = [{
"id" : "-1",
"pId" : "-2",
"name" : "全部",
open : true
}
];
data = $.makeArray(data);
$.each(data, function (index, item) {
item.pId = -1;
item.isParent = false;
treedata.push(item);
});
} else { //有pid,加载区域树,有多级
var treedata = childNodes.data;
treedata = $.makeArray(treedata);
$.each(treedata, function (index, item) {
item.open = true;
item.isParent = true;
});
}
} else {
var treedata = childNodes.data.rows;
treedata = $.makeArray(treedata);
$.each(treedata, function (index, item) {
item.isParent = true;
});
}
return treedata;
}
$.fn.zTree.init($("#" + treeContentId), setting);
zTree = $.fn.zTree.getZTreeObj(treeContentId);
return zTree;
};
function zTreeonClickEvent(e, treeId, treeNode) {
try {
zTreeonClick(e, treeId, treeNode);
} catch (e) {
return;
}
return;
}
function zTreeOnAsyncSuccessEvent(event, treeId, treeNode, msg) {
try {
zTreeOnAsyncSuccess(event, treeId, treeNode, msg);
} catch (e) {
return;
}
return;
}
/*获取一个选中区域数据*/
$.fn.initTree.getSlectedNode = function () {
var nodes = zTree.getSelectedNodes();
var treeNode = nodes[0]; //点击文本选中,优先级低
if (nodes.length > 1) {
layer.alert("请选择一个区域");
return false;
}
if (nodes.length == 0) {
layer.alert("请选择区域");
return false;
}
if (nodes.length == 1) {
return treeNode;
}
}
})(jQuery);