Using dojo and JSON to build an infinite class of Ajax dynamically loaded function module tree _dojo

Source: Internet
Author: User
Tags require
After reading the article "using Hibernate to realize the tree structure infinite level classification", I also want to post and share the complete demo (including source code) of the functional module tree that I use in all the projects I developed. In fact, in my blog has been posted, due to the time relationship did not properly tidy.
The functional module tree is something that is used in almost every project, and the advantage of using dojo is that it is possible to dynamically load the child nodes of the tree, which is useful in the case of many tree nodes.
Download Annex II Dojotree.rar, after decompression will Dist\dojotree.war deployed to the application server can browse the Demo,demo built-in HSQLDB database, automatic loading when starting. Demo run screenshot see annex I.
First, tree.jsp main code
1, first in the head to import Dojo Library (dojo.js) and Treewidget
<script> "Text/javascript" src= "Ajax/dojo/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, in the body to place the Treewidget,treeloadingcontroller in the Rpcurl= "Treeservlet" for the background to obtain data from the servlet name, Expandlevel in TreeNode represents 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. Establish Treeselector event handler 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 handler function to 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);
Second, the main Java code and data structure
1, the property of tree in Gnmk.java
Private String ID;
Private String GNMKDM; Function Module Code
Private String gnmksm; Functional Module Description
Private String GNMKTB; Function Module icon
Private String Gnmklj; Functional Module Path
Private String GNMKMC; Function Module Name
Private String gnmksj; Function Module Superior Code
Private String gnmkbz; Function Module flag (' N ' is a leaf node)
2, HSQLDB Memory Database load SQL (DB.SQL)
CREATE TABLE gnmk ID VARCHAR, GNMKDM VARCHAR, GNMKMC VARCHAR, Gnmklj VARCHAR, GNMKTB VARCHAR, Gnmkbz VARCHAR, GNMKSJ Varc HAR);
INSERT into Gnmk VALUES (' d098a59f0b765c30010b765d6b780001 ', ' 01 ', ' directory 1 ', NULL, ' system.gif ', ' Y ', ');
INSERT into Gnmk VALUES (' d098a59f0b765e68010b765fda830001 ', ' 0101 ', ' Level two ' directory 1 ', ' cxtjaction.do ', ' system.gif ', ' N ', ' 01 ');
INSERT into Gnmk VALUES (' d098a59f0b765e68010b765fda830001 ', ' 0102 ', ' Level two ' directory 2 ', ' cxtjaction.do ', ' system.gif ', ' N ', ' 01 ');
INSERT into Gnmk VALUES (' d098a59f0b765c30010b765d6b780002 ', ' 02 ', ' Directory 2 ', NULL, ' system.gif ', ' Y ', ');
INSERT into Gnmk VALUES (' d098a59f0b765e68010b765fda830002 ', ' 0201 ', ' Level two ' directory 1 ', ' cxtjaction.do ', ' system.gif ', ' N ', ' 02 ');
INSERT into Gnmk VALUES (' d098a59f0b765e68010b765fda830002 ', ' 0202 ', ' Level two ' directory 2 ', ' cxtjaction.do ', ' system.gif ', ' Y ', ' 02 ');
INSERT into Gnmk VALUES (' d098a59f0b765e68010b765fda830002 ', ' 020201 ', ' Level three ' directory 1 ', ' cxtjaction.do ', ' system.gif ', ' N ', ' 0202 ');
INSERT into Gnmk VALUES (' d098a59f0b765e68010b765fda830002 ', ' 020202 ', ' Level three ' directory 2 ', ' cxtjaction.do ', ' system.gif ', ' N ', ' 0202 ');
3, Treeservlet. Java main code, in the Getgnmkbyparent (String gnmksj) method can implement their own business, demo use Gnmkdao
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.equalsignorecase ("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 Unique
String Parentwidgetid = parentnodeobject.getstring ("Widgetid");//DM
Parentobjectid = parentobjectid.equalsignorecase ("root")? ""
: Parentobjectid;
System.out.println ("parentobjectid=>" + Parentobjectid);
Get the child 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);
}
}
Third, on the demo of other configuration instructions
1, the implementation of Javax.servlet.ServletContextListener interface contextinitialized method to load HSQLDB and its data, Contextlistener.java main code
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 related configuration
<listener>
<listener-class>
Dojo.sample.ContextListener
<!--<span class= "tag"--><!--</span-->listener-class>
<!--</span-->>

Download
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.