Use extjs to implement dynamic load tree)
1. Database Background: There is an organizational unit table with the following structure:
Oracle DDL script:
Create Table Organization (
Orgid number (10) Not null,
Parentid number (10) Not null,
Orgname varchar2 (32) not null,
Isavailable number (1) default 1 not null
);
Alter table Organization
Add constraint pk_orgid primary key (orgid );
Alter table Organization
Add constraint fk_orgid_parentid foreign key (parentid)
References Organization (orgid );
Initialize the data content (note that the first line of data is required ):
Insert into loon_organization (orgid, parentid, orgname, isavailable) values (-100,-100, 'Organizational unit fig', 1 );
Insert into loon_organization (orgid, parentid, orgname, isavailable) values (1,-100, 'headquarters 1', 1 );
Insert into loon_organization (orgid, parentid, orgname, isavailable) values (2,-100, 'headquarters 2', 1 );
Insert into loon_organization (orgid, parentid, orgname, isavailable) values (3,-100, 'Company headquarters 3', 1 );
Insert into loon_organization (orgid, parentid, orgname, isavailable) values (4, 1, 'headquarters 1-1 ', 1 );
Insert into loon_organization (orgid, parentid, orgname, isavailable) values (5, 1, 'headquarters 1-2 ', 1 );
Insert into loon_organization (orgid, parentid, orgname, isavailable) values (6, 2, 'corporate headquarters 2-1 ', 1 );
Insert into loon_organization (orgid, parentid, orgname, isavailable) values (7, 2, 'Company headquarters 2-2 ', 1 );
Insert into loon_organization (orgid, parentid, orgname, isavailable) values (8, 3, 'headquarters 3-1 ', 1 );
Insert into loon_organization (orgid, parentid, orgname, isavailable) values (9, 3, 'headquarters 3-2 ', 1 );
With the support of the database, tree data can be dynamically extracted from the database.
The first step is to create a JSP file (Org. jsp) and a javascript (Org. JS) file:
Import the library files necessary for extjs in org. jsp, and add
<Body>
<Div id = "tree-Div" style = "overflow: auto; Height: 300px; width: 200px; Border: 2px solid # c3daf9;"> </div>
</Body>
The Org. jsp file can be a static html file. Here, org. jsp does not contain any dynamic content. Pay attention to the library file class library path required by extjs.
Org. js file content:
Ext. onready (function (){
VaR tree = ext. tree;
VaR tree = new tree. treepanel ({
El: 'tree-Div ', // target Div container
Autoscroll: True,
Animate: True,
Enabledd: True,
Containerscroll: True,
Loader: new tree. treeloader ({
Dataurl: 'orgtreejsondata. action '// orgtreejsondata. action is the request address for dynamic data loading. Here, a value with the parameter "Node" is submitted during the request, and the value "root" is the new tree. ID value of the asynctreenode () object
})
});
VaR root = new tree. asynctreenode ({
Text: 'Organization Tree ',
Draggable: false,
ID: '-100' // default node value :? Node =-100
});
Tree. setrootnode (Root );
Tree. Render ();
Root. Expand ();
});
Example of JSON data requested by orgtreejsondata. Action:
[{
"Text": "headquarters 1 ",
"ID": "1 ",
"CLS": "folder"
},{
"Text": "Corporate Headquarters 2 ",
"ID": "2 ",
"CLS": "folder"
},{
"Text": "company headquarters 3 ",
"ID": "3 ",
"CLS": "folder"
}]
The server can use this SQL statement to query:
Select T. orgid, T. orgname, T. parentid from Organization T
Where T. parentid = '-100' and T. orgid! = '-100'
The following code snippet is used in the struts2 action class:
Public String treenode (){
Try {
List <object []> List = This. organizationservice. findbyparentid (this. node );
If (list! = NULL &&! List. isempty ()){
Boolean isfirst = true;
Int I = 0;
Int last = List. Size ();
For (object [] O: List ){
If (I = 0 ){
This. setjsonstring ("[{/" text/":/" "+ O [1]. tostring () + "/",/"ID/":/"" + O [0]. tostring ()
+ "/",/"CLS/":/"folder /"}");
} Else if (I = (last-1 )){
This. setjsonstring (this. getjsonstring () + ", {/" text/":/" "+ O [1]. tostring () + "/",/"ID /":/""
+ O [0]. tostring () + "/",/"CLS/":/"folder/"}] ");
} Else {
This. setjsonstring (this. getjsonstring () + ", {/" text/":/" "+ O [1]. tostring () + "/",/"ID /":/""
+ O [0]. tostring () + "/",/"CLS/":/"folder /"}");
}
I ++;
}
} Else {
This. setjsonstring ("");
}
System. Out. println (this. getjsonstring ());
} Catch (exception e ){
// Todo auto-generated Catch Block
E. printstacktrace ();
Return this. input;
}
Return this. success;
}
Runtime diagram:
Article Source: DIY tribe (http://www.diybl.com/course/1_web/javascript/jsjs/2008624/127992.html)
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
