Use extjs2 to asynchronously read data using JSON (JavaScript Object Notation) treeloader to construct an asynchronously loaded tree
1. Download extjs2, address: http://www.extjs.com/
Download ext JS 2.1 SDK: ext-2.2.zip.
The examples folder contains all the extjs demo programs.
Extjs2 mainly will use the following files: ext-all.css, ext-base.js, ext-all.js, use method can refer to demo.
EXT document center:
Http://www.ajaxjs.com/docs/docs/
Http://www.jackytsu.com/extcn/docs/
2. Download JSON-lib, address: http://json-lib.sourceforge.net/
After the URL is opened, there is a line on the homepage:
JSON-lib requires (at least) the following dependencies in your classpath:
Jakarta commons-lang 2.3
Jakarta commons-beanutils 1.7.0
Jakarta commons-collections 3.2
Jakarta commons-logging 1.1.1
Ezmorph 1.0.4
Download the JAR file and use it with JSON-lib.
Commons: http://commons.apache.org/
Ezmorph: http://ezmorph.sourceforge.net
Or, go to the http://www.docjar.com to search for the download.
For more information about JSON usage, see related documents.
3. Use extjs to write the tree. js file.
For more information about Ext. Tree. treepanel, see:
Http://www.jackytsu.com/extcn/docs/output/Ext.tree.TreePanel.html
The tree. js code is as follows:
--------------------------
Ext. onready (function (){
VaR tree = ext. tree;
// Define the loader of the Root Node
VaR treeloader = new tree. treeloader ({dataurl: 'tree. jsp? Did = 1 '});
// Asynchronously load the root node
VaR rootnode = new tree. asynctreenode ({
ID: '1 ',
Text: 'Directory root node'
});
VaR treepanel = new tree. treepanel ({
// Renderto: "tree_div", // if you use renderto, you cannot use the setrootnode () method. You need to set the root attribute in treepanel.
El: 'tree _ Div ', // fill area
Rootvisible: True, // hide the root node
Border: True, // border
Animate: True, // animation effect
Autoscroll: True, // auto scroll
Enabledd: false, // drag a node
Containerscroll: True,
Loader: treeloader
});
// Set the root node
Treepanel. setrootnode (rootnode );
// Respond to the event and pass the node Parameter
Treepanel. On ('beforeload ',
Function (node ){
Treepanel. loader. dataurl = 'tree. jsp? Did = '+ node. ID; // defines the loader of the child node.
});
Treepanel. Render ();
Rootnode. Expand (false, false );
});
-----------------------------------
4. display the extjstree. jsp file of the tree. The JSP file calls tree. js to display the tree.
Examples use the ext-all.css, ext-base.js, ext-all.js these three files.
The extjstree. JSP code is as follows:
--------------------------------------
<HTML>
<Head>
<Title> extjs tree </title>
<LINK rel = "stylesheet" type = "text/CSS" href = "../extjs/ext-all.css"/>
<SCRIPT type = "text/JavaScript" src = "../extjs/ext-base.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "../extjs/ext-all.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "../extjs/mytree. js" Defer = true charset = "GBK"> </SCRIPT>
</Head>
<Body>
<Table width = "100%" Height = "100%" border = "0" cellpadding = "0" cellspacing = "0" oncontextmenu = "Return false;">
<Tr>
<TD align = left valign = "TOP">
<! -- Tree Filling Area -->
<Div id = "tree_div" style = "height: 101%; width: 100%"> </div>
</TD>
</Tr>
</Table>
</Body>
</Html>
--------------------------------------
5. Construct a tree node.
Defines the attributes of a tree node, including the node ID, text, icon, whether it is a leaf node, and whether it is expanded.
The jsontreenode. Java code is as follows:
--------------------------------------
Package com. tree;
Import java. Io. serializable;
Public class jsontreenode implements serializable {
Private Static final long serialversionuid = 1l;
Public static void main (string [] ARGs ){
}
Private string ID; // ID
Private string text; // node display
Private string CLS; // icon
Private Boolean leaf; // whether it is a leaf
Private string href; // link
Private string hreftarget; // link
Private Boolean expandable; // whether to expand
Private string description; // description
// Get and set methods. .
}
}
--------------------------------------
6. query from the database, read byte data, and construct JSON data.
The jsontree. Java code is as follows:
--------------------------------------
Package com. tree;
Import java. SQL. connection;
Import java. SQL. statement;
Import java. SQL. resultset;
Import java. util. arraylist;
Import net. SF. JSON. jsonarray;
Import com. DB. dbconnction;
Import com. Tree. jsontreenode;
Public class jsontree {
Private string PID;
Public String getjsonstring (){
Connection conn = NULL;
Statement ST = NULL;
Resultset rs = NULL;
Arraylist <jsontreenode> treenodearray = NULL;
String sqlstring = "select * From s_mls where pid =" + this. PID + "order by did ";
Try
{
Conn = dbconnction. getconnection ();
St = conn. createstatement ();
Rs = st.exe cutequery ("select PID from s_mls where pid> 0 group by PID order by PID ");
Stringbuffer parentidbuffer = new stringbuffer ();
Parentidbuffer. append ("| ");
While (Rs. Next ())
{
Parentidbuffer. append (Rs. getstring ("PID "));
Parentidbuffer. append ("| ");
}
// Obtain the list of all parentdids (this is a clever algorithm ^_^)
String parentidstring = parentidbuffer. tostring ();
Rs = st.exe cutequery (sqlstring );
Treenodearray = new arraylist <jsontreenode> ();
While (Rs. Next ())
{
Jsontreenode treenode = new jsontreenode ();
Treenode. setid (Rs. getstring ("did "));
Treenode. settext (Rs. getstring ("jdmc "));
Treenode. setdescription (Rs. getstring ("jdmc "));
Treenode. sethref ("rightframe. jsp? Did = "+ Rs. getstring (" did "). tostring ());
Treenode. sethreftarget ("rightframe ");
If (parentidstring. indexof ("|" + Rs. getstring ("did") + "|")> = 0) // parent node
{
Treenode. setcls ("folder ");
Treenode. setleaf (false );
Treenode. setexpandable (false );
}
Else // subnode
{
Treenode. setcls ("file ");
Treenode. setleaf (true );
Treenode. setexpandable (false );
}
Treenodearray. Add (treenode );
}
Jsonarray = jsonarray. fromobject (treenodearray); // obtain the JSON array.
Return jsonarray. tostring (); // return JSON data
}
Catch (exception E)
{
System. Out. println ("getjsonstring () of jsontree. Java throws:" + E. tostring ());
Return "";
}
Finally
{
Dbconnction. closeconnection (Conn, St, RS );
}
}
Public String getpid (){
Return PID;
}
Public void setpid (string PID ){
PID = PID;
}
}
--------------------------------------
7. Tree. jsp called by treeloader of extjs in tree. js.
After you click treenode in the directory tree, the next level of nodes will be loaded.
Extjstree. jsp is responsible for clicking treenode and returning JSON data constructed by the next-level node.
The extjstree. JSP code is as follows:
--------------------------------------
<% @ Page Language = "Java" pageencoding = "GBK" %>
<JSP: usebean class = "com. thams. Tree. jsontree" id = "jsontree"> </jsp: usebean>
<%
String pid = "";
If (request. getparameter ("did ")! = NULL)
{
PID = request. getparameter ("did"). tostring ();
}
Jsontree. setpid (PID );
%>
<% = Jsontree. getjsonstring () %>
--------------------------------------
8.
1) if you want to use the demo of extjs tree, do not use static JSON format files when generating treeloader.
For example:
Tree. treeloader ({dataurl: '/jsondata.txt '});
Tree. treeloader ({dataurl: '/jsondata. js '});
And so on.
During online data query and extjs tree creation, many materials say that static JSON files are used for demo and I use extjs2.1, but none of them are successful at a time.
This wastes a lot of time and energy, causing a heavy cost.
2) When using JSON, some jar files are required for use.
Many of the files downloaded from the Internet are zip files, which were not considered at the time. Based on previous experience, you can directly change the suffix to jar and import the files to the Lib folder. An error is returned.
For example:
Javax. servlet. servletexception: ORG/Apache/commons/lang/exception/nestableruntimeexception
Java. Lang. noclassdeffounderror: ORG/Apache/commons/lang/exception/nestableruntimeexception
In fact, the real JAR file can be obtained only after the ZIP file is decompressed. Low-level error.
3). About the s.gif File
This problem is exposed without the Internet connection of the system.
Because extjs always accesses the s.gif image file http://extjs.com/s.gif by default when generating a tree.
The navigation image of the Tree node cannot be displayed without network connection. The right-click attribute shows that it is http://extjs.com/s.gif.
After searching, we can find that the s.gif is defined in the ext-base.js file:
Blank_image_url: "http:/" + "/extjs.com/s.gif"
In addition, the example program in extjs contains the s.gif image file.
Modify the ext-base.js:
Blank_image_url: "../images/default/s.gif"
4). When debugging, JS reports an error: A String constant that has not ended.
This problem occurs because the character set is not specified during JS calls, causing garbled characters in Js.
When calling JS, you can specify the character set.
For example, <SCRIPT type = "text/JavaScript" Defer = true src = "XXX. js" charset = "GBK">
9. Ajax
Ajax: Asynchronous JavaScript and XML (Asynchronous JavaScript and XML)
I only want to learn extjs for the tree.
Extjs2.1 + JSON = dynamically asynchronously loaded tree
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
