ztree는 권한 수평 표시 기능 예제 공유를 구현합니다.-JS 튜토리얼-php.cn

ztree는 권한 수평 표시 기능 예제 공유를 구현합니다.

小云云

풀어 주다： 2018-01-11 14:00:38

원래의

2014명이 탐색했습니다.

최근 권한 기능 작업을 할 때 ztree를 사용해서 구현했는데, 제품에서는 마지막 레이어의 권한 노드가 가로로 표시되도록 요구하고 있습니다. 아래에서는 편집자가 참고용으로 ztree를 기반으로 권한의 수평 표시 기능을 구현하기 위한 구현 아이디어를 공유할 것입니다.

최근 권한 기능 작업을 할 때 ztree를 사용하여 구현했는데, 제품에서는 마지막 레이어의 권한 노드가 가로로 표시되도록 요구하고 있습니다. 제가 온라인에서 찾기 시작한 해결책은 CSS 스타일을 사용하여 마지막 레이어의 표시를 인라인으로 설정하는 것이었습니다. 내 로컬 컴퓨터에서 확인했습니다. 효과가 좋습니다.

그러나 나중에 10년 전 노트북에서 이 기능을 테스트했을 때 브라우저 충돌을 일으키는 특별한 지연을 발견했습니다. 따라서 성능 최적화가 시작됩니다.

1. 동기화가 비동기식으로 변경되었음에도 불구하고 기능이 만족스럽지 않습니다. 많은 분들이 상위노드(모듈노드)를 확인하시고 저장하시는데, 이때는 하위노드가 전혀 없습니다. 저장된 데이터에 문제가 있습니다.

2. showIcon과 showLine을 false로 설정하여 속도가 조금 향상되었으나, 제품은 여전히 만족스럽지 않습니다.

3. 주의 깊게 검사한 후 ztree의 체크박스는 모두 스팬으로 시뮬레이션되고 배경 이미지가 생성됩니다. 직관적으로 이미지 시뮬레이션을 사용하는 것보다 기본 확인란을 사용하는 것이 더 낫다고 생각합니다. 그냥 해보세요. ztree에서 제공하는 예제를 찾았고 약간 수정한 후에도 효과는 여전히 분명합니다. 사용되는 주요 메소드는 addDiyDom입니다.

아래에 기본 코드를 게시하세요.

1. 데이터 구조에는 자식 노드인지 여부를 표시하는 isLeaf 노드가 필요합니다.

var zNodes =[
      { id:1, pId:0, name:"父节点 1", open:true,isLeaf:false},
      { id:11, pId:1, name:"叶子节点 1-1",isLeaf:true},
      { id:12, pId:1, name:"叶子节点 1-2",open:true,isLeaf:false},
      { id:120, pId:12, name:"叶子节点 1-2-0",isLeaf:true},
      { id:121, pId:12, name:"叶子节点 1-2-1",isLeaf:true},
      { id:13, pId:1, name:"叶子节点 1-3",isLeaf:true},
      { id:2, pId:0, name:"父节点 2", open:true,isLeaf:false},
      { id:21, pId:2, name:"叶子节点 2-1",isLeaf:true},
      { id:22, pId:2, name:"叶子节点 2-2",isLeaf:true},
      { id:23, pId:2, name:"叶子节点 2-3",isLeaf:true},
      { id:3, pId:0, name:"父节点 3", open:true,isLeaf:false},
      { id:31, pId:3, name:"叶子节点 3-1",isLeaf:true},
      { id:32, pId:3, name:"叶子节点 3-2",isLeaf:true},
      { id:33, pId:3, name:"叶子节点 3-3",isLeaf:true}
    ];

로그인 후 복사

2. addDiyDom 메소드

function addDiyDom(treeId, treeNode) {
      //console.log(treeNode);
      var aObj = $("#" + treeNode.tId + IDMark_A);
      var editStr = $("<input type=&#39;checkbox&#39; class=&#39;checkboxBtn&#39; id=&#39;checkbox_" +treeNode.id+ "&#39; onclick=&#39;checkedHandler(this)&#39; ></input>");
      editStr.data("treeNode",treeNode);
      aObj.before(editStr);
    
    }

로그인 후 복사

3. 직접 작성한 여러 캐스케이드 작업 방법

function checkedHandler(checkbox){
      var $checkbox = $(checkbox),
        treeNode = $checkbox.data("treeNode"),
        state = checkbox.checked;
        if(treeNode.isLeaf){ //子节点
          if(state){ //子节点选中，父节点要跟着选中，子节点取消选择，父节点不用级联
            setParentNodeChecked(checkbox);
          }
        }else{ //父节点
          if(state){ //选中，级联子节点，级联父节点
            setParentNodeChecked(checkbox);
            setChildNodeChecked(checkbox);
          }else{
            setChildNodeChecked(checkbox);
          }
        }
    }
    /**设置父节点选中 */
    function setParentNodeChecked(checkbox){
      var $pNode = $(checkbox).closest("ul").parent();
      var pCheckbox = $pNode.find(".checkboxBtn").get(0);
      var treeNode = $(pCheckbox).data("treeNode");
      if(pCheckbox.checked === checkbox.checked) return;
      pCheckbox.checked = checkbox;
      if(treeNode.pId != "0") setParentNodeChecked(pCheckbox);
    }
    /**设置子节点选中 */
    function setChildNodeChecked(checkbox){
      $(checkbox).closest("li").find(".checkboxBtn").each(function(){
        this.checked = checkbox.checked;
      });
    }

로그인 후 복사

4. CSS에서 설정:

.ztree li.isLeaf{
　　display:inline;
 }

로그인 후 복사