如何将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 文档

转载于:https://www.cnblogs.com/madlife/p/7187068.html

如何将zTree选中节点传递给后台相关推荐

Ztree选中节点获取
var zTreeOjb = $.fn.zTree.getZTreeObj("zTreeId"); //ztree的Id zTreeId获取复选框/单选框选中的节点: var ch ...
ztree 默认选中节点_用户管理、角色管理、模块管理、zTree的使用
全部都是增删改查修改mapper,service,controller,jsp 给角色分配权限 1.1 跳转分配权限页面 1.1.1 jsp //实现权限 function toModule() { ...
ztree 获取当前选中节点的子节点集合
功能:获取当前选中节点的子节点id集合. 步骤:1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值 ...
zTree实现节点修改的实时刷新
一.应用场景在实际应用中会遇到动态操作树各节点的需求,在增加树节点后如何实时动态刷新树就十分有必要了. 二.项目实践比如要在test1234节点下新建子节点,首先要选中test1234节点,添加成 ...
ztree指定节点设置复选框
ztree指定节点设置复选框首先,需引入ztree的js文件 <script src="../../assets/ztree/js/jquery.ztree.core-3.5.mi ...
动态加载子节点_微信小游戏开发之场景切换和常驻节点传递数据
主题场景切换场景间数据传递方式小游戏全局背景音效特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的 ...
TreeView查获节点并选中节点
TreeView查获节点并选中节点如果有多个节点则会继续查找下一个节点支持关键字搜索 private void SearchNodes(string SearchText, TreeNode Sta ...
ajax 入参为list_ajax传递给后台数组参数方式
出自:http://blog.csdn.net/lingxyd_0/article/details/10428785 在项目上用到了批量删除与批量更改状态,前台使用了EasyUI的DataGrid,用 ...
表单提交时有的字段可以传递到后台有的不可以
场景:提交表单时,发现表单中的部分字段不能在后台获取到. 解决方案:经检查发现,表单中不能传递到后台的字段只有id属性,没有name属性.字段必须同时具有Id属性和name属性,才能被提交到后台. 表 ...

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

获取zTree选中节点

后台解析json字符串,使用Newtonsoft

如何将zTree选中节点传递给后台相关推荐

最新文章

热门文章