Simple example of implementing permission list by multifunctional jQuery tree plug in zTree

zTree is a versatile "tree plug-in" implemented by jQuery. Excellent performance, flexible configuration and combination of multiple functions are the greatest advantages of zTree.

zTree official website
zTreeAPI download link

The page mainly introduces the following files:

<link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" />
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script> 

html page:

 <div class="edit_content">
      <div class="qxlb">
        <div class="add_title"> 
          <span> Permission list </span>
        </div>
        <div class="qxlb_content">
        <ul id="tree" class="ztree"></ul>
        </div>
      </div>
 </div>

Core js:

 <SCRIPT type="text/javascript">
var zTree;
// Create a tree structure 
function createTree() {
  var setting = {
    check:{
      enable:true
    },
    view: {
      dblClickExpand: true,
      expandSpeed: ""
    },
    // Asynchronous loading 
    async: {
      enable: true,// Set whether to load asynchronously 
      url:"<%=path%>/role/getResourcesList.do", // Object for asynchronously fetching nodes  URL  Address 
      otherParam: [ "roleId", '${updateRole.id}']
      
    },
    
    // This data Inside pIdKey,idKey,name And so on are the field names found in the background, 
      In sql Written in or spliced in json Splice it first, and when it is received before, it only corresponds to it 1 Just go straight 
    data: {
      simpleData: {
        enable: true,
        pIdKey: "PARENTID",
        idKey: "ID"
      },
        key: {
          checked: "CHECKED",
          name:"NAME"
        }
    },
    callback: {
     onAsyncSuccess: zTreeOnAsyncSuccess 
  } 
  };
  // Initialization   
  zTree = $.fn.zTree.init($("#tree"), setting);  
  zTree.expandAll(true);
}
/*  Asynchronous load cannot be expanded tree  Default expansion 1 Level menu  */
var firstAsyncSuccessFlag = 0;
function zTreeOnAsyncSuccess(event, treeId, msg) { 
if (firstAsyncSuccessFlag == 0) { 
     try { 
         // Invoke the default expansion of the 1 Node  
         var selectedNode = zTree.getSelectedNodes(); 
         var nodes = zTree.getNodes(); 
         zTree.expandNode(nodes[0], true); 
         var childNodes = zTree.transformToArray(nodes[0]); 
         zTree.expandNode(childNodes[1], true); 
         zTree.selectNode(childNodes[1]); 
         var childNodes1 = zTree.transformToArray(childNodes[1]); 
         zTree.checkNode(childNodes1[1], true, true); 
         firstAsyncSuccessFlag = 1; 
      } catch (err) { 
      
      } 
   } 
}

$(function(){
  // Page loading completes creating tree 
  createTree();  
});

function submitRole(){
  // Get the selected node and pass it to the background 
  var nodes = zTree.getCheckedNodes();
  var ids = [];
  for(var i=0,l=nodes.length;i<l;i++){
    ids[ids.length] = nodes[i].ID;
  }
  //var _resourcesIds=ids.join(",");
  document.getElementById("hidden_resourceList").value=ids.join(",");
      
  //$("#resourcesRoleListForm").submit();
}
</SCRIPT>

The data is realized by recursive query in the background, and transmitted to the foreground in the form of json for reception. For more information, please refer to API, which is a detailed example.