<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div id="content">
<ul id="testTree" class="ztree"></ul>
</div>
</body>
<script>
$(function() {
var setting = {
view: {
showIcon: false,
fontCss: setFontCss_ztree //进行样式设置的方法
},
data: {
simpleData: {
enable: true, //是否之用简单数据
idKey: 'id', //对应json数据中的ID
pIdKey: 'parentId' //对应json数据中的父ID
}
},
// async: {
// enable: true, //是否为异步加载
// type: "get",
// contentType: "application/json",
// url: './lx.json', //相关的请求网址
// otherParam: ["id", "name"]
// },
callback: { //请求成功后回调
onClick: onclickTree, //点击相关节点触发的事件
onAsyncSuccess: ztreeOnAsyncSuccess, //异步加载成功后执行的方法
},
};
//点击树触发的事件
function onclickTree(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var node = treeObj.getNodeByTId(treeNode.tId);
// console.log(node2,treeNode)
if (!node.children) {//判断是否有二级树
$.ajax({
url: './lx.json',
dataType: "json",
aysnc: true,
success: function(data) {
console.log(data.data)
newNode = treeObj.addNodes(node, data.data);
}
});
alert(treeNode.id + treeId + treeNode.name);
}
}
//获取树成功后进行的回调操作
function ztreeOnAsyncSuccess(event, treeId, treeNode) {
console.log(treeId, treeNode)
//展开树
expand_ztree(treeId)
}
/**
* 展开树
* @param treeId
*/
function expand_ztree(treeId) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
}
/**
* 设置树节点字体样式
*/
function setFontCss_ztree(treeId, treeNode) {
if (treeNode.id == 0) {
//根节点
return {
color: "#333",
"font-weight": "bold"
};
} else if (treeNode.isParent == false) {
//叶子节点
return {
color: "#660099",
"font-weight": "normal"
};
} else {
//父节点
return {
color: "#333",
"font-weight": "normal"
};
}
}
var data = [
{
"id": "123",
"isHidden": false,
"open": true,
"parentId": "",
"ext1": "",
"name": "1 xxx",
"uuid": "xxxxx",
"checked": false
}, {
"id": "456",
"isHidden": false,
"open": true,
"ext1": "",
"name": "2.1 xxxx",
"uuid": "xxxxx",
"checked": false
}, {
"id": "456",
"isHidden": false,
"open": true,
"ext1": "",
"name": "3.1 xxxx",
"uuid": "xxxxx",
"checked": false
}, {
"id": "456",
"isHidden": false,
"open": true,
"ext1": "",
"name": "4.1 xxxx",
"uuid": "xxxxx",
"checked": false
}, {
"id": "456",
"isHidden": false,
"open": true,
"ext1": "",
"name": "5.1 xxxx",
"uuid": "xxxxx",
"checked": false
}
]
$.fn.zTree.init($("#testTree"), setting, data); //对应ul要显示的ID,对应相关的setting,如果异步加载,最后一个参数为空,否则为响应的数据
})
</script>
</html>
以上是主体代码
lx.json文件代码如下
{
"data":[
{
"id": "4567",
"isHidden": false,
"open": true,
"ext1": "",
"name": "1.1 xxxx",
"uuid": "xxxxx",
"checked": false
},
{
"id": "4568",
"isHidden": false,
"open": true,
"ext1": "",
"name": "1.2 xxxx",
"uuid": "xxxxx",
"checked": false
},
{
"id": "4569",
"isHidden": false,
"open": true,
"ext1": "",
"name": "1.3 xxxx",
"uuid": "xxxxx",
"checked": false
},{
"id": "45610",
"isHidden": false,
"open": true,
"ext1": "",
"name": "1.4 xxxx",
"uuid": "xxxxx",
"checked": false
}
]
}
1.引入jq以及ztree的代码
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js"></script>
2.html的代码
<div id="content">
<ul id="testTree" class="ztree"></ul>
</div>
3.设置setting
var setting = {
view: {
showIcon: false,
fontCss: setFontCss_ztree //进行样式设置的方法
},
data: {
simpleData: {
enable: true, //是否之用简单数据
idKey: 'id', //对应json数据中的ID
pIdKey: 'parentId' //对应json数据中的父ID
}
},
// async: {
// enable: true, //是否为异步加载
// type: "get",
// contentType: "application/json",
// url: './lx.json', //相关的请求网址
// otherParam: ["id", "name"]
// },
callback: { //请求成功后回调
onClick: onclickTree, //点击相关节点触发的事件
onAsyncSuccess: ztreeOnAsyncSuccess, //异步加载成功后执行的方法
},
};