如何将zTree选中节点传递给后台
Posted deluo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将zTree选中节点传递给后台相关的知识，希望对你有一定的参考价值。
获取zTree选中节点
1 <body> 2 3 <script type="text/javascript"> 4 var setting = { 5 view: { 6 dblClickExpand: false, 7 showLine: true, 8 }, 9 check: { 10 enable: true, //必选项 11 chkboxType: { "Y": "p", "N": "s" }, //Y被勾选,N没有勾选情况,p操作影响父节点,s影响子节点 12 }, 13 data: { 14 simpleData: { 15 enable: true, 16 idKey: "id", 17 pIdKey: "pId", 18 rootPId: 0 19 } 20 }, 21 callback: { 22 onCheck: onCheckNode //回调函数,获取选节点 23 } 24 25 }; 26 27 var zNodes = [ 28 { id: 2, pId: 0, name: "[excheck] 复/单选框功能 演示", open: true }, 29 { id: 201, pId: 2, name: "Checkbox 勾选操作", file: "excheck/checkbox" }, 30 { id: 206, pId: 2, name: "Checkbox nocheck 演示", file: "excheck/checkbox_nocheck" }, 31 { id: 207, pId: 2, name: "Checkbox chkDisabled 演示", file: "excheck/checkbox_chkDisabled" }, 32 { id: 208, pId: 2, name: "Checkbox halfCheck 演示", file: "excheck/checkbox_halfCheck" }, 33 { id: 202, pId: 2, name: "Checkbox 勾选统计", file: "excheck/checkbox_count" }, 34 { id: 203, pId: 2, name: "用 zTree 方法 勾选 Checkbox", file: "excheck/checkbox_fun" }, 35 { id: 204, pId: 2, name: "Radio 勾选操作", file: "excheck/radio" }, 36 { id: 209, pId: 2, name: "Radio nocheck 演示", file: "excheck/radio_nocheck" }, 37 { id: 210, pId: 2, name: "Radio chkDisabled 演示", file: "excheck/radio_chkDisabled" }, 38 { id: 211, pId: 2, name: "Radio halfCheck 演示", file: "excheck/radio_halfCheck" }, 39 { id: 205, pId: 2, name: "用 zTree 方法 勾选 Radio", file: "excheck/radio_fun" } 40 41 ]; 42 43 $(document).ready(function () { 44 var treenode = $.fn.zTree.init($("#treeDemo"), setting, zNodes); 45 46 $(‘#didClick‘).click(function () { 47 $.ajax({ 48 url: ‘/handler/ajax.ashx‘, 49 type: ‘POST‘, 50 async: true, 51 data: { 52 PostMethod:"checkedBox", 53 nodesJson: chkNodeStr 54 }, 55 dataType: ‘json‘, 56 success: function (data) { 57 console.log(data) 58 }, 59 error: function (xhr, textStatus) { 60 console.log(xhr) 61 console.log(textStatus) 62 }, 63 }); 64 }); 65 }); 66 var chkNodeArr; 67 var chkNodeStr=""; 68 var nodeJson = []; 69 function onCheckNode() { 70 var treenode = $.fn.zTree.getZTreeObj("treeDemo"); 71 chkNodeArr = treenode.getCheckedNodes(true); //true获取选中节点,false未选中节点,默认为true 72 for (var i = 0; i < chkNodeArr.length; i++) { 73 nodeJson[i] = { "name": chkNodeArr[i].name, "id": chkNodeArr[i].id }; 74 } 75 //console.log(chkNodeArr); 76 chkNodeStr = JSON.stringify(nodeJson); 77 } 78 79 </script> 80 81 <div> 82 <ul id="treeDemo" class="ztree"></ul> 83 84 <button type="button" id="didClick">提交</button> 85 </div> 86 87 </body>
后台解析json字符串,使用Newtonsoft
1,引用 using Newtonsoft.Json.Linq;
2,因为是数组所以用JArray解析,对象可以用JObject
1 if (method == "checkedBox") { 2 string jsonStr = context.Request["nodesJson"]; 3 4 JArray ja = JArray.Parse(jsonStr); 5 Dictionary<string, string> dic = new Dictionary<string, string>(); 6 7 foreach (JToken str in ja) { 8 dic.Add(str["name"].ToString(),str["id"].ToString()); 9 } 10 11 }
附上 zTree 官网 api 和 Newtonsoft.json 文档
以上是关于如何将zTree选中节点传递给后台的主要内容，如果未能解决你的问题，请参考以下文章