Dynamic Loading of tree in extjs

Source: Internet
Author: User
After several days of hard work, I finally got it done. I dynamically connected the database to load the node in the tree ticket. I also checked a lot of information on the Internet. Unfortunately, I basically reprinted it all. It looks very troublesome. At first glance, I felt dizzy and did nothing. I finally found a simple method, but it was still not easy to use and I had to rely on myself. Finally I put them Code For a comprehensive reference, It's okay after sorting it out, although it's a bit messy.
Database Table Design
Drop table treenode;
Create Table treenode (
TID int not null primary key,
Parentid int,
Text char (16) not null,
Href char (32)
);
Insert into treenode (TID, parentid, text, href) values (-100, -100,'01', 'hello.html ');
Insert into treenode (TID, parentid, text, href) values (1, -100,'01', 'hello.html ')
Insert into treenode (TID, parentid, text, href) values (2,-100, '02', 'hello.html ')
Insert into treenode (TID, parentid, text, href) values (3,-100, '03', 'hello.html ')
Insert into treenode (TID, parentid, text, href) values (4, '04', 'hello.html ')
Insert into treenode (TID, parentid, text, href) values (5, 1, '05', 'hello.html ')
Insert into treenode (TID, parentid, text, href) values (6, 2, '02-01', 'hello.html ')
Insert into treenode (TID, parentid, text, href) values (7, 2, '02-01 ', 'hello.html ')
Insert into treenode (TID, parentid, text, href) values (8, 3,'03-01', 'hello.html ')
Insert into treenode (TID, parentid, text, href) values (9, 3,'03-02', 'hello.html ')
Insert into treenode (TID, parentid, text, href) values (10, 3, '03-03', 'hello.html ')
Extjs code:
Ext. onready (function (){
VaR tree = ext. tree;
VaR treeloader = new tree. treeloader ({dataurl: 'servlet/treeaction? Tid =-100 '});
// Define the nodes of the tree
VaR root = new Ext. Tree. asynctreenode ({
ID: "-100", // root node ID
Draggable: false,
Expanded: True,
Text: "background management"
});

// Generate a tree panel
VaR tree = new Ext. Tree. treepanel ({
Renderto: 'tree ',
Root: Root, // locate the root node
Width: 150,
Height: 300,
Animate: True, // enable the animation effect
Enabledd: false, // sub-nodes cannot be dragged.
Autoscroll: True,
Loader: treeloader
// Border: false, // no border
// Rootvisible: false // if it is set to false, the root node is hidden,
});

Tree. setrootnode (Root );
Tree. On ('beforeload ',
Function (node ){
Tree. loader. dataurl = 'servlet/treeaction? Tid = '+ node. ID; // defines the loader of the child node
});
Tree. Render ();
Root. Expand ();

});
Java code:

// Return the ID of the parent node from the database
String SQL = "select parentid from treenode where parentid> 0 group by parentid order by parentid ";
Stringbuilder S = new stringbuilder ();
Preparedstatement PST = NULL;
Resultset rs = NULL;
Try {
Pst = conn. preparestatement (SQL );
Rs = pst.exe cutequery ();

While (Rs. Next ())
{
S. append ('| ');
S. append (Rs. getint ("parentid "));
}
} Catch (sqlexception e ){
E. printstacktrace ();
}
Return S;
}
// Return the jsonarray String object class from the database
Stringbuilder S = This. getresulsetrow (conn );
Arraylist Al = new arraylist ();
Stringbuilder node = new stringbuilder ("[");
String SQL = "select * From treenode where parentid =" + PID + "order by TID ";
Statement PST = NULL;
Resultset rs = NULL;
Try {
Pst = conn. createstatement (resultset. type_scroll_insensitive, resultset. concur_read_only );
Rs = pst.exe cutequery (SQL );
Rs. Last ();
Int I = Rs. getrow ();
System. Out. println (I );
Rs. First ();
While (Rs. Next ())
{

String P = string. valueof (Rs. getint ("TID "));
Node. append ("{ID: '" + P + "', text: '" + Rs. getstring ("text "). trim () + "', href:'" + Rs. getstring ("href "). trim () + "',");
// The set and get methods are not used. It seems that they are not easy to use. Here I use my own method,
// Treenode TD = new treenode ();
// TD. settid (Rs. getint ("TID "));
// TD. settext (Rs. getstring ("text"). Trim ());
// TD. sethref (Rs. getstring ("href"). Trim ());
If (S. indexof ("|" + P + "| ")! =-1 ){
Node. append ("CLS: 'folder', leaf:" + false + "}");
// TD. setcls ("folder ");
// TD. setleaf (false );

} Else {

Node. append ("CLS: 'file', leaf:" + true + "}");
// TD. setcls ("file ");
// TD. setleaf (true );
}
Int ROW = Rs. getrow ();
System. Out. println (ROW );
If (row <I ){
Node. append (",");

}

// Al. Add (TD );
}

} Catch (sqlexception e ){
E. printstacktrace ();
}
Node. append ("]");
Return node;

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.