Use Dojo and JSON to create a function module tree for infinite AJAX Dynamic Loading

After reading the article "using hibernate to implement infinite classification of tree structures, I also want to share with you the implementation method of the function module tree used in all development projects and the complete DEMO (including the source code. In fact, I posted it in my blog early in the morning, because the time relationship is not well organized.
The function module tree is used in almost every project. The advantage of using Dojo is that it can realize dynamic loading of subnodes of the tree, this is useful when many Tree nodes exist.
Download the attachment dojotree.rar. decompress the package and deploy dist \ dojotree. war on the application server to view the DEMO. The DEMO contains a built-in HSQLDB database, which is automatically loaded upon startup. For details about how to run the DEMO, see Appendix 1.
I. Main tree. jsp code
1. First, import the Dojo Library (dojo. js) and TreeWidget in the head.
<Script> "text/javascript" src = "ajax/dojo. js">
<Script> "text/javascript">
Dojo. require ("dojo. widget. Tree ");
Dojo. require ("dojo. widget. TreeNode ");
Dojo. require ("dojo. widget. TreeSelector ");
Dojo. require ("dojo. widget. TreeRPCController ");
Dojo. require ("dojo. widget. TreeLoadingController ");
Dojo. require ("dojo. widget. TreeContextMenu ");
</Script>
2. Place the TreeWidget in the body. The RPCUrl = "treeServlet" in the TreeLoadingController is the name of the servlet that obtains data from the background. The expandLevel in the TreeNode indicates the initial opening level of the tree.
<Div dojoType = "TreeLoadingController" RPCUrl = "treeServlet" widgetId = "treeController" DNDController = "create"> <! -- </Span --> div>
<Div dojoType = "TreeSelector" widgetId = "treeSelector"> <! -- </Span --> div>
<Div dojoType = "Tree" DNDMode = "between" selector = "treeSelector" widgetId = "bandTree" controller = "treeController">
<Div dojoType = "TreeNode" title = "root" widgetId = "root" objectId = "root" isFolder = "true" childIconSrc = "images/comm.gif" expandLevel = "1 "/>
3. Create a TreeSelector event processing function
Function treeSelectFired (){
// Get a reference to the treeSelector and get the selected node
Var treeSelector = dojo. widget. manager. getWidgetById ('treeselector ');
Var treeNode = treeSelector. selectedNode;
// Get a reference to the songDisplay div
Var hostDiv = document. getElementById ("songDisplay ");
Var isFolder = treeNode ['isfolder'];
// Alert (isFolder );
If (! IsFolder ){
Var song = treeNode ['title'];
Var url = treeNode ['url'];
Link (url );
} Else {
}
}
4. Associate the select event processing function with the treeSelector.
Function init (){
// Get a reference to the treeSelector
Var treeSelector = dojo. widget. manager. getWidgetById ('treeselector ');
// Connect the select event to the function treeSelectFired ()
Dojo. event. connect (treeSelector, 'select', 'treeselectfired ');
}
Dojo. addOnLoad (init );
Ii. Main java code and Data Structure
1. tree attributes in Gnmk. java
Private String id;
Private String gnmkdm; // function module code
Private String gnmksm; // function module description
Private String gnmktb; // function module icon
Private String gnmklj; // function module path
Private String gnmkmc; // function module name
Private String gnmksj; // upper-level code of the function module
Private String gnmkbz; // function module flag ('n' is a leaf node)
2. HSQLDB Memory Database loading SQL (db. SQL)
Create table gnmk (id varchar, gnmkdm varchar, gnmkmc varchar, gnmklj varchar, gnmktb varchar, gnmkbz varchar, gnmksj varchar );
Insert into gnmk values ('d098a59f0b765c30010b765d6b780001 ', '01', 'level 1 directory 1', null, 'system.gif', 'y ','');
Insert into gnmk values ('d098a59f0b765e68010b765fda830001 ', '123', 'level 2 Directory 1', 'cxtjaction. do', 'system.gif ', 'n', '01 ');
Insert into gnmk values ('d098a59f0b765e68010b765fda830001 ', '000000', 'second-level directory 2', 'cxtjaction. do', 'system.gif ', 'n', '01 ');
Insert into gnmk values ('d098a59f0b765c30010b765d6b780002 ', '02', 'level 1 directory 2', null, 'system.gif', 'y ','');
Insert into gnmk values ('d098a59f0b765e68010b765fda830002 ', '123', 'level 2 Directory 1', 'cxtjaction. do', 'system.gif ', 'n', '02 ');
Insert into gnmk values ('d098a59f0b765e68010b765fda830002 ', '000000', 'second-level directory 2', 'cxtjaction. do', 'system.gif ', 'y', '02 ');
Insert into gnmk values ('d098a59f0b765e68010b765fda830002 ', '123', 'level 3 directory 1', 'cxtjaction. do', 'system.gif ', 'n', '123 ');
Insert into gnmk values ('d098a59f0b765e68010b765fda830002 ', '123', 'level 3 directory 2', 'cxtjaction. do', 'system.gif ', 'n', '123 ');
3. Main Code of TreeServlet. java. You can implement your own business in the getGnmkByParent (String gnmksj) method, and use GnmkDAO in the DEMO.
Public class TreeServlet extends HttpServlet {
Private static final long serialVersionUID = 1L;
Protected void doGet (HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String action = request. getParameter ("action ");
System. out. println ("action B =>" + action );
System. out. println ("action B =>" + action );
String data = request. getParameter ("data ");
If (action. Revoke signorecase ("getChildren ")){
JSONTokener jsonTokener = new JSONTokener (data );
JSONObject jsonObject = (JSONObject) jsonTokener. nextValue ();
JSONObject parentNodeObject = (JSONObject) jsonObject. get ("node ");
Response. setContentType ("text/json; charset = gb2312 ");
PrintWriter out = response. getWriter ();
Out. write (getChildren (parentNodeObject ));
} Else {
}
}
Private String getChildren (JSONObject parentNodeObject ){
JSONArray result = new JSONArray ();
String parentObjectId = parentNodeObject. getString ("objectId"); // id is unique
// String parentWidgetId = parentNodeObject. getString ("widgetId"); // dm
ParentObjectId = parentObjectId. Does signorecase ("root ")? ""
: ParentObjectId;
System. out. println ("parentObjectId =>" + parentObjectId );
// Obtain the sub-function module
List listGnmk = this. getGnmkByParent (parentObjectId );
System. out. println ("listGnmk =>" + listGnmk. size ());
If (listGnmk! = Null ){
Iterator itGnmk = listGnmk. iterator ();
While (itGnmk. hasNext ()){
Gnmk qxgnmk = (Gnmk) itGnmk. next ();
Try {
JSONObject jsonGnmkObject = new JSONObject ();
String gnmkbz = qxgnmk. getGnmkbz ();
Boolean isFolder = gnmkbz. equalsIgnoreCase ("Y ")? True
: False;
JsonGnmkObject. put ("title", qxgnmk. getGnmkmc ());
JsonGnmkObject. put ("isFolder", isFolder );
JsonGnmkObject. put ("widgetId", qxgnmk. getGnmkdm ());
JsonGnmkObject. put ("objectId", qxgnmk. getGnmkdm ());
JsonGnmkObject. put ("childIconSrc", "images /"
+ Qxgnmk. getGnmktb ());
JsonGnmkObject. put ("url", qxgnmk. getGnmklj ());
Result. put (jsonGnmkObject );
} Catch (JSONException e ){
E. printStackTrace ();
}
}
}
Return result. toString ();
}
Private List getGnmkByParent (String gnmksj ){
GnmkDAO gnmkDao = new GnmkDAO ();
Return gnmkDao. getGnmkByParent (gnmksj );
}
}
Iii. Other configurations of the DEMO
1. Implement the contextInitialized method of the javax. servlet. ServletContextListener interface to load HSQLDB and its data. Main Code of ContextListener. java
Public void contextInitialized (ServletContextEvent event ){
Try {
// Load the driver
Class. forName ("org. hsqldb. jdbcDriver ");
// Create the table and add sample data
InputStreamReader in = new InputStreamReader (getClass (). getClassLoader (). getResourceAsStream ("db. SQL "));
BufferedReader reader = new BufferedReader (in );
DBUtils. setupDatabase (reader );
} Catch (ClassNotFoundException e ){
E. printStackTrace ();
}
}
2. web. xml configuration
<Listener>
<Listener-class>
Dojo. sample. ContextListener
<! -- <Span class = "tag" --> <! -- </Span --> listener-class>
<! -- </Span -->
 
Download