获取ztree树的选中子菜单信息并且提交给后端
- 2019 年 10 月 8 日
- 筆記
前面写过，ztree实现一棵树的文章，https://www.jianshu.com/p/c2b919e91e91 现在要用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
