ztree implements permission horizontal display function example sharing

When I was working on the permission function recently, I used ztree to implement it, but the product requires that the last layer of permission nodes be displayed horizontally. Below, the editor will share with you the implementation ideas for implementing the horizontal display function of permissions based on ztree for your reference. I hope it can help you.

Recently, when I was working on the permission function, I used ztree to implement it, but the product requires that the permission nodes on the last layer be displayed horizontally. The solution I started looking for online was to use CSS styles to set the display of the last layer to inline. Checked it on my local computer. The effect is good.

However, when I later tested this function on a laptop from ten years ago, I found a special card that caused the browser to crash. So, performance optimization begins.

1. Synchronization is changed to asynchronous. Although it is not stuck, the function is not satisfactory. Many people check a parent node (module node) and save it. At this time, there are no child nodes at all, so the saved data is problematic.

2. Set showIcon and showLine to false, and found that the speed has improved a little, but the product is still not satisfactory.

3. After careful inspection, ztree’s checkboxes are all simulated with span, and a background image is created. Intuitively, I feel that using the native checkbox is better than using image simulation. Just do it, I found an example provided by ztree, and after a slight modification, the effect is still obvious. The main method used is addDiyDom.

Post the main code below.

1. The data structure requires an isLeaf node to mark whether it is a child node.

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 method

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. Several cascade operation methods written by myself

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. In css, set:

.ztree li.isLeaf{
　　display:inline;
 }

Related recommendations:

Detailed example explanation jQuery EasyUI combined with zTree tree structure to create a web page

zTree asynchronous loading and expansion of the first level node method implementation

Example explanation jQuery uses the zTree plug-in to implement drag-and-drop functionality

The above is the detailed content of ztree implements permission horizontal display function example sharing. For more information, please follow other related articles on the PHP Chinese website!