获取zTree选中节点

 <body>

     <script type="text/javascript">

         var setting = {

             view: {

                 dblClickExpand: false,

                 showLine: true,

             },

             check: {

                 enable: true,       //必选项

                 chkboxType: { "Y": "p", "N": "s" }, //Y被勾选,N没有勾选情况,p操作影响父节点,s影响子节点

             },

             data: {

                 simpleData: {

                     enable: true,

                     idKey: "id",

                     pIdKey: "pId",

                     rootPId:

                 }

             },

             callback: {

                 onCheck: onCheckNode    //回调函数,获取选节点

             }

         };

         var zNodes = [

         { id: , pId: , name: "[excheck] 复/单选框功能 演示", open: true },

         { id: , pId: , name: "Checkbox 勾选操作", file: "excheck/checkbox" },

         { id: , pId: , name: "Checkbox nocheck 演示", file: "excheck/checkbox_nocheck" },

         { id: , pId: , name: "Checkbox chkDisabled 演示", file: "excheck/checkbox_chkDisabled" },

         { id: , pId: , name: "Checkbox halfCheck 演示", file: "excheck/checkbox_halfCheck" },

         { id: , pId: , name: "Checkbox 勾选统计", file: "excheck/checkbox_count" },

         { id: , pId: , name: "用 zTree 方法 勾选 Checkbox", file: "excheck/checkbox_fun" },

         { id: , pId: , name: "Radio 勾选操作", file: "excheck/radio" },

         { id: , pId: , name: "Radio nocheck 演示", file: "excheck/radio_nocheck" },

         { id: , pId: , name: "Radio chkDisabled 演示", file: "excheck/radio_chkDisabled" },

         { id: , pId: , name: "Radio halfCheck 演示", file: "excheck/radio_halfCheck" },

         { id: , pId: , name: "用 zTree 方法 勾选 Radio", file: "excheck/radio_fun" }

         ];

         $(document).ready(function () {

             var treenode = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

             $('#didClick').click(function () {

                 $.ajax({

                     url: '/handler/ajax.ashx',

                     type: 'POST',

                     async: true,

                     data: {

                         PostMethod:"checkedBox",

                         nodesJson: chkNodeStr

                     },

                     dataType: 'json',

                     success: function (data) {

                         console.log(data)

                     },

                     error: function (xhr, textStatus) {

                         console.log(xhr)

                         console.log(textStatus)

                     },

                 });

             });

         });

         var chkNodeArr;

         var chkNodeStr="";

         var nodeJson = [];

         function onCheckNode() {

             var treenode = $.fn.zTree.getZTreeObj("treeDemo");

             chkNodeArr = treenode.getCheckedNodes(true);    //true获取选中节点,false未选中节点,默认为true

             for (var i = ; i < chkNodeArr.length; i++) {

                 nodeJson[i] = { "name": chkNodeArr[i].name, "id": chkNodeArr[i].id };

             }

             //console.log(chkNodeArr);

             chkNodeStr = JSON.stringify(nodeJson);

         }

     </script>

      <div>

         <ul id="treeDemo" class="ztree"></ul>

          <button type="button" id="didClick">提交</button>

     </div>

 </body>

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

1,引用 using Newtonsoft.Json.Linq;

2,因为是数组所以用JArray解析,对象可以用JObject

 if (method == "checkedBox") {

     string jsonStr = context.Request["nodesJson"];

     JArray ja = JArray.Parse(jsonStr);

     Dictionary<string, string> dic = new Dictionary<string, string>();

     foreach (JToken str in ja) {

         dic.Add(str["name"].ToString(),str["id"].ToString());

     }

 }

附上 zTree 官网 api 和 Newtonsoft.json 文档

　　

