zoukankan      html  css  js  c++  java
  • 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 = 0;i < data[0].length;i++){
                    if(data[0][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);//展开指定的根目录
        }
  • 相关阅读:
    NodeJs 实现 WebSocket 即时通讯(版本二)
    (JavaScript) 时间转为几天前、几小时前、几分钟前
    (IDEA) 从数据库快速生成Spring Data JPA实体类
    (IDEA) 设置编码统一为UTF-8
    ElasticSearch 中文分词插件ik 的使用
    Logstash 安装及简单实用(同步MySql数据到Elasticsearch)(Windows)
    Docker在Linux上 基本使用
    vue设置页面标题
    HTML5实战与剖析之字符集属性(charset和defaultCharset)
    asp.net传多个值到其它页面的方法
  • 原文地址:https://www.cnblogs.com/weblv/p/5156921.html
Copyright © 2011-2022 走看看