Tree creation is not complex, but we usually do two or three layers. Such data generally comes from multiple tables, such as departments and employees.
However, this self-join table does not have a definite hierarchy and may be an infinite multi-level table.
For example, a is the superior of B, B is the superior of C, and C is the superior of d...
Each superior has several lower levels, which are dynamic.
To solve this problem, we mainly use JS knowledge.
You can use the innerhtml attribute of Div.
Of course, you can also use the table and append method.
The following uses the innerhtml attribute of Div to implement
The main idea is to use super to search for the DIV associated with the ID and Its super in the document. This div is its superiors and you can attach yourself to this Div.
In addition, by setting your own title, you save your parent ID
In order to see the layer-by-layer indent effect, the style of the DIV is set to 10px on the left.
+ And-implemented through the span in the Div. Here, the innerhtml of span is changed. You can also use an image to change the SRC of IMG.
When you click these + or-, a JS function will be called to input your own ID. This function will find its subordinates in all the divs of the document, because the title of each Div stores its parent ID, you can only find the title with its own ID.
Find these subordinates and set them to hide or display.
Create a table
Use tempdb
Go
Create Table TB
(
Id int primary key,
Name varchar (50) not null,
Super int references TB
)
Insert into TB values (1, 'head office ', null );
Insert into TB values (2, 'changsha branch ', 1 );
Insert into TB values (3, 'zhuzhou branch ', 1 );
Insert into TB values (4, 'xiangtan company', 1 );
Insert into TB values (5, 'Eastern Changsha points', 2 );
Insert into TB values (6, 'changsha South Region point', 2 );
Insert into TB values (7, 'points in the eastern part of Xiangtan ', 4 );
Insert into TB values (8, 'one location in the eastern area of Changsha ', 5 );
Insert into TB values (9, 'two points in eastern Changsha region', 5 );
Insert into TB values (10, 'three points in eastern Changsha region', 5 );
Insert into TB values (11, 'one place in the southern area of Changsha ', 6 );
Insert into TB values (12, 'two points in South Changsha ', 6 );
Insert into TB values (13, 'one location in the eastern part of Xiangtan ', 7 );
Insert into TB values (14, 'two points in the eastern part of Xiangtan ', 7 );
Insert into TB values (15, 'one city department in the east Changsha region', 8 );
Insert into TB values (16, 'one two-city department in the eastern area of Changsha ', 8 );
Select ID, name, isnull (super, 0) as super from TB order by super
Bytes -------------------------------------------------------------------------------------------------------------------------
Tree. jsp file
<% @ Page Language = "Java" Import = "Java. SQL. *, Java. util. * "pageencoding =" GBK "contenttype =" text/html; charset = GBK "iselignored =" false "%>
<%
// Obtain the database data, save it as a double-layer set, and put it in pagecontext
// This is consistent with the method obtained by using Dao and Servlet and put in the request.
Class. forname ("com. Microsoft. JDBC. sqlserver. sqlserverdriver ");
String url = "JDBC: Microsoft: sqlserver: // localhost: 1433; databasename = tempdb ";
Connection Cn = drivermanager. getconnection (URL, "sa", "sa ");
Statement ST = cn. createstatement ();
String SQL = "select ID, name, isnull (super, 0) as super from TB order by super ";
Resultset rs = st.exe cutequery (SQL );
Arraylist lstall = new arraylist ();
Arraylist lstline;
While (Rs. Next ()){
Lstline = new arraylist ();
Lstline. Add (Rs. getstring (1 ));
Lstline. Add (Rs. getstring (2 ));
Lstline. Add (Rs. getstring (3 ));
Lstall. Add (lstline );
}
Pagecontext. setattribute ("lstall", lstall );
%>
<SCRIPT>
// Initialization tree
Function INI (){
VaR STR = "$ {lstall }";
VaR ary = Str. Split ("], [");
VaR I, J;
VaR Len = ary. length;
VaR ary2, len2;
VaR STR, str2, OBJ;
For (I = 0; I <Len; I ++ ){
Ary [I] = ary [I]. Replace ("[[","");
Ary [I] = ary [I]. Replace ("]", "");
Ary2 = ary [I]. Split (",");
If (ary2 [2] = "0 "){
// Top layer: set its upper level to div0
OBJ = Document. getelementbyid ("div0 ");
// Define its own content and set its own visibility -- display: Block
// Span is used to determine + or-, and the OPE function is used to show or hide lower-level information when clicking
Str2 = "<Div style = 'display: block 'id = 'div "+ ary2 [0] +" '> <span id = 'span "+ ary2 [0] +" 'onclick = 'ope ("+ ary2 [0] + ") '> + </span> "+ ary2 [1] +" </div> ";
}
Else {
// Others: Find the parent, that is, the DIV whose ID is 'div '+ ary2 [2]
// For example, if ary2 [2] is 3, its parent is div3.
OBJ = Document. getelementbyid ("Div" + ary2 [2]);
// Define its own content, where title is used to store its parent ID and set itself invisible -- display: None
Str2 = "<Div style = 'display: none 'id = 'div "+ ary2 [0] +" 'title = '"+ ary2 [2] +"'> <span id = 'span "+ ary2 [0] + "'onclick = 'ope (" + ary2 [0] + ") '> + </span> "+ ary2 [1] +" </div> ";
}
STR = obj. innerhtml; // obtain the original content of the upper-level
STR = STR + str2; // append the current Div
OBJ. innerhtml = STR; // set the content of the parent
}
}
// Expand or hide a node
Function ope (ID ){
// First change + and-
VaR OBJ = Document. getelementbyid ("span" + id );
If (obj. innerhtml = "+ "){
OBJ. innerhtml = "-";
}
Else {
OBJ. innerhtml = "+ ";
}
// Locate the sublevel and change its visibility
VaR objs = Document. getelementsbytagname ("Div"); // obtain all Div
VaR Len = objs. length;
// Traverse these divs and find all the lower-level divs with the title ID.
// Hide the image if it is hidden. Otherwise, hide the image by setting the display of its style.
VaR I, title;
For (I = 0; I <Len; I ++ ){
OBJ = objs [I];
Title = obj. title;
If (Title = NULL | isnan (title )){
Continue;
}
If (parseint (title) = parseint (ID )){
If (obj. style. Display = "NONE "){
OBJ. style. Display = "Block ";
}
Else {
OBJ. style. Display = "NONE ";
}
}
}
}
</SCRIPT>
<Style>
Div {margin-left: 10px; color: darkblue}
SPAN {color: red; cursor: hand}
</Style>
<Body onload = "INI ();">
<Div id = "div0"> </div>
Bytes ------------------------------------------------------------------------------------------------------------------------------
You can further think about how to solve this problem when you actually click on a specific URL?
If you are familiar with HTML and JS, it is of course easy.
Idea: Add a field, URL, and define the link address to the table in the database.
Modify in JS Code
You can also consider making it a tag, which is more convenient.