如何将zTree选中节点传递给后台的更多相关文章

  1. 通过ajax 后台传递的 区域id 选中ztree的节点 并展开节点

    代码如下: < script type = "text/javascript" >    var flag = "<%=request.getParam ...

  2. zTree勾选状态的禁用节点不在选中节点里

    问题描述: 由于业务需求,需要将一部分节点设置为选中并且是禁用的状态.设置这部分节点的chkDisabled和checked属性值都为true.在zTree树上这部分节点是选中且禁用的状态,但是在保存 ...

  3. ztree设置节点checked，选中某节点等相关操作

    ztree设置节点checked,选中某节点等相关操作 1.根据id获取树的某个节点: var zTree = $.fn.zTree.getZTreeObj("mytree"); ...

  4. zTree设置选中节点之后出现重复节点

    1.用户离开页面时最后一次点击的节点信息我会保存到数据库. 2.用户打开页面时默认选中上一次离开时选中的节点. 现在发现在设置选中节点之后,会出现重复的节点(重复现象偶尔出现). 以下是代码: var ...

  5. ztree 获取当前选中节点的子节点集合

    功能:获取当前选中节点的子节点id集合. 步骤:1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值 ...

  6. ztree获取选中节点

    $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); functi ...

  7. ztree获取选中节点时不能进入可视区域出现BUG如何解决

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进 ...

  8. 160420、zTree获取所有选中节点数据

    <!DOCTYPE html><HTML><HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE> ...

  9. ztree 获取CheckBox选中节点时，不获取选中上级父节点

    //将第三个参数改为false,表示不去勾选父节点下的所有子节点 zTreeObj.checkNode(node, true, false); setting.check.chkboxType = { ...

随机推荐

  1. nmon监控指标

    一.NMON中的各项参数指标: SYS_SUMM:显示当前服务器的总体性能情况 Total System I/OStatistics: Avg tps during an interval:显示采集间 ...

  2. 【转】HeadFirst 组合模式+迭代器错误原因以及解决代码

    http://blog.csdn.net/sugar_girl/article/details/53400267     <HeadFirst JAVA设计模式>中用迭代器迭代组合模式是存 ...

  3. fscanf使用心得

    好久没碰C语言了.从现在开始,要开始刷题了. (1)int fscanf( FILE* stream, const char* format, ... ); https://www.programiz ...

  4. ORs-6-Olfactory Bulb Ratio, ORs Gene Repertoire, and Olfactory Ability

    Olfactory Bulb Ratio, ORs Gene Repertoire, and Olfactory Ability 1.Olfactory Bulb的生物学意义:a.生存 b.嗅觉能力 ...

  5. IntelliJ IDEA 的便捷操作性

    快捷键 说明 IntelliJ IDEA 的便捷操作性,快捷键的功劳占了一大半,对于各个快捷键组合请认真对待.IntelliJ IDEA 本身的设计思维是提倡键盘优先于鼠标的,所以各种快捷键组合层出不 ...

  6. 吴裕雄--天生自然 R语言开发学习：图形初阶

    # ----------------------------------------------------# # R in Action (2nd ed): Chapter 3 # # Gettin ...

  7. SpringMVC学习笔记九:拦截器及拦截器的简单实用

    SpringMVC中的interceptor拦截器是非常重要的,它的主要作用就是拦截指定的用户请求,并进行相应的预处理和后处理. 拦截时间点在"处理器映射器根据用户提交的请求映射出所要执行的 ...

  8. caffe之那些依赖的库

    1. Boost库 Boost是一个可移植的,提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一.Boost强调对跨平台的支持,编译与平台无关.Caffe采用C++为主要开发语言 ...

  9. GPU PassThrough in KVM

    实现步骤 环境 OS: # cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) # uname -a Linux hyhive 3 ...

  10. xshell 常用命令1

    date命令 date命令是显示或设置系统时间与日期. 很多shell脚本里面需要打印不同格式的时间或日期,以及要根据时间和日期执行操作.延时通常用于脚本执行过程中提供一段等待的时间.日期可以以多种格 ...