Jsp/servlet dynamically loads Dtree using AJAX, Dtree style/Picture modifications (Java generates Dtree servlet JSON) __JS

From:http://www.cnblogs.com/kenkofox/archive/2011/03/28/1997638.html

(.....) In Ie,refreshtree's

Getjson do not refresh the problem, reference: http://www.cnblogs.com/kenkofox/archive/2011/04/02/2004101.html)

Originally I want to use Jstree or treeview this kind of jquery plug-ins, these plug-ins although the function is very powerful, but helpless, too fancy, need to learn a lot of configuration.

And for my application, it doesn't need fancy features like drag and drop, double click Rename, right-click menu, and so on.

Spent 2 days in learning Jstree and TreeView, are found not suitable, simply use the most original dtree, the effect is also good, and all the code simple, can be fully controlled under their own control.

Don't talk nonsense. To share here, I use Ajax to load Dtree, and the background servlet provides the JSON-formatted tree data. This procedure should be used to make a system navigation bar.

All code: Ajax,servlet Dynamic Loading Dtree.rar

Html:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML > < head > < meta HTTP-EQUIV = "Content-type" Content = "text/html"; Charset=utf8 "> < link rel =" StyleSheet "href ="./dtree/dtree.css "type =" Text/css "/> < script type =" Text/ja Vascript "src ="/dtree/dtree.js "></script > < script type =" Text/javascript "src ="./js/jquery-1.5.1.min.j S "></script > < script > Dtreepath = './dtree/'; I added this variable in the dtree.js to make it easy to adjust the IMG path//need to be set to Dtree directory location, under the IMG directory var tree; The tree must be a global variable $ (document). Ready (function () {Refreshtree ();}); * * * * * Click on the menu to set the URL for Javascript:showfolder (dir)/function Showfolder (dir) {alert (dir) in the JSON returned in the background servlet; function Refreshtree () {//Generate a new tree, Ajax way to get the latest trees, each JSON item represents a node $.getjson (' Onlinefilemanagerservlet ', function (dat a) {tree = new Dtree (' tree ');//parameter tree, which represents the tag of the ID in the generated HTML code, does not affect the function Tree.add (0,-1, ' network folder '); Root//traverse JSON for each entry $.each (data, function (entryindex,entry) {Tree.add (entry[' id '), entry[' pid '], entry[' NA Me '], entry[' url '); }); $ ("#treeDiv"). HTML (tree.tostring ());} </script >

Servlet: (about JSON, reference: http://www.cnblogs.com/kenkofox/archive/2011/03/25/1995436.html)

protected void ProcessRequest (HttpServletRequest request, httpservletresponse response) throws Servletexception, IOException {response.setcharacterencoding ("UTF-8"); PrintWriter out = Response.getwriter (); try {//Create JSON data jsonarray tree = new Jsonarray (); Jsonobject Node1 = new Jsonobject (); Node1.put ("id", "1"); Node1.put ("pid", "0"); Node1.put ("name", "Metal Product Inspection Report"); Node1.put ("url", "Javascript:showfolder ('" + "abc" + ")"); Jsonobject Node2 = new Jsonobject (); Node2.put ("id", "2"); Node2.put ("pid", "0"); Node2.put ("name", "Plastic Product Inspection Report"); Node2.put ("url", "Javascript:showfolder ('" + "abc" + ")"); Jsonobject node3 = new Jsonobject (); Node3.put ("id", "3"); Node3.put ("pid", "1"); Node3.put ("name", "Yangjiang Customs Inspection Report"); Node3.put ("url", "Javascript:showfolder ('" + "abc" + ")"); Jsonobject node4 = new Jsonobject (); Node4.put ("id", "4"); Node4.put ("pid", "3"); Node4.put ("Name", "checkTest report abc "); Node4.put ("url", "Javascript:showfolder ('" + "abc" + ")"); Jsonobject node5 = new Jsonobject (); Node5.put ("id", "5"); Node5.put ("pid", "2"); Node5.put ("name", "Test report 2"); Node5.put ("url", "Javascript:showfolder ('" + "abc" + ")"); Tree.put (Node1); Tree.put (Node2); Tree.put (NODE3); Tree.put (NODE4); Tree.put (NODE5); Out.write (Tree.tostring ()); System.out.println (Tree.tostring ()); The catch (Jsonexception ex) {Logger.getlogger (Onlinefilemanagerservlet. class. GetName ()). log (Level.severe, NULL, ex); finally {out.close ();}} Copy Code

In addition, Dtree code is relatively simple, on a JS and a CSS, you need to modify the picture to see the JS code, you need to modify the resulting tree style to modify the CSS