jQuery에서 zTree 트리 플러그인 사용 공유

공유 지침:

　프로젝트는 배경에서 반환된 데이터를 트리 보기 형식으로 표시해야 하며 노드를 클릭하여 오른쪽의 ul에 노드 정보를 추가해야 합니다. 이후 제출된 노드 정보의 비동기 로딩을 실현할 수 있는 zTree 플러그인이 선택되었습니다. 또한 이 플러그인을 처음 접했을 때 거의 모든 요구 사항을 충족할 만큼 강력하다는 사실도 입증되었습니다. 많은 사람들의 공유를 통해 공식 API 문서와 결합하여 마침내 기능을 구현했습니다. 이제 제가 학습한 내용을 요약하여 공유하겠습니다.

효과 소개 zTree의 기본 효과 외에도 다음을 사용하여 몇 가지 실용적인 작업이 추가되었습니다. 아코디언 효과를 포함한 API; 효과를 확장하려면 노드 텍스트 관련 확인란을 클릭하세요. 1단계 하위 노드 번호 표시 효과

　코드의 html 부분

1     <link rel="stylesheet" href="./zTree_v3-master/css/zTreeStyle/zTreeStyle.css">
2     <script type="text/javascript" src="./jquery-1.9.1.js"></script>
3     <script type="text/javascript" src="./zTree_v3-master/js/jquery.ztree.all.min.js"></script>

　css code

<div class="box">
        <ul id="treeDemo" class="ztree"></ul>
        <ul id="ulright">
            <li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已选择</li>
        </ul>
    </div>

　js code

ul,li,body{
        margin: 0;
        padding: 0;
    }
    .ztree li span.node_name {
        font-size: 16px;
    }
    .box{
        width: 500px;
        margin:10px auto;
        border:3px solid #ccc;
        padding: 20px;
        border-bottom: none;
    }
    #treeDemo{
        width: 200px;
        display: inline-block;
        background-color: #f1f1f1;
        min-height: 200px;
    }
    #ulright{
        width: 200px;
        margin-left: 50px;
        min-height: 200px;
        border:1px solid #ccc;
        display: inline-block;
        vertical-align: top;
        background-color: #eeeee8;
    }
    #ulright li{
        width: 100%;
        height: 30px;
        list-style: none;
        line-height: 30px;
        margin-bottom: 3px;
        background-color: #00b6ba;
        padding-left: 10px;
        box-sizing: border-box;

    }


    /**/
    .ztree li a.curSelectedNode{
        background-color: transparent;
        border:#00b6ba;
    }
    .ztree li span.node_name{
        font-size: 18px;
        line-height: 18px;
        color: #000;
    }
    .ztree li a{
       padding: 5px;
       vertical-align: middle;
    }
    .ztree li a:hover{
        text-decoration: none;
    }
    .ztree li span.button.chk{
        margin: 9px 3px;
    }

　백엔드 PHP 코드; 저는 순전히 프런트엔드이고 백엔드 코드는 간단하게만 작성됩니다.

//递归找到所有节点(非父节点)
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:"./zTreeDemoV9.0SimpleFromV10.0.php",
        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){
            for(var i=0;i<responseData.length;i++){
                responseData[i] = JSON.parse(responseData[i])
            }
            return responseData;
        }
    },
    //数据配置
    data: {
        simpleData: {
            enable: true,
            idKey: "id", //修改默认的ID为自己的id
            pIdKey: "pid", //修改默认父级ID为自己数据的父级id
            rootPId: 0 //根节点的父节点id
        }
    },
    //视图配置
    view: {
        //是否显示节点前的图标
        showIcon: false,
        //节点上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=&#39;node_name&#39;]").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: 4,//id,子元素的pid
            isParent:true,//是否为父节点,默认为false
            pid:0//父节点id;data中的rootPId;
        },{
            name: "测试表",
            id: 1,
            isParent:true,
            pid:0
        },{
            name: "信息表",
            id: 2,
            isParent:true,
            pid:0
        },{
            name: "作废表",
            id: 3,
            isParent:true,
            pid:0
        }];
$(document).ready(function() {
    //初始化zTree; zTree容器的jquery对象/ 配置/ 节点
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

대부분의 js 코드에는 주석이 있습니다. zTree 공식 웹사이트 공식 API 문서를 확인하세요. 코드는 서버 환경에서 실행되어야 합니다.

최종 밤나무 렌더링

위 내용은 jQuery에서 zTree 트리 플러그인 사용 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!