首页 > 代码库 > 如何将zTree选中节点传递给后台

如何将zTree选中节点传递给后台

2024-10-27 05:52:39   211人阅读

获取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选中节点传递给后台


联系
我们