【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

大家好,又见面了,我是全栈君。

 

0.页面中准备树的ul

<ul id="treeDemo10" class="ztree" style="display: none;"></ul>

 1.生成部门树的JS

// 查询外部部门结构
var searchUnitTree = function() {
    $.ajax({
        url : contextPath + '/exam_getUnitTree.action',
        async : true,
        dataType : 'json',
        success : function(response) {
            zNodes11 = response.unitTrees;
            // 生成树结构
            geneUnitTree(zNodes11);

        },
        error : function() {
            alert("查询外部部门树失败!!!")
        }
    });
}

// 生成外部部门树
function geneUnitTree(unitTrees) {
    $("#treeDemo10").html(""); // 清空树结构
    var setting = {
        view : {
            selectedMulti : false
        },
        check : {
            enable : true
        },
        data : {
            simpleData : {
                enable : true,
                idKey : "unitId",
                pIdKey : "upUnitId",
                rootPId : null
            },
            key : {
                name : "name",
            }
        },
        callback : {
            beforeCheck : beforeCheck_out,
            onClick : zTreeOnClick_out
        }
    };
    var treeNodes11 = unitTrees;
    $.fn.zTree.init($("#treeDemo10"), setting, treeNodes11);
}
// 鼠标点击树事件(打印点击的id与名字)
function zTreeOnClick_out(event, treeId, treeNode) {
    // alert(treeNode.unitId + ", " + treeNode.name);
    alert($("#el_chooseDepart1").text());

}
// 点击前面的复选框事件
function beforeCheck_out(treeId, treeNode) {
    className10 = (className10 === "dark" ? "" : "dark");
    el_id = treeNode.name;
    // 判断点击的节点是否被选中,返回false 和 true
    if (!treeNode.checked) {
   
   // 选中
        showLog10_out(treeNode.name + ',');// 加上逗号加以区分
        $("#department_employee_out")
                .append(
                        // 添加部门到下面的选择员工
                        '<div class="panel panel-default el_departPersons" id="'
                                + treeNode.name
                                + '">'
                                + '<div class="panel-heading"><span class="el_addDepart" >'
                                + treeNode.name
                                + '</span>&nbsp;&nbsp;'
                                + '(人数:<span class="employeeNum">0</span>)</div>'
                                + '<div class="panel-body"></div>' + '</div>');
    } else { // 点击选中,向让其未选中
        noshowLog10_out(treeNode.name + ',', treeNode);
        $("#" + treeNode.name).remove();// 反选复选框删除部门
        var parentzTree = treeNode.getParentNode();
    }
    return (treeNode.doCheck !== false);
}
function showLog10_out(str) {
    if (!el_chooseDepart1)
        el_chooseDepart1 = $("#el_chooseDepart1");
    el_chooseDepart1.append("<li class='" + className10 + "' id='" + el_id
            + "'>" + str + "</li>");

    if (el_chooseDepart1.children("li").length > 6) {
        el_chooseDepart1.get(0).removeChild(el_chooseDepart1.children("li")[0]);
    }
}

function noshowLog10_out(str, tNode) {
    if (!el_chooseDepart1)
        el_chooseDepart1 = $("#el_chooseDepart1");
    // 删除当前选中的树的名字
    el_chooseDepart1.children("#" + el_id).remove();
    // 删除当前子的树的名字
    if (tNode.isParent) {
        var childrenNodes = tNode.children;
        if (childrenNodes) {
            for (var i = 0; i < childrenNodes.length; i++) {
                alert();
                var el_id0 = childrenNodes.name;
                el_chooseDepart1.children("#" + el_id0).remove();

                // result += ',' + childrenNodes[i].id;
                // result = getChildNodes(childrenNodes[i], result);
            }
        }
    }

}

 

后台返回的JSON数据格式:

{"unitTrees":[{"name":"部门1","unitId":"1"},{"upUnitId":"1","name":"部门10001","unitId":"10001"},{"upUnitId"
:"10001","name":"部门100010001","unitId":"100010001"},{"upUnitId":"1","name":"部门10002","unitId":"10002"
},{
    
    "upUnitId":"10002","name":"部门100020001","unitId":"100020001"},{"upUnitId":"1","name":"部门10003","unitId"
:"10003"}]}

 

生成的树结构: 

【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

 

 

 2.根据树的name属性动态设置前面的复选框为选中(根据树节点的名字判断,也可以根据其他属性判断)

  // 获取树对象
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo10");
    /** 获取所有树节点 */
    var nodes = treeObj.transformToArray(treeObj.getNodes());
        // 遍历树节点设置树节点为选中
        for (var k = 0, length_3 = nodes.length; k < length_3; k++) {
            if (unitName[j] == nodes[k].name) {
                nodes[k].checked = true;
          treeObj.updateNode(nodes[k],true); } }

 

补充:设置checked属性之后,一定要更新该节点,否则会出现只有鼠标滑过的时候节点才被选中的情况

    // 获取树对象
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    /** 获取所有树节点 */
    var nodes = treeObj.transformToArray(treeObj.getNodes());
    // 遍历树节点设置树节点为未选中
    for (var k = 0, length_3 = nodes.length; k < length_3; k++) {
        nodes[k].checked = false;
       treeObj.updateNode(nodes[k],true);
    }

 

查看updateNode方法解释:(也就是更新的时候需要安装自己定义的上级与下级关联关系进行更新)

【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

 

 

 

 

 js中debugger查看nodes(JS数组):

【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

 

查看第一个节点:(有好多属性)

【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

 

 

效果:

【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108075.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • centos配置yum源_linux配置离线yum源

    centos配置yum源_linux配置离线yum源执行yuminstall报错Error:Failedtodownloadmetadataforrepo‘appstream’:Cannotprepareinternalmirrorlist:NoURLsinmirrorlist排查:查看CentOS8所在服务器网络是否出现问题,可以用pingwww.baidu.com进行测试。网络没问题就看对应的软件源是否出现问题,具体排查/etc/yum.repos.d目录下这三个文件:CentOS-Ba

  • MATLAB中求矩阵的逆矩阵方法(2种)「建议收藏」

    MATLAB中求矩阵的逆矩阵方法(2种)「建议收藏」方法一:使用inv()函数求矩阵的逆第一步:打开matlab之后,在命令行窗口中输入a=[123;456;789],新建一个a方矩阵,如下图所示:第二步:在命令行窗口中输入inv(a),按回车键,可以看到得到了矩阵的逆,如下图所示:注意:a矩阵可逆的条件是非奇异方法二:使用a^-1格式求矩阵的逆第一步:在命令行窗口中输入a^-1,按回车键,可以得到矩阵的逆,如下图所示:其实,还可以给-1加括号“()”,a^(-1),如下图:注:a必须是方针,即行数和列数相等。…

  • 惠普台式机如何装系统_惠普的台式机如何用u盘安装系统

    惠普台式机如何装系统_惠普的台式机如何用u盘安装系统惠普在计算机行业是一个很有声誉的品牌,无论是台式机还是笔记本,惠普都是一款值得考虑和购买的品牌产品之一。但是当计算机系统出了问题需要重装系统时,很多人并不知道如何进行系统的重装,那么惠普的台式机如何进行重装系统呢?下面介绍一下台式小机惠普电脑怎么装系统。惠普电脑装系统步骤阅读1、打开浏览器搜索云骑士官网,找到云骑士官网并点击打开。2、在官网下载云骑士一键重装系统软件,下载后打开云骑士装机大师。3、…

  • IGMP协议原理与配置[通俗易懂]

    IGMP协议原理与配置[通俗易懂]组播通信中,发送者将组播数据数据发送到特定的组播地址。

  • 4hutool实战:DateUtil-格式化时间[通俗易懂]

    4hutool实战:DateUtil-格式化时间[通俗易懂]hutool实战:把日期按照不同的需求格式化成对应的日期字符串关键字:javajavaJAVAhutoolhutoolHutool工具类工具类工具类DateUtilDateUtilDateUtil

  • 点菜宝基站信道设置_点菜宝怎么连接基站

    点菜宝基站信道设置_点菜宝怎么连接基站最近在跟菜鸟天地系统对接,业务中涉及到单点接入,感觉其实现思想很不错,现分享一下,供大家参考:从CP内部系统进入菜鸟天地,也就是从菜鸟的合作伙伴(物流或快递公司内部系统)单点跳转进入菜鸟天地系统红

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号