Ztree Getting Started application (ii)

Time is not stable, write things are intermittent, today came early, continue to write yesterday did not finish the Ztree, yesterday, a callback did not write, in fact, this is the most important. Nonsense not much to say, to begin.

Callback

Callback: {        onclick:showinfo,        onrightclick:showmenu,                beforeremove:isremove,        beforerename: Isrename,                onremove:remove,        onrename:rename,                Beforecheck:ztreebeforecheck,        Oncheck:ztreeoncheck ,    },

OnClick: The event callback function used to capture node clicks, and if the Setting.callback.beforeClick method is set and returns false, the OnClick event callback function cannot be triggered. Default value is null

/** * @param event * @param treeid * @param treeNode*/function Showinfo (Event, Treeid, TreeNode) {    if(Treenode.type = ="F"){//no need to count leaf nodes        return; } Else if(Treenode.type = ="m"){//Statistics ModuleAddupformodule (treenode.id); } Else if(Treenode.type = ="s"){//Statistical SystemsAddupforsystem (treenode.id);    } showtable (Requirecount); Showchart (Requirecount);}

Note: The Event JS event object, Treeid string type, corresponding to Ztree treeid, user-friendly operation; TreeNode JSON type, the JSON data object of the node being clicked, Clickflag number The selected action type after the node is clicked.

Onrightclick: Used to capture the event callback function after right mouse click on Ztree, the default value is null;

If you set the Setting.callback.beforeRightClick method and return False, the Onrightclick event callback function cannot be triggered.

Whenever you assign a reference to a function to the Onrightclick property, the right-click menu of the browser is masked when you right-clicked Ztree.

/** The Right-click menu displays * Show the Action menu while you click the node * @param event * @param treeid * @param treeNode*/function ShowMenu (Event, Treeid, TreeNode) {Currnode=TreeNode; $("#rightClickMenu"). css ({"Top":Event. ClientY +"px",        " Left":Event. ClientX +"px",    }). Show ();}

The parameter is similar to the above onclick parameter and is not explained; the only thing to say is TreeNode, if the right click is not on the node, then return null;

Beforeremove: Used to capture the event callback function before the node was deleted, and to determine whether the delete operation is allowed based on the return value, the default value is NULL, the return value is True/false, and if return false,ztree will not delete the node, Also cannot trigger the OnRemove event callback function;

　　

/**/function Isremove (Treeid, TreeNode    ) {if(Confirm ("   ")) {        returntrue;    }     return false ;}

Beforerename: Used to capture the end of the node edit name (Input loses focus or press Enter), the event callback function before the node name data is updated, and the action to change the name is determined based on the return value; The default value is null.

 /*  * * action before rename a node * @returns { Boolean}  */ function Isrename (Treeid, TreeNode, NewName, iscancel) {  ( Iscancel) { return  false  ;  if  (Confirm ( "  Rename to   + NewName) { return  true  ;  return  false  ;}

　Note: NewName is the modified name, Iscancel the Boolean type, whether to cancel the operation, Iscancel = True to cancel the edit operation (press ESC or use the Canceleditname method), Iscancel = False to confirm the modification Operation, the return value of the callback function is true/false.

If the return False,ztree will maintain the name edit state, the Onrename event callback function cannot be triggered, and it will cause the other events to be masked until the name is modified so that Beforerename returns true

False returns the input box without the focus, avoiding repeated triggering of beforerename due to a warning message. After you turn off the warning message, use the Editname method to get input back to the focus.

Beforecheck: Used to capture the event callback function that was checked or unchecked, and to determine whether to allow check or uncheck, based on the return value, the default value: null;

/** *function Ztreebeforecheck (Treeid, TreeNode    ) {returnTrue ;};

The return value is True/false, and if False is returned, the tick status will not be changed and the OnCheck event callback function cannot be triggered;

OnCheck: Used to capture an event callback function that Checkbox/radio is ticked or unchecked, and if the Setting.callback.beforeCheck method is set and false, the OnCheck event callback function cannot be triggered. Default value: null

/** * @param event * @param treeid * @param treeNode*/function Ztreeoncheck (Event, Treeid, TreeNode) {    varDatas = {        'ID': Treenode.id,'type': Treenode.type,'checked': TreeNode.checked    }; $.ajax ({url:stateurl, Data:datas, Error:function (MES) {alert ("Please check the network"+mes); }        });};

is actually the record node's selected state, I here is selected after the results are recorded in the database, so there are background operations. TreeNode is the JSON object for the selected node, so you can use TreeNode to get the value of the node and upload it to the background for modification.

Background code:

 private   Integer ID;     private   String type;  private  boolean checked  ;         public   String Updatestate () { Nodeservice.updatetreestate (ID, type,  checked         );  "  1   );  return  null  ; }

-------------------------------------- Ornate Split Line-------------------------------------------------------------------------- ----------------------------------------

The above basic is a translation of the API, no eggs, the following is actually no use, but did this function plus it. What, is the tree underneath there is a once load all the buttons, click the button, show all the nodes of the tree, the following code:

The first is the page:

<button id="btn_loadall"class="btn btn-primary btn-sm ">                         Load all class="glyphicon glyphicon-download" ></i>                    </button>

JS Event:

$ ("#btn_loadAll"). On (' click ', function () {$.post (Getallurl, {' PID ': 0}, Function (msg) {if(msg) {var Nodearr= eval ("(" + msg + ")"); var len=nodearr.length;  for(var i = 0; i < Len; i++) {                        if(Nodearr[i].type! = "F") {Nodearr[i].open=true; }} $.fn.ztree.init ($ ("#tree"), setting, Nodearr);    }            }        ); });

Background code:

 PublicString GetAll () {Integer rid=sessionutils.getcurrentrequirefromsession (Request). GetId (); List<SystemModule> list =nodeservice.getwholetree (RID); String JSON=NewGson (). ToJson (list); Try{Response.setcontenttype ("Text/plain"); Response.setcharacterencoding ("Utf-8"); PrintWriter out=Response.getwriter ();        Out.print (JSON); } Catch(IOException e) {e.printstacktrace (); }                return NULL; }

Note: It should be noted that the JS event asynchronously loaded data when passed a PID is 0, but in the background code is not used, but it is used to obtain another PID, this is there are other reasons, we look at the ID as 0 is, Of course, if you want to find out the data, you need to change the PID to 0 in the database.

The specific query code:

     PublicList<systemmodule>getsystems (Integer pid) {List<SystemModule> Allarr =NewArraylist<systemmodule>(); //get the system levellist<systemmodule> list =Getnodechildren (PID); //get the module level         for(Systemmodule module:list) {allarr.add (module); if(!module.gettype (). Equals ("F") {allarr.addall (Getsystems (Module.getid ())); }        }        returnAllarr; }

Here, the use of recursion, although the efficiency of recursion is not high, but there is not so much data, recursion to recursion it, pay attention to it.

-------------------------------------- Ornate split line ----------------------------------------------------------- -------------------------------------------------------

This summary for the time being, I would like to write more features, but JS code too much, has been affixed to the code is not a thing, after writing a summary of the time or change the style.

Ztree Getting Started application (ii)