Ztree enables horizontal permission display and horizontal ztree display

Ztree enables horizontal permission display and horizontal ztree display

Recently, the permission function is implemented using ztree, but the product requires that the permission nodes at the last layer be displayed horizontally. The solution for getting started on the Internet is to set the display of the last layer to inline in css style. I checked it on my local computer. Good results.

However, when I tested this function in my notebook a decade ago, I found that a special card caused the browser to crash. Therefore, performance optimization begins.

1. synchronization is changed to asynchronous mode. Although it is not card-free, its functions are not met. Many people select a parent node (module node) and save it. At this time, the child node does not exist at all, therefore, the stored data is faulty.

2. Set showIcon and showLine to false, and the speed is greatly improved, but the product is still not satisfied.

3. After careful reading, all ztree checkboxes are simulated using span to create a background image. Intuitively, it is better to use a native checkbox than to simulate images. Let's just do it. I found an example provided by ztree and made some modifications. The effect is quite obvious. The main method used is addDiyDom.

The main code is pasted below.

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

Var zNodes = [{id: 1, pId: 0, name: "parent node 1", open: true, isLeaf: false}, {id: 11, pId: 1, name: "leaf node 1-1", isLeaf: true}, {id: 12, pId: 1, name: "leaf node 1-2", open: true, isLeaf: false },{ id: 120, pId: 12, name: "leaf node 1-2-0", isLeaf: true },{ id: 121, pId: 12, name: "leaf node 1-2-1", isLeaf: true}, {id: 13, pId: 1, name: "leaf node 1-3", isLeaf: true }, {id: 2, pId: 0, name: "parent node 2", open: true, isLeaf: false}, {id: 21, pId: 2, name: "leaf node 2-1", isLeaf: true}, {id: 22, pId: 2, name: "leaf node 2-2", isLeaf: true}, {id: 23, pId: 2, name: "leaf node 2-3", isLeaf: true}, {id: 3, pId: 0, name: "parent node 3", open: true, isLeaf: false}, {id: 31, pId: 3, name: "leaf node 3-1", isLeaf: true}, {id: 32, pId: 3, name: "leaf node 3-2", isLeaf: true}, {id: 33, pId: 3, name: "leaf node 3-3", isLeaf: true}];

2. addDiyDom Method

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

3. Several cascade operations written by myself

Function checkedHandler (checkbox) {var $ checkbox =$ (checkbox), treeNode = $ checkbox. data ("treeNode"), state = checkbox. checked; if (treeNode. isLeaf) {// subnode if (state) {// select a subnode. The parent node must be selected. The subnode is deselected, the parent node does not need to cascade setParentNodeChecked (checkbox) ;}} else {// The parent node if (state) {// select, cascade child nodes, cascade parent node setParentNodeChecked (checkbox); setChildNodeChecked (checkbox);} else {setChildNodeChecked (checkbox); }}/ ** set parent node selection */funct Ion 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);}/** set the subnode to select */function setChildNodeChecked (checkbox) {$ (checkbox ). closest ("li "). find (". checkboxBtn "). each (function () {this. checked = checkbox. checked ;});}

4. In css, set:

.ztree li.isLeaf{　　display:inline; }

The above section describes how to use ztree to display permissions horizontally. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner, thank you very much for your support for the help House website!