JavaScript processing data Complete the left level two menu building

　The back-end management framework we applied to the project was basically the same, with a level two menu on the left, a click on the selected menu, and a corresponding page on the right. I put the front-end page encapsulation data process, although not necessarily suitable for all management pages, only as a case to reference, just hope you can understand the principle of implementation is good.

　　The menu on the left is built:

1, first, we need to apply the menu to import the database.

The following is the data I imported:

　　　　

　　　Depending on my business needs, I need four parent menus, so I set their PID field to 0, and the PID field of the submenu corresponds to the ID of the parent menu, which is important. The URL field is the address path that appears on the right page when you click the menu. The Status Status field represents whether the state of the current menu is available, the 0 I set here is available, 1 is unavailable, and you'll see later. The Order_num field is not available here for the time being.

　　　　2. Encapsulates a constructor to read and create a level two menu

　　　　In order not to make this case too cumbersome, I try to reduce the amount of code without considering the flexibility of the constructor. Assuming only for this case, the encapsulated function is as follows:　

functionMenutree (id,url) { This. ID =ID;  This. url =URL;  This. $Div =NULL;  This. $curA =NULL;  This. Inittree (); }menutree.prototype.inittree=function(){    varSelf = This; //container on the left menu, defined by the ID of the element     This. $Div = $ ("#" + This. ID); if( This. $Div. Length = = 0) {alert ("Menu initial out of container failed"); return; }    //click on the method of the agent, click on this container will use This.treeclick defined method to proxy     This. $Div. Click ($.proxy ( This. Treeclick, This)); //send a request to a set menu address$.post ( This. URL,function(data) {Self.createtreemenu (data.list); },"JSON")}menutree.prototype.createtreemenu=function(list) {//If the data is not read, or the data length is 0, the container will show no menu    if(!list| | List.length = = 0){         This. $Div. HTML ("no menu"); return; }    //declares an empty object to hold the menu information created    varRootnodes = {}; varLen =list.length; varnode =NULL; varCurnodeid= "";  for(vari=0;i<len;i++) {node=List[i]; //when the Read menu status is 1 o'clock, the menu is unavailable, skipping        if(node.status== ' 1 ')Continue; varID =node.id; varName =Node.name; varURL =Node.url; varPID =Node.pid; //When this data pid is 0 o'clock, this data is created as the parent menu        if(PID = = "0") {Rootnodes[id]= $ ("<div class= ' lefttreemenu haschildren ' ><leftMenuTitle>" +name+ "</leftMenuTitle></div>"); Continue; }        //The PID of the submenu is the ID of the parent menu, so here Rootnodes[pid] is the top rootnodes[id]        var$pnode =Rootnodes[pid]; //after the submenu is created, you add the ID and URL as custom attributes to the element, which is used later        var$a = $ ("<lefttreenode id= ' lefttreelink_" +id+ ">" +name+ "</leftTreeNode>"). attr ("id", id). attr ("url", URL);        $pnode. Append ($a); //This is not mentioned here, the next article says        if(Fromuri && (url==Fromuri)) {             This. $curA = $a. AddClass ("Currenta"); $pnode. addclass ("Currentmenu"). Removeclass ("Hidechildren"));        Mybar.freshtag (Id,name,url); }    }    varDF =document.createdocumentfragment ();  for(Keyinchrootnodes) {        //AppendChild is the use of native JS        //[0] is intended to convert the JQ object into a DOM objectDf.appendchild (rootnodes[key][0]); }    ( This. $Div) [0].appendchild (DF);} MenuTree.prototype.treeClick=function(e) {//The Click event will use the conversion of the DOM and JQ    vartarget =E.target; varNodeName =Target.nodename; //If you click on the parent menu, you can toggle the class name to show and hide the submenu    if(NodeName = = "Leftmenutitle") {$ (target). Parent (). Switchclass ("Hidechildren"); return; }    //If you click on a submenu, the data for the submenu is processed    if(NodeName = = "Lefttreenode"){         This. Freshtag ($ (target)); }}menutree.prototype.changecurnode=function($e) {//If the click is the same as the selected one, return    if( This. $curA = = $e)return; //If this $curA exists, the previous class name Currenta removed and the submenu is hidden    if( This. $curA) {         This. $curA. Removeclass ("Currenta"). Parent (). Removeclass ("Currentmenu"); }    //Just click on Add class name Currenta and Show submenu     This. $curA = $e. addclass ("Currenta"); $e. Parent (). AddClass ("Currentmenu"). Removeclass ("Hidechildren"));} MenuTree.prototype.freshTag=function($e) {//working with clicked elements     This. Changecurnode ($e); //Remove the URL that is bound on the element    varurl = $e. attr ("url"); if(Url.indexof ("http") ==0) {window.open (URL); return; }    //this will be in the next article, this is the creation of the right mybar and URL page display informationMybar.freshtag ($e. attr ("id"), $e. html (), URL);} 　 

　　　　3, the JSP page call

　　　　The JSP page is simple, creating a left container ID of "Lefttree" and then:

var New Menutree ("Lefttree", "<c:url value= '/menu/getmenutree '/>");

　　　　I explain that this article only explains the reading and creation of the menu on the left, as well as clicking on the show page to prepare for the next article.

　　　　4, the processing process of the background　　　　

Package Cn.wangze.controller;import Java.util.list;import javax.annotation.resource;import Javax.servlet.http.httpservletrequest;import Javax.servlet.http.httpservletresponse;import Javax.servlet.http.httpsession;import Org.apache.commons.logging.log;import Org.apache.commons.logging.logfactory;import Org.springframework.beans.factory.annotation.autowired;import Org.springframework.stereotype.controller;import Org.springframework.web.bind.annotation.pathvariable;import Org.springframework.web.bind.annotation.requestmapping;import Org.springframework.web.bind.annotation.sessionattributes;import Cn.wangze.service.syscacheservice;import Cn.wangze.service.sysmenuservice;import Cn.wangze.domain.SysMenu;//import Cn.wangze.service.SysMenuService;//import cn.wangze.utils.AuthUtils;@Controller @requestmapping ("/menu") @SessionAttributes ("Sysuser") public class SysMenuController01 extends basecontroller{log log=Logfactory.getlog (GetClass ()); //inject the service of the menu into the controller@Resource Private Sysmenuservice<SysMenu>Sysmenuservice; //if the menu is fixed, we can put the data in the cache so that we don't have to request it from the database every time .@Autowired private Syscacheservice syscacheservice; @RequestMapping (Value= "/{pagepath}/{pagename}"Public string Gomenupage (@PathVariable string pagepath, @PathVariable string pagename,httpservletrequest request)        {Setfromuri (request); return"/" + Pagepath + "/" +PageName; } @RequestMapping (Value= "/getmenutree") PublicvoidGetMenu (HttpServletResponse response,httpsession session) {//Call Syscacheservice's Querymenulist method to fetch the datalist<sysmenu> list =syscacheservice.querymenulist (); Log.debug ("Total Menu:" +list); if(List = =NULL)return; //You can refer to the blog post I sent earlier, encapsulating the method of returning data in Basecontrollersendjsonlist (list, response); }}

　　　Service and domain layer also has the mapper layer of code I will not send, is the operation of the query, because there is no control of the role permissions, so it is not much difficulty.

　　5, the effect after the creation of a good

　　　

　　Next article we explain the process of clicking on the submenu and displaying the corresponding address on the right.

JavaScript processing data Complete the left level two menu building