jquery combined with ztree spanning tree

Ztree's API http://www.ztree.me/v3/api.php

Ztree's online demo http://www.ztree.me/v3/demo.php#_102

Ztree's Local Demo

1, add style, JS

<link rel= "stylesheet" href= "${ctx}/hollybeacon/resources/plugins/ztree_v3/css/demo.css" type= "Text/css" > <link rel= "stylesheet" href= "${ctx}/hollybeacon/resources/plugins/ztree_v3/css/ztreestyle/ztreestyle.css" type = "Text/css" ><script type= "Text/javascript" src= "${ctx}/hollybeacon/resources/plugins/ztree_v3/js/ Jquery.ztree.core-3.5.js "></script><script type=" Text/javascript "src=" ${ctx}/hollybeacon/resources/ Plugins/ztree_v3/js/jquery.ztree.excheck-3.5.js "></script><script type=" Text/javascript "src=" ${ctx} /hollybeacon/resources/plugins/ztree_v3/js/jquery.ztree.exedit-3.5.js "></script><script type=" text/ JavaScript ">

2, HTML set a DIV, UL, notice that the UL class is fixed Ztree

<div class= "Treecontentpane" > <ul id= "bustree" class= "Ztree" > </ul></div>

3, write JS operation data

 1, setting configuration details var setting = {    //display     view:  {             selectedmulti: false When copying, allow multiple nodes to be selected        },    //Delete, move copy      edit: {     enable: true, //If Enable is flase, then the tree will not move       showremovebtn: true, //whether to show the delete button of the tree      showrenamebtn :  true, //whether to display the number of renamed buttons      issimpledata : true, //data is easy to use  Array  format, default false     treenodekey :  "id",   // Under Issimpledata format, the current Node id attribute      treeNodeParentKey :  "parentid",// In Issimpledata format, the parent Node ID property of the current node      showline : true, //whether to display the connection between nodes       //Drag and Pull      drag: {      iscopy: true,//able to copy        ismove: true//able to move      }    },     //Asynchronous     async: {     enable: true, // Open Asynchronous Load      type: "Get",      url:holly.getpath ()  +  " /rest/treecode/showztreesyncrest ",      contenttype:" Application/json ",      autoparam: ["id"], //asynchronously loads the data and automatically adds the ID parameter      datafilter: The filter //filter is the same as the Loadfilter method in Easy-ui.      //such as     },    //node display values      data:{     key:{      name: "CodeName"       },     //     simpledata:{      enable:true,//If True, you can automatically convert the list collection obtained from the database to the array format. Instead of converting to JSON pass       idkey: "id",//Node Id      pidkey: " ParentID ",//parent node of node id      rootpid:null     }     },    //callback function     callback: {      beforedrag: beforedrag,//drag and drop before      beforedrop: beforedrop,//end      ondrop: ztreeondrop,//after the end of the drag      //onDrag:  ztreeondrag,//drag      beforeremove: ztreebeforeremove,//before deleting a node    After the    onremove: ztreeonremove,//node is deleted      beforeEditName:  ztreebeforeeditname,//before you edit      //beforerename: ztreebeforerename,//before renaming a node      //onrename: ztreeonrename,//after renaming      onclick: ztreeonclick,//click       onrightclick: ztreeonrightclick,//Right-click      onAsyncSuccess:  ztreeonasyncsuccess//Asynchronous Load      //beforeExpand: beforeExpand,      //onAsyncSuccess: onAsyncSuccess,     //onAsyncError:  onasyncerror    }   };   //The default display root node of the load tree, and the first level node      function ztreeonasyncsuccess (event, treeid, msg)  {       try {       var nodes = ztree.getnodes ();        for (var i = 0;i<nodes.length;i++) {        //Expand the first-level node         ztree.expandnode (nodes[i ], true);       &nbSP;}       } catch  (ERR)  {        Holly.showerror ("Data Exception",  err);      }    }     //sets an identity that is executed asynchronously in order to resolve the click.     /* var firstasyncsuccessflag = 0;    function  ztreeonasyncsuccess (event, treeid, msg)  {     if  ( firstasyncsuccessflag == 0 | | &NBSP;FIRSTASYNCSUCCESSFLAG&NBSP;==&NBSP;1)  {      try {   The      //call expands the first node by default        var selectednode  = ztree.getselectednodes ();       var nodes =  Ztree.getnodes ();        ztree.expandnode (nodes[0], true);        var childnodes =&nbSp;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)  {       holly.showerror ("Data Exception",  err);       }     }else{      alert (111);      }     }*/   //Initialization Tree    ztree  = $.fn.ztree.init ($ ("#busTree"),  setting);    //Asynchronous Refresh     Ztree.reasyncchildnodes (null,  "refResh "); 

jquery combined with ztree spanning tree