前面写过,ztree实现一棵树的文章,https://cloud.tencent.com/developer/article/1449182
现在要用ajax+json模拟交互效果
需求:1:请求json数据,渲染在界面,形成一棵树
2:获取选中的子菜单,并且将选中的信息传递给后端
图片.png
代码:(css比较简陋,需要的可自行编写)
<!DOCTYPE html>
<html>
<head>
<title>ztree</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ztree_v3/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" type="text/css" href="ztree_v3/ztree_custom.css" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="ztree_v3/js/jquery.ztree.core-3.5.min.js"></script>
<script src="ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script>
<script src="ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script>
</head>
<body>
<ul id="zTree" class="ztree">
</ul>
<button type="submit" id="addBtn">提交</button>
</body>
<script type="text/javascript">
//树形菜单
var zTreeObj; //定义ztree对象
initTree(); //初始化ztree
var setting = {
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: {
"Y": "s",
"N": "s"
}
},
view: {
selectedMulti: true,
showLine: false
},
data: {
key: {
name: "name"
},
simpleData: {
enable: true,
pIdKey: "pId",
}
},
};
//请求数据
function initTree() {
$.get("data.json", function(data) {
console.log(JSON.stringify(data));
zTreeObj = $.fn.zTree.init($("#zTree"), setting, data);
zTreeObj.expandAll(true);
});
}
//添加保存
$("#addBtn").on("click", function() {
var params = {
personIds: checkNode(),
}
alert(JSON.stringify(params))
$.ajax({
url: basePath + "/patrol",
contentType: 'application/json',
data: JSON.stringify(params),
type: "POST",
success: function(data) {
}
});
})
//获取选中的人员
function checkNode() {
nodes = zTreeObj.getCheckedNodes(true);
var permTokens = new Array(); //创建list集合
var j = 0;
for(var i = 0; i < nodes.length; i++) {
if(nodes[i].token == "organ")
continue;
permTokens[j] = nodes[i].token;
j++;
}
return permTokens;
}
</script>
</html>
json数据:
[
{
"id": null,
"pId": 1,
"name": "典韦212",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "D91D0DE952DE",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "马可波罗",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "EAFA6CCF3CDD",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "lkjTest",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "D69C2A3ACB30",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "DDDDD",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "DDDDDD",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "DDDDDF",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "EEEEEEE",
"type": 1
}, {
"id": 1,
"pId": 0,
"name": "王小婷",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 134,
"pId": 1,
"name": "技术部",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 137,
"pId": 1,
"name": "wer",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 138,
"pId": 1,
"name": "wer",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 139,
"pId": 1,
"name": "wer",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}
]
原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1