Multi-functional jquery Tree plugin Ztree A simple example of implementing a permission list _jquery

Ztree is a multifunctional "tree plug-in" that relies on jquery implementations. Excellent performance, flexible configuration, a combination of multiple functions is the biggest advantage of Ztree.

Ztree official website
Ztreeapi Download Link

The page mainly introduces several files:

<link type= "Text/css" rel= "stylesheet" href= "Ztree/ztreestyle.css"/> <script "type="
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> Permissions 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 tree structure function Createtree () {var setting = {check:{Enable:true}, view: {dblclickexpand: True, Expandspeed: ""},/////Asynchronous Loading async: {enable:true,//setting whether URL is loaded asynchronously: "<%=path%>/role/g Etresourceslist.do ",//Set the URL address of the asynchronous fetch node Otherparam: [" Roleid ", ' ${updaterole.id} ']},//This data
        Face of the pidkey,idkey,name and so on and so on are the corresponding background detection field name, in the SQL write well or in the concatenation of JSON when the first stitching good, before too much time as long as the corresponding can be data: {simpledata: {
          Enable:true, Pidkey: "ParentID", Idkey: "ID"}, Key: {checked: "Checked",
  Name: ' Name '}}, callback: {onasyncsuccess:ztreeonasyncsuccess}};  
  Initialize Ztree = $.fn.ztree.init ($ ("#tree"), setting);
Ztree.expandall (TRUE);
/* Asynchronous load cannot expand tree default expand Level menu */var firstasyncsuccessflag = 0; 
 function Ztreeonasyncsuccess (event, Treeid, msg) {if (Firstasyncsuccessflag = 0) {    try {//Call defaults to expand the first 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;  
The catch (Err) {}}} $ (function () {//Page load complete create tree createtree ();

});
  function Submitrole () {//Get selected node, upload to 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 through the backstage recursive query, which is passed to the foreground and receives in the form of JSON. More content can refer to the API, the example inside is very detailed.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.