LigerUI --- pull-down menu (menubar) Dynamic Display (obtain data from the background), ligerui --- menubar

LigerUI --- pull-down menu (menubar) Dynamic Display (obtain data from the background), ligerui --- menubar

Preface:

　　The drop-down menu of ligerui is a bit ugly, and there is no way to do this ........ Here we will mainly record how to obtain data from the background for menu display.

Two methods are available: 1. Dynamic addition using a json array 2. String concatenation. In fact, the two methods have similar principles, but the implementation forms are different.

 

For the drop-down menu, you should first look at the demo provided by the api in ligerui to see its data format, and then perform dynamic implementation based on the corresponding data format.

Data format:

{Text: "function Management", url: "www", click: itemclick, menu: {items: [{text: "projectOne", url: "ww", click: "ee", children: [{text: 'excel ', click: itemclick}]}
Note: When a level-1 menu has a sub-menu, there will be a menu attribute that contains an items. When a level-2 menu has a sub-menu, there will be a children attribute. When a level-3 menu has a sub-menu, there will also be a children attribute
The children attribute is included in the following examples. Therefore, we can write a recursive function from the second-level menu to call the function.

1. Dynamic addition of json Arrays:

Front-end jsp page:

Var menuData; $. ajax ({url: '$ {baseURL}/showFunctionMenu. action? ', Type: 'post', async: false, // synchronous request success: function (data) {// Replace "itemclick" with multiple itemclick replace var reg = new RegExp ("\" itemclick \ "", "g "); // create a regular RegExp Object data = data. replace (reg, "itemclick"); // convert string to json // alert (data); menuData = eval ('+ data + ')');}}); mainMenu = $ ("# mainMenu "). ligerMenuBar ({width: 300, items: menuData, // here menuData is the data received from the background}); // click function itemclick (item) corresponding to each menu) {// the url of the corresponding menu is displayed. alert (item. url); // for how to do it, according to your own project}

Background:

Private JSONArray jsonArray; public JSONArray getJsonArray () {return jsonArray;} public String showFunctionMenu () throws Exception {// set the Function statically first. You can configure a one-to-many relationship in the corresponding object class according to your program's needs.
// Perform related queries in the database to initialize the menu.
JsonArray = new JSONArray (); // call the initFuncs method to initialize the static value of the Function. I put it in the object class List <FunctionVO> menus = new FunctionVO (). initFuncs (); for (FunctionVO item: menus) {JSONObject json = new JSONObject (); json. put ("text", item. getName (); json. put ("id", item. getId (); json. put ("url", item. getUrl (); json. put ("click", "itemclick"); // you can add a menu attribute if (item. getChildren ()! = Null & item. getChildren (). size ()! = 0) {JSONArray jChildFunc = new JSONArray (); for (FunctionVO OneLevelChildFunction: item. getChildren () {// call the toMenu method. I put String strMenu = OneLevelChildFunction in the object class. toMenu (OneLevelChildFunction); System. out. println ("strOneLeve:" + strMenu); jChildFunc. add (strMenu);} // add url click method json. put ("menu", "{width: 160, items:" + jChildFunc. toString () + "}");} jsonArray. add (json. toString ();} System. out. println (jsonArray. toString (); return SUCCESS ;}

 

Entity class: because it is a parent menu and a sub menu (you can add an attribute children set in the object class, and then configure a one-to-many relationship, you can perform association query, I have not configured the link here, but it is static)

Public class FunctionVO22 {private Integer id; private String name; private String url; private String des; private Integer fId; // you can configure a one-to-many association relationship private List <FunctionVO22> children; public FunctionVO22 () {} public FunctionVO22 (Integer id, String name, String url, String des, integer fId, List <FunctionVO22> children) {this. id = id; this. name = name; this. url = url; this. des = des; this. fId = FId; this. children = children;} public String toMenu (FunctionVO22 childrenFunctions) throws Exception {JSONObject json = new JSONObject (); json. put ("text", childrenFunctions. getName (); json. put ("id", childrenFunctions. getId (); json. put ("url", childrenFunctions. getUrl (); json. put ("click", "itemclick"); JSONArray childrenJson = new JSONArray (); if (childrenFunctions. getChildren ()! = Null & childrenFunctions. getChildren (). size ()! = 0) {for (FunctionVO22 child: childrenFunctions. getChildren () {// childrenJson. add (toJson (child); childrenJson. add (toMenu (child);} json. put ("children", childrenJson);} return json. toString ();}/*** Function initialization static set value * @ return */public List <FunctionVO22> initFuncs () {List <FunctionVO22> menus = new ArrayList <FunctionVO22> (); List <FunctionVO22> baseInfoMenus = new ArrayList <FunctionVO22> (); list <FunctionVO22> componentMenus = new ArrayList <FunctionVO22> (); // set the first-level menu value to set baseInfoMenus statically. add (new FunctionVO22 (11, "Edit ComponentTpe", "findComponentType", "Edit ComponentTpe", 1, new ArrayList <FunctionVO22> (); baseInfoMenus. add (new FunctionVO22 (12, "Edit Category List", "findCategory", "Edit Category List", 1, new ArrayList <FunctionVO22> (); baseInfoMenus. add (new FunctionVO22 (13, "Edit Vendor List", "findVendor", "Edit Vendor List", 1, new ArrayList <FunctionVO22> (); baseInfoMenus. add (new FunctionVO22 (14, "Edit Customer List", "findCustomer", "Edit Customer List", 1, new ArrayList <FunctionVO22> (); baseInfoMenus. add (new FunctionVO22 (15, "Edit Device List", "findDevice", "Edit Device List", 1, new ArrayList <FunctionVO22> (); baseInfoMenus. add (new FunctionVO22 (16, "Edit Language List", "findLanguage", "Edit Language List", 1, new ArrayList <FunctionVO22> (); baseInfoMenus. add (new FunctionVO22 (17, "Edit OS List", "findOs", "Edit OS List", 1, new ArrayList <FunctionVO22> (); baseInfoMenus. add (new FunctionVO22 (18, "Edit Arch List", "findArch", "Edit Arch List", 1, new ArrayList <FunctionVO22> (); componentMenus. add (new FunctionVO22 (21, "Edit Component", "manageComponent_edit", "Edit Component", 2, null); componentMenus. add (new FunctionVO22 (22, "Component List", "manageComponent_list", "Component List", 2, null); menus. add (new FunctionVO22 (1, "BaseInfo Management", null, "BaseInfo Management", 0, baseInfoMenus); menus. add (new FunctionVO22 (2, "Component Management", null, "Component Management", 0, componentMenus); menus. add (new FunctionVO22 (3, "Project Management", null, "Project Management", 0, new ArrayList <FunctionVO22> (); return menus ;} // omit the corresponding get set Method //......}

In fact, there is nothing to say, as long as the obtained data format is in line with the format in the menu in ligerui.

 

2. string concatenation (here I only do the second level and do not add unlimited layers. In fact, this is also possible, as long as we find the regular format, write a recursive function that meets the conditions to call the function ):

Front-end page:

 

Var menuData; $. ajax ({url: '$ {baseURL}/showFunctionMenu2.action? ', Type: 'post', async: false, // synchronous request success: function (data) {// alert (data ); // convert the string to json menuData = eval ('+ data +') ;}}); mainMenu =$ ("# mainMenu "). ligerMenuBar ({width: 300, items: menuData,}); function itemclick (item) {alert (item. url );}

 

Background action:

Public void showFunctionMenu () throws Exception {// currently fixed as a level-2 menu // send the data required by ligerMenuBar to the front-end StringBuilder json = new StringBuilder (); json. append ("["); // obtain all the first-level Function lists <Function> functionList = functionService. getAllOneLevel (); // generates a level-1 Function // traverses and concatenates all level-1 functions for (int I = 0; I <functionList. size (); I ++) {json. append ("{text: \" "); json. append (functionList. get (I ). getFunctionDes (); json. append ("\", url: \ ""); json. append (functionList. get (I ). getFunctionUrl (); json. append ("\", click: itemclick, "); // json. append ("{text: \" function management \ ", url: \" www \ ", click: itemclick }"); // obtain the List of second-level functions corresponding to the first-level Function <Function> childrenList = functionService. getAllTwoLevel (functionList. get (I ). getFunctionId (); // has a level-2 Function if (childrenList. size ()> 0) {// json. append ("menu: {items: [{text: \" projectOne \ ", url: \" ww \ ", click: \" ee \ ",}],}, "); json. append ("menu: {items: ["); for (int i2 = 0; i2 <childrenList. size (); i2 ++) {// {text: 'Project management', url: "", click: "", menu: {items: [{text: 'projectone', url: "", click: "" ,}, {text: 'project2'},]}] ,},}, json. append ("{text: \" "); json. append (childrenList. get (i2 ). getFunctionDes (); json. append ("\", url: \ ""); json. append (childrenList. get (i2 ). getFunctionUrl (); json. append ("\", click: itemclick,}, ");} json. append ("],},");} json. append ("},");} json. append ("]"); // because it is a concatenated string, streams can be directly used to transmit strings instead of json data to transmit httpServletResponse. setContentType ("text/html; charset = UTF-8"); PrintWriter printWriter = httpServletResponse. getWriter (); printWriter. write (json. toString (); System. out. println (json. toString ());}

 

Okay, I'm sleepy. Let's take a note ........

 

Success: (the style of the drop-down menu in the api is ugly. I made a slight adjustment here)