最近在项目中遇到一个问题,需求如下:

根据选中不同的人员(ID)向后台发送ajax请求,通过返回的数据来生成该人员的权限访问树,该树目录最少为3级目录,在生成的时候会自动勾选上次保存过的选中状态,点击保存后会将选中状态发送给后端用于保存。(zTree的api参考网站http://www.ztree.me/v3/api.php

遇到的bug:

用户必须再次点击已选中的根目录,并重新选中一次才能在保存的时候将其根目录及所有选中的子节点ID号提供给后端,如果用户不做任何操作直接点击保存,则只能获取到根目录的ID号,无法获取其下所有子目录和节点的ID号。

原因分析:

由于树的生成采用的是异步加载方式,即一开始只生成所有的根目录,用户必须点击某一条根目录展开才会生成其下的子目录或子节点。这样可以减少初步加载时的响应时间,但是如果用户不去点击展开,那么系统默认的是没有子节点的,因此在点击保存时只能获得选中的根目录ID号。

解决方式:

在zTree的setting设置中将生成树时的回调函数里添加zTree.expandAll(false)(展开或折叠所有的节点树)。这样插件就会遍历生成所有的节点,并根据保存的选中ID来将对于的节点勾选。

callback : {//控制插件中所有的回调函数触发
onClick : zTreeOnClick,//点击时的回调函数
onNodeCreated: zTreeOnNodeCreated,//这是节点生成时的回调函数
onAsyncSuccess:showTree//异步加载成功完成后的回调函数 }
//其方法为根据data返回的选中ID来将对应的节点勾选
function zTreeOnNodeCreated(event, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
$.post("renyxx/getQuanx",{id:$("#renyxxb_id").val()},function(data){
for(var i = ;i < data[].length;i++){
if(data[][i]==treeNode.id){
treeNode.checked = true;
//zTree.expandAll(false);
zTree.updateNode(treeNode);
}
}
},"json");
zTree.expandAll(false);//加入这行代码后,其就会在生成每一个根目录时自动遍历其下的所有子目录或节点
}

大家可以在回调函数中加入console来看一下插件生成时的运行顺序,并不是一次生成所有的根目录,而是一个个的生成。

另外,这样生成的树只有最开始的一个根目录,很难看,一般都会要求至少展开一级,因此可以在回调函数中添加onAsyncSuccess,在异步加载完成时会执行如下方法

function showTree(event, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
var tree=zTree.getNodeByTId("tree_1");
zTree.expandNode(tree,true);//展开指定的根目录
}

zTree异步生成数据时无法获取到子节点的选中状态的更多相关文章

  1. 五种情况下会刷新控件状态(刷新所有子FWinControls的显示)——从DFM读取数据时、新增加子控件时、重新创建当前控件的句柄时、设置父控件时、显示状态被改变时

    五种情况下会刷新控件状态(刷新控件状态才能刷新所有子FWinControls的显示): 在TWinControls.PaintControls中,对所有FWinControls只是重绘了边框,而没有整 ...

  2. 获取$(this)子节点对象的方法

    获取$(this)子节点对象的方法: 1.children()方法: children() 方法返回被选元素的所有直接子元素. 该方法只会向下一级对 DOM 树进行遍历. 2.find()方法: fi ...

  3. Ztree右键事件,如何让指定的子节点不显示右键菜单。

    这里我记录一下我自己的解决方案: 1.首先在Ztree的setting设置中加一个鼠标右键回调函数onRightClick,然后在加一个beforeRightClick(具体含义可以看官方API) v ...

  4. easui tree载入时自动展开无子节点的节点

    利用loadFilter对后台返回的原始数据进行过滤处理,将数据中的state字段修改相应的值,若无子节点,则改成open,若有子节点,则改成closed. 由于一个node属性只有下面几项内容,因此 ...

  5. Jstree 使用CheckBox插件 选中父节点时被禁用的子节点也会选中问题

    问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下 解决方案: 1.  将jstree升级到最新的版本,v3.3.4及以上就可以 2. ...

  6. 异步记载数据时page是怎么计算的

    最近一直在完善基于Busybox做的ARM Linux的根文件系统,由于busybox是一个精简的指令集组成的简单文件系统,其优点就是极精简,满足了Linux基本的启动需求,由于它几乎没有什么后台服务 ...

  7. 使用angularjs的$http.post异步提交数据时,服务器接收不了的问题

    一,在正常情况下,使用表单的post方法提交数据,默认请求头的Content-Type:application/x-www-form-urlencoded类型, 提交数据格式如下: 二,使用angul ...

  8. bootstrap jQuery Ztree异步载入数据,check选择&amp;可加入、改动、删除节点

    效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...

  9. MVC前台Post/Get异步获得数据时参数的取值问题

    Post方法,返回text,后台获得Data View $.ajax({ type: "POST", dataType: "text",//返回类型为文本 ur ...

随机推荐

  1. n个灯,k个人的开灯问题

    /**有n个灯,编号为1-n.第一个人把所以灯打开,第二个人按下 所有编号为2的倍数的开关,第三个人按下3的倍数的开关,依次类推, 一共有k个人,问最后有哪些灯开着? 样例输入: 7 3 样例输出: ...

  2. OpenStack网络的前世今生

    声明: 本文转自OpenStack中国社区,原文链接:http://www.openstack.cn/p353.html,作者Joshua,转载请注明. 在OpenStack世界中,网络组件最初叫no ...

  3. AQL Subset Compiler:手把手教你如何写一个完整的编译器

    项目地址:https://github.com/laiy/Awesome-Complier. 转载请注明出处. 前言 这是学校里编译原理课程的大作业,此Project十分适合编译原理的学习,让基本不听 ...

  4. 《A First Course in Probability》-chaper7-期望的性质-期望的性质-协方差

    在实际的问题中,我们往往想要通过已有的数据来分析判断两个事件的发生是否有相关性.当然一个角度去寻找这两个事件内在的逻辑关系,这个角度需要深究两个事件的本质,而另外一个角度就是概率论提供的简单方法:基于 ...

  5. 关于平移的 scrollTo和scrollBy的区别

    这几天在项目中要求一部分布局实现整体偏移的效果 在网上查了下我使用来ScrollBy(x,y)方法 他的意思是将view实现整体偏移 而ScollTo(x,y)则是将原点偏移到相应指定的位置即   移 ...

  6. Java多线程实现简单的售票程序

    设计一个多线程程序如下:设计一个火车售票模拟程序.假如火车站要有100张火车票要卖出,现在有5个售票点同时售票,用5个线程模拟这5个售票点的售票情况 1.要求打印出每个售票点所卖出的票号 2.各售票点 ...

  7. 用函数生成select选择框

    // 生成 html select option 标签 function build_options($options, $opt='',$k='') { $frags = array(); if ( ...

  8. CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)

    摘自: http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

  9. 【设计模式 - 12】之代理模式(Proxy)

    1      模式简介 1.1    定义 为其他对象提供一种代理以控制对这个对象的访问.代理对象起到中介作用,可以去掉功能服务或增加额外服务. 1.2    常见的代理模式 1)        远程 ...

  10. 多次读取请求request里数据

    如果请求是GET方法,可以直接通过getParameter(String param)方法读取指定参数,可读取多次: 而POST方法的参数是存储在输入流中,只能读一次,不能多次读取. 有时需要在fil ...