zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。常常应用于PC端。
具体实现过程如下。
1.先下载ztree的js库(搜ztree即可)
2.引用下载的js库
例如:
3.写一个显示树的ul 引用ztree的样式 --> class=“ztree”
4.树加载配置
function loadOrgTree() {
isTreeLoaded = false;
//配置ztree的setting
var setting =
{
//若生产的组织树需要在前面加复选框/单选框 加上这个check属性配置
check:
{
enable: true, //true / false 分别表示 显示 / 不显示 复选框或单选框
autoCheckTrigger: true, //true / false 分别表示 触发 / 不触发 事件回调函数
chkStyle: “checkbox” , //勾选框类型(checkbox 或 radio)
chkboxType: mychkboxType //勾选 checkbox 对于父子节点的关联关系
},
data :
{
key :
{
name : “orgName”,
title : “orgName”
},
simpleData :
{
enable : true,
idKey : “orgId”,
pIdKey : “orgSupId”,
rootPId : -1
}
},
//异步从后端请求数据
async :
{
enable : true,//开启异步机制
url : "${ctx}/gxdxoa/addressbook/AddressBook/tree.ht",//请求数据的url
contentType : "application/x-www-form-urlencoded",//数据文件返回类型
dataType : "json",//数据返回类型:json字符串的方式
type : "post",//请求方式
autoParam : ["orgId"], //这个表示树节点异步加载的时候传到后台的节点id的key是多少,比如我写成orgid,那在后台就是request.getParameter("orgid")
otherParam : { //其他参数 ;直接用 JSON 格式制作键值对,例如:{ key1:value1, key2:value2 }
path : myPath,
orgId:$('#orgId').val()
//,systemId : "${systemId}"
//,demId : 1
},
dataFilter : orgTreeFilter //数据过滤
},
view : {
showLine : false
},
callback : { //回调函数; 根据需求选择合适的监听事件
onCheck : orgTreeClickHandler,
beforeAsync : function() {
return !isTreeLoaded;
},
onAsyncSuccess : function(event, treeId, parentNode, msg){ //异步加载正常结束的事件回调函数
isTreeLoaded = true;
if (parentNode == null){
orgTree.expandNode(orgTree.getNodes()[0], true, false ,false, true);
}
var targetNode = orgTree.getNodeByParam("orgId", parseInt(curOrgId), null);
if (targetNode) {
orgTree.selectNode(targetNode, false, false);
setTimeout(function() {
$('#' + targetNode.tId).focus();
}, 1000);
}
}
}
};
//树初始化
orgTree = $.fn.zTree.init($("#orgTree"), setting);
}
剩下一点东西我也还在摸索!