zTree异步生成数据时无法获取到子节点的选中状态
最近在项目中遇到一个问题,需求如下:
根据选中不同的人员(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异步生成数据时无法获取到子节点的选中状态的更多相关文章
- 五种情况下会刷新控件状态(刷新所有子FWinControls的显示)——从DFM读取数据时、新增加子控件时、重新创建当前控件的句柄时、设置父控件时、显示状态被改变时
五种情况下会刷新控件状态(刷新控件状态才能刷新所有子FWinControls的显示): 在TWinControls.PaintControls中,对所有FWinControls只是重绘了边框,而没有整 ...
- 获取$(this)子节点对象的方法
获取$(this)子节点对象的方法: 1.children()方法: children() 方法返回被选元素的所有直接子元素. 该方法只会向下一级对 DOM 树进行遍历. 2.find()方法: fi ...
- Ztree右键事件,如何让指定的子节点不显示右键菜单。
这里我记录一下我自己的解决方案: 1.首先在Ztree的setting设置中加一个鼠标右键回调函数onRightClick,然后在加一个beforeRightClick(具体含义可以看官方API) v ...
- easui tree载入时自动展开无子节点的节点
利用loadFilter对后台返回的原始数据进行过滤处理,将数据中的state字段修改相应的值,若无子节点,则改成open,若有子节点,则改成closed. 由于一个node属性只有下面几项内容,因此 ...
- Jstree 使用CheckBox插件 选中父节点时被禁用的子节点也会选中问题
问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下 解决方案: 1. 将jstree升级到最新的版本,v3.3.4及以上就可以 2. ...
- 异步记载数据时page是怎么计算的
最近一直在完善基于Busybox做的ARM Linux的根文件系统,由于busybox是一个精简的指令集组成的简单文件系统,其优点就是极精简,满足了Linux基本的启动需求,由于它几乎没有什么后台服务 ...
- 使用angularjs的$http.post异步提交数据时,服务器接收不了的问题
一,在正常情况下,使用表单的post方法提交数据,默认请求头的Content-Type:application/x-www-form-urlencoded类型, 提交数据格式如下: 二,使用angul ...
- bootstrap jQuery Ztree异步载入数据,check选择&可加入、改动、删除节点
效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...
- MVC前台Post/Get异步获得数据时参数的取值问题
Post方法,返回text,后台获得Data View $.ajax({ type: "POST", dataType: "text",//返回类型为文本 ur ...
随机推荐
- 【转】OpenGL基础图形编程(一)
原文:http://blog.chinaunix.net/uid-20638550-id-1909183.html 分类: 一.OpenGL与3D图形世界 1.1.OpenGL使人们进入三维图形世界 ...
- NDK的安装和下载
从官网下载NDK 下载页面:https://developer.android.com/ndk/downloads/index.html 从镜像站点下载NDK "大师兄"是一个由腾 ...
- JavaScript XML 兼容处理,序列化和反序列化以及回调事件
浏览器中XML DOM的支持 IE中通过ActiveXObject实现了XML的支持,存在一下几个版本:Microsoft.XmlDom,MSXML2.DOMDocument,MSXML2.DOMDo ...
- 像素,分辨率,PPI(像素密度),BPP 扫盲
像素于分辨率 像素,又称画素,为图像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“图像元素”之 ...
- spring maven pom
https://spring.io/blog/2009/12/02/obtaining-spring-3-artifacts-with-maven/
- java 解析xml文件案例
package xmlTest; import javax.xml.parsers.*; import org.w3c.dom.*; public class GetXml { public stat ...
- git 分支策略
转 http://www.ruanyifeng.com/blog/2012/07/git.html 作者: 阮一峰 如果你严肃对待编程,就必定会使用"版本管理系统"(Versio ...
- 使用ViewPager实现三个fragment切换
新建一个android项目 先展示效果吧 首先看myfragmentPagerAdater这个类的代码 package com.example.viewpager; import java.util. ...
- Linux命令之hwclock - 查询和设置硬件时钟
常用参数 -r, --show 读取并打印硬件时钟(read hardware clock and print result ) -s, --hctosys 将硬件时钟同步到 ...
- android布局之线性布局
LinearLayout 线性布局有两种,分别是水平线性布局和垂直线性布局,LinearLayout属性中android:orientation为设置线性布局当其="vertical&quo ...