jquery, check the data from the background, add a tree to the page.

Front desk Jquery+ajax request to add a tree-shaped JS code to the page

1 //the ID of the current click node, in the background code query parentid= the current node ID record number, so as to achieve click on the current node, back to send AJAX requests, query the collection of child nodes, to the parent node splicing page2 functionTreeNode (PID) {3     4         //if the length of <ul> under the <li id= "pid" > tag is 1, then an AJAX request needs to be sent to add child nodes to it. If the length is greater than 1, the description is added without sending the AJAX request again. Control the display and hiding of styles in the direct in else5           if($ ("#" +pid). Find ("ul"). Length <= 1){6 $.ax ({7Type: "POST",8URL: "<%=request.getcontextpath ()%>/master/sysgroup_queryflorgroup.action",9Asyncfalse,Tendata:{"Sysparentid":p ID}, OneDataType: "JSON", ASuccessfunction(resp) { -                 //respond back data from the background, get all the group information in JSON format data -                     varGroups = resp["Rows"];  the                      -                 //if the length of the JSON array that queries out the group information is empty, then the node is =0, without its own point, without stitching.  -                 if(groups.length>0){ -                     //iterates through the information of a JSON array. Stitching page +                          for(vari=0;i<groups.length;i++){ -                             varCurrentID =Groups[i].sysgroupid; +                             //determines if child nodes have child nodes, and encapsulates the data in the background, encapsulating a status code A                         if(Groups[i].haschild = = "1"){ at                             //The pid equals zero, is the parent node, and the rest is the child node under the parent node -                                 if("0" = = pid) {//Add parent node for the first time -$ ("#firstFlorGroup"). Append ("<li id= '" +currentid+ "' ><input type= ' checkbox ' name= ' box ' value= '" +currentid+ "'/><a onclick=\ ' TreeNode -  -(' "+currentid+" ') \ "Id= ' a" +currentid+ ">" +groups[i].sysgroupname+ "</a></li>"); -$ ("#" +currentid). Append ("<div class=\" opt\ "><a href= ' javascript:void (0) ' onclick=\" Updategroup (' "+groups [I].sysgroupid+]'); \ "> Edit in  -</a>|<a href= ' javascript:void (0) ' onclick=\ ' DeleteGroup (' "+groups[i].sysgroupid+" '); \ "> Delete </a> </div><div class=\ "opt\" > "+groups[i].sysupdatetime+" </div> "); to}Else{ +$ ("#u" +pid). Append ("<li id=" "+currentid+" ' ><input type= ' checkbox ' name= ' box ' value= ' "+currentid+"'/><a onclick=\ ' TreeNode -  the(' "+currentid+" ') \ "Id= ' a" +currentid+ ">" +groups[i].sysgroupname+ "</a></li>"); *$ ("#" +currentid). Append ("<div class=\" opt\ "><a href= ' javascript:void (0) ' onclick=\" Updategroup (' "+groups [I].sysgroupid+]'); \ "> Edit $ Panax Notoginseng</a>|<a href= ' javascript:void (0) ' onclick=\ ' DeleteGroup (' "+groups[i].sysgroupid+" '); \ "> Delete </a> </div><div class=\ "opt\" > "+groups[i].sysupdatetime+" </div> "); -                                 } the                             //adding a pseudo-protocol to an edited hyperlink +$ ("#a" +currentid). attr ("href", "javascript:void (0)"); A                             //set the style to a child node that has child nodes, making it a green display.  the$ ("#a" +currentid). attr ("style", "Color:green;"); +                             //now that you have child nodes, you need to add <ul> tags to the <li> tab to easily add child nodes -$ ("#" +currentid). Append ("<ul id= ' u" +currentid+ "' ></ul>"); $}Else{ $                         //No child nodes -                                 if("0" = =pid) { -$ ("#firstFlorGroup"). Append ("<li id= '" +currentid+ "' ><input type= ' checkbox ' name= ' box ' value= '" +currentid+ "'/>" +groups the  -[i].sysgroupname+ "<div class=\" opt\ "><a href= ' javascript:void (0) ' onclick=\ ' Updategroup ('" +groups[i]. Sysgroupid+ "'); \" > Edit </a>|<a href= ' javascript:void (0) ' onclick=\ ' DeleteGroup (' "+groupsWuyi  the[i].sysgroupid+ "'); \" > Delete </a></div><div class=\ "opt\" > "+groups[i].sysupdatetime+" </div ></li> "); -}Else{ Wu$ ("#u" +pid). Append ("<li id=" "+currentid+" ' ><input type= ' checkbox ' name= ' box ' value= ' "+currentid+" '/> ' + Groups[i].sysgroupname+ "<div -  AboutClass=\ "opt\" ><a href= ' javascript:void (0) ' onclick=\ ' Updategroup (' "+groups[i].sysgroupid+" '); \ "> Edit </ A>|<a href= ' javascript:void (0) ' onclick=\ ' DeleteGroup (' "+groups[i].sysgroupid+"'); \ "> Delete $  -</a></div><div class=\ "opt\" > "+groups[i].sysupdatetime+" </div></li> "); -$ ("#" +currentid). Append ("<ul></ul>"); -                                 } A                             } +                         } the                     } -             } $         });  the}Else{ the         //when you do not need to send AJAX requests, when you click on the time to change its hidden and display style, to achieve dynamic effects the             if($ ("#" +pid). Find ("ul"). CSS ("display") = = "Block"){ the$ ("#" +pid). Find ("ul"). CSS ("display", "none"); -}Else { in$ ("#" +pid). Find ("ul"). CSS ("Display", "block"); the             } the         }        About}

View Code

Ajax Request Background Action

     PublicString Queryflorgroup () {Try{            //generate a list collection of mapsList<map<string,object>> Listmap =NewArraylist<map<string,object>>(); //Query the permission collection for the specified parent IDlist<sysgroup> list =sysgroupservice.querybypid (ParentID); //an object that generates an event formatSimpleDateFormat sdf=NewSimpleDateFormat ("Yyyy-mm-dd HH:mm:ss"); String UpdateTime= ""; //iterate through the set of permissions that are queried to wrap the data             for(SysGroup sysgroup:list) {intHaschild = 0; //statistics "Whether the traversed permission has child permissions"                intnum =Sysgroupservice.countchilds (Sysgroup.getsysgroupid ()); if(num>0) {Haschild= 1; } updatetime=Sdf.format (Sysgroup.getsysupdatetime ()); Map<String,Object> map =NewHashmap<string, object>(); Map.put ("Haschild", Haschild); Map.put ("Sysgroupid", Sysgroup.getsysgroupid ()); Map.put ("Sysgroupname", Sysgroup.getsysgroupname ()); Map.put ("ParentID", Sysgroup.getsysparentid ()); Map.put ("Sysupdatetime", UpdateTime);            Listmap.add (map); } jsonobject.put ("Rows", Listmap);        System.out.println (Jsonobject); }Catch(Exception e) {e.printstacktrace (); }finally{out.print (jsonobject);        Out.close (); }        return NULL; }

View Code