zTree jQuery 트리 플러그인의 자세한 사용 예

프로젝트는 백그라운드에서 반환된 데이터를 트리 보기 형식으로 표시하고 노드 정보를 오른쪽의 ul에 추가하도록 구현해야 합니다. 이는 후속 제출 후 사용됩니다. 노드 정보의 비동기 로딩을 구현할 수 있는 플러그인이 선택되었고 사실이 이를 입증했습니다. 플러그인은 처음 접했을 때 거의 모든 요구 사항을 충족할 만큼 강력했으며 많은 사람들의 공유를 읽었습니다. 공식 api 문서와 결합하여 마침내 기능을 구현했습니다. 효과 소개. api에는 아코디언 효과를 포함한 몇 가지 실제 작업이 추가되었습니다. 효과를 확장하려면 상위 노드에서 노드 텍스트 관련 확인란 효과를 클릭하세요. 이 기사에서는 zTree jQuery 트리 플러그인 사용에 대한 기사를 제공합니다(예제 설명). . 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

외부 리소스 도입

<link>
<script></script>
<script></script>

html 코드 부분

<p>
    </p>

    

      
• 已选择
    

  

css 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;
  }

js code

//递归找到所有节点(非父节点)
function getAllChildrenNodes(treeNode,result){
   if (treeNode.isParent) {
    var childrenNodes = treeNode.children;
    if (childrenNodes) {
      for (var i = 0; i ("+count+")");
    },
    //父节点展开时的事件
    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><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><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><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 var><p>backend php code 저는 순전히 프론트엔드이고 백엔드 코드는 간단하게만 작성할 수 있습니다.</p>
<pre class="brush:php;toolbar:false"><?php $pId = $_POST[&#39;id&#39;];

if($pId == 4){
  $array = array(&#39;{"name":"数据表_一","id":"1_1","pid":"0"}&#39;,&#39;{"name":"数据表_二","id":"1_2","pid":"0"}&#39;,&#39;{"name":"数据表_三","id":"1_3","pid":"0"}&#39;,&#39;{"name":"数据表_四","id":"1_4","pid":"0"}&#39;,&#39;{"name":"数据表_五","id":"1_5","pid":"0"}&#39;);
}else if($pId == 1){
  $array = array(&#39;{"name":"测试表_一","id":"2_1","pid":"1"}&#39;,&#39;{"name":"测试表_二","connect":"测试表_一","id":"2_2","pid":"1"}&#39;,&#39;{"name":"测试表_三","id":"2_3","pid":"1"}&#39;,&#39;{"name":"测试表_四","id":"2_4","pid":"1"}&#39;,&#39;{"name":"测试表_五","id":"2_5","pid":"1"}&#39;);
}else if($pId == 2){
  $array = array(&#39;{"name":"信息表_一","id":"3_1","pid":"3"}&#39;,&#39;{"name":"信息表_二","id":"3_2","pid":"3"}&#39;,&#39;{"name":"信息表_三","id":"3_3","pid":"3"}&#39;,&#39;{"name":"信息表_四","id":"3_4","pid":"3"}&#39;,&#39;{"name":"信息表_五","id":"3_5","pid":"3"}&#39;,&#39;{"name":"信息表_五_一","id":"3_5_1","pid":"3_5"}&#39;,&#39;{"name":"信息表_五_二","id":"3_5_2","pid":"3_5"}&#39;,&#39;{"name":"信息表_三_一","id":"3_3_1","pid":"3_3"}&#39;,&#39;{"name":"信息表_三_二","id":"3_3_2","pid":"3_3"}&#39;,&#39;{"name":"信息表_三_三","id":"3_3_3","pid":"3_3"}&#39;);
}else if($pId == 3){
  $array = array(&#39;{"name":"作废表_一","id":"4_1","pid":"3"}&#39;,&#39;{"name":"作废表_二","id":"4_2","pid":"3"}&#39;,&#39;{"name":"作废表_三","id":"4_3","pid":"3"}&#39;);
}

echo json_encode($array);

대부분의 js 코드를 사용할 수 있습니다. 자세한 API는 공식 API 문서를 참조하세요.

최종 밤나무 렌더링

:

상세 설명 예시 jQuery는 ztree를 사용하여 트리 테이블을 구현합니다

jquery의 ztree는 마우스 오른쪽 버튼 클릭 수집 기능을 구현합니다

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

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