使用zTree.js动态加载树节点小结

树插件一般用与多级分类，权限管理菜单，这个Ztree功能还是基本满足我们的需求

直接上代码

@{
    ViewBag.Title = "zTree";
}

<h2> @ViewBag.Title</h2>
<link href="~/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<div class="row">
    <ul id="treeDemo" class="ztree col-lg-5"></ul>
    <ul id="ulright" class="col-lg-7">
        <li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已选择</li>
    </ul>
</div>
@section scripts{
<script src="~/zTree_v3-master/js/jquery.ztree.all.min.js"></script>
<script>

    //递归找到所有节点(非父节点)
    function getAllChildrenNodes(treeNode, result) {
        if (treeNode.isParent) {
            var childrenNodes = treeNode.children;
            if (childrenNodes) {
                for (var i = 0; i < childrenNodes.length; i++) {
                    if (!childrenNodes[i].children) {
                        result.push(childrenNodes[i].name);
                    }
                    result = getAllChildrenNodes(childrenNodes[i], result);
                }
            }
        }
        return result;
    }
    var parames = 3;
    //zTree的所有配置
    var setting = {
        //zTree 的唯一标识，初始化后，等于 用户定义的 zTree 容器的 id 属性值。
        treeId: "",
        //zTree 容器的 jQuery 对象，主要功能：便于操作,内部参数,不可修改
        treeObj: null,
        //异步请求数据配置;点击此父节点会触发请求
        async: {
            //打开此功能
            enable: true,
            url: "/ZTree/Data",
            type: "post",
            //发送的父级id的字段定义;如修改,遵循格式autoParam: ["id=parentId"]
            autoParam: ["id"],
            //其他需要提交的参数["name","topic","key","ss"]转换后格式为name=topic&key=ss
            //otherParam: ["json", parames || 1, "test", "2"],
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            //ajax请求后的数据预处理函数
            dataFilter: function (treeId, parentNode, responseData) {
                console.log(responseData)
               return responseData;
            }
        },
        //数据配置
        data: {
            simpleData: {
                enable: true,
                idKey: "id", //修改默认的ID为自己的id
                pIdKey: "pid", //修改默认父级ID为自己数据的父级id
                rootPId: 0 //根节点的父节点id
            }
        },
        //视图配置
        view: {
            //是否显示节点前的图标
            showIcon: showIconForTree,
            //节点上a标签的样式
            fontCss: {
            }
        },
        //选框配置
        check: {
            //启用复选框
            enable: true,
            //chkStyle:"radio",//单选
            //复选框父子级选择联动设置
            chkboxType: { "Y": "ps", "N": "ps" }
        },
        //事件配置
        callback: {
            //点击复选框之前的事件
            beforeCheck: function (treeId, treeNode) {//如果节点是父节点,并且勾选时没有子节点,则不允许勾选;针对父节点没有展开,则没有异步加载子节点,此情况禁止点击父节点全选子节点的操作
                if (treeNode.isParent && !treeNode.children) {
                    return false;
                }
            },
            //回调错误事件
            onAsyncError: function (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
                alert("初始化节点数据失败,请稍后重试");
            },
            //回调成功事件
            onAsyncSuccess: function (event, treeId, treeNode, resData) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                console.log("数据加载成功");
                var count = (treeNode.children.length);
                //加载成功后;在节点后面显示此父节点下有几个一级子节点
                //$(".ztree").find("a[title=" + treeNode.name + "]").find("span[class='node_name']").html(treeNode.name + "<span>(" + count + ")</span>");
            },
            //父节点展开时的事件
            onExpand: function (event, treeId, treeNode) {
                //zTree对象
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                //获取点击的id
                var nowId = treeNode.id;
                //获取所有节点
                var allNodes = zTree.getNodes();
                //获取点击节点的层级
               var level = treeNode.level;
                //定义过滤函数;获取节点层级与点击节点层级相同并且为父节点的节点
                function filter(node) {
                    return (node.level == treeNode.level && node.isParent);
                }
               //获得点击节点同级的父节点的集合
                var sameLevelNodes = zTree.getNodesByFilter(filter);
                //遍历同级节点集合
                for (var i = 0; i < sameLevelNodes.length; i++) {
                    //将非被点击父节点收起;实现手风琴效果
                    if (sameLevelNodes[i].id != nowId) {
                        zTree.expandNode(sameLevelNodes[i], false, true, true);
                    }
                }
            },
            //点击事件
            onClick: function (e, treeId, treeNode, clickFlag) {

                //tree实例

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

                //点击文字关联复选框

                //如果不是父节点,则关联,或者是父节点,但展开状态位true是,也关联;

                if (!treeNode.isParent || (treeNode.isParent && treeNode.open)) {

                    zTree.checkNode(treeNode, !treeNode.checked, true);//点击文字关联复选框

                }

                //点击文字展开当前节点

                zTree.expandNode(treeNode, true, true, true);

                // zTree.reAsyncChildNodes(treeNode, "refresh");//强行异步加载(存在子节点也进行加载)

                //手风琴效果;直接调用onExpand

                zTree.setting.callback.onExpand(e, treeId, treeNode);

                //点击节点名称和勾选节点前面的复选框逻辑相同;

                //直接在onClick里面调用onCheck函数;并传入所需参数

                zTree.setting.callback.onCheck(e, treeId, treeNode);

            },
            //点击复选框事件
            onCheck: function (e, treeId, treeNode) {
                //获取右侧ul内所有li标签;用于比较当前选择复选框在右侧是否一斤存在
                var rightLi = $("#ulright").find("li");
                //选中的是底层节点;
                if (!treeNode.isParent) {
                    //选中状态,加入到右侧
                    if (treeNode.checked) {
                        //遍历右侧li,如果选中的已经存在;return
                        for (var i = 0; i < rightLi.length; i++) {
                            if ($(rightLi[i]).attr("title") == treeNode.name) {
                                return;
                            }
                        }
                        // 创建li 追加li
                        var addLi = $("<li title=" + treeNode.name + "><span></span>");
                        addLi.find("span").text(treeNode.name);
                        addLi.animate({
                            width: "100%",
                            height: "30"
                        }, 400)
                        addLi.appendTo($("#ulright"));
                        //如果点击的节点存在connect字段;判断复选框状态加入到右侧ul或删除
                        if (treeNode.connect) {
                            //遍历右侧li,如果选中的已经存在;return
                            for (var i = 0; i < rightLi.length; i++) {
                                if ($(rightLi[i]).attr("title") == treeNode.connect) {
                                    return;
                                }
                            }
                            // 创建li 追加li
                            var addLi = $("<li title=" + treeNode.connect + "><span></span>");
                            addLi.find("span").text(treeNode.connect);
                            addLi.animate({
                                width: "100%",
                                height: "30"
                            }, 400)
                            addLi.appendTo($("#ulright"));
                        }
                        //将被勾选的节点背景颜色更改
                        $("#treeDemo").find("a[title=" + treeNode.name + "]").css("backgroundColor", "#00b6ba");
                        //非选中状态,删除
                   } else {
                        //将右侧的次节点对应的li删除
                        $("#ulright").find("li[title=" + treeNode.name + "]").animate({
                            width: "0%",
                            height: "0"
                        }, 400, function () {
                            $("#ulright").find("li[title=" + treeNode.name + "]").remove();
                        })
                        //取消此节点的背景颜色
                        $("#treeDemo").find("a[title=" + treeNode.name + "]").css("backgroundColor", "");
                    }
                    //选中的是父节点;获取所有子节点(非父节点),判断复选框状态加入到右侧ul或删除
                } else {
                    //调用递归函数;获取所有非父级子节点数组集合
                    var addNodesArray = getAllChildrenNodes(treeNode, []);
                    //是选中状态,加入到右侧ul
                    if (treeNode.checked) {
                        //定义存储右侧li的数组
                        var rightLiArray = [];
                        $("#ulright li").each(function (i, v) {
                            rightLiArray.push($(v).attr("title"))
                        })
                        rightLiArray = rightLiArray.slice(1);
                        //遍历勾选的数组集合
                        for (var i = 0; i < addNodesArray.length; i++) {
                            //判断此节点是否在右侧ul内;不存在则加入
                            if (rightLiArray.indexOf(addNodesArray[i]) == -1) {
                                //创建li 追加li
                                var addLi = $("<li title=" + addNodesArray[i] + "><span>" + addNodesArray[i] + "</span>");
                                addLi.animate({
                                    width: "100%",
                                    height: 30
                                }, 400)
                                addLi.appendTo($("#ulright"));
                            }
                            //将节点背景颜色修改
                            $("#treeDemo").find("a[title=" + addNodesArray[i] + "]").css("backgroundColor", "#00b6ba");
                        }
                        //是非选中状态,删除
                    } else {
                        //遍历节点,执行删除操作
                        for (var i = 0; i < addNodesArray.length; i++) {
                            $("#ulright").find("li[title=" + addNodesArray[i] + "]").animate({
                                width: "0%",
                               height: 0
                            }, function () {
                                $(this).css("display", "none");
                                $(this).remove();
                            })
                            //还原背景颜色
                            $("#treeDemo").find("a[title=" + addNodesArray[i] + "]").css("backgroundColor", "");
                        }
                    }
               }
            },
        }
    };
    //zTree的节点信息;可一次性全部加载;可试试异步请求
    var zNodes = [
        {
        name: "一班",//名称
        id: 1,//id,子元素的pid
        isParent: true,//是否为父节点,默认为false
        pid: 0,//父节点id;data中的rootPId;
        icon: "../zTree_v3-master/css/zTreeStyle/img/diy/1_open.png",//设置图标
        open: true,//设置默认是否展开//异步加载子节点无效
        //checked:true //设置默认勾选
    }, {
        name: "二班",
        id: 2,
        isParent: true,
        pid: 0
    }, {
        name: "三班",
        id: 3,
        isParent: true,
        pid: 0
    }];
    ///设置 zTree 仅仅 level=1 的节点不显示图标
    function showIconForTree(treeId, treeNode) {
        return treeNode.level !=1;
    };
    $(document).ready(function () {
        //初始化zTree; zTree容器的jquery对象/ 配置/ 节点
        //$.fn.zTree.init($("#treeDemo"), setting, null);///如果需要根节点也异步加载，初始化时 zNodes 参数设置为 null 即可。
        $.fn.zTree.init($("#treeDemo"), setting,zNodes)
    });

</script>}

doml效果图

Ztree.js下载地址:https://github.com/zTree/zTree_v3