Create an infinite hierarchy of trees with pure JSP

Many people have encountered this problem during Development: A table has its own number, content, and superior number. How can we use this data to construct a tree in JSP?
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.

<% @ Page Language = "Java" Import = "Java. SQL. *, Java. util. * "pageencoding =" GBK "contenttype =" text/html; charset = GBK "iselignored =" false "%>
<% @ Taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "C" %>

<%

// Simulate database data
// Infinite Hierarchy Tree-Author: nimmy needs: jstl standard tag Library
// Simulate database data: each row of data includes the self ID, self content, and parent ID.
Arraylist ary = new arraylist (); // all data

String [] ary1 = new string [] {"1", "Item1", "0"}; // data in each row
Ary. Add (ary1 );
Ary1 = new string [] {"2", "item2", "0 "};
Ary. Add (ary1 );
Ary1 = new string [] {"3", "item3", "0 "};
Ary. Add (ary1 );
 
Ary1 = new string [] {"4", "item1_1", "1 "};
Ary. Add (ary1 );
Ary1 = new string [] {"5", "item1_2", "1 "};
Ary. Add (ary1 );
 
Ary1 = new string [] {"6", "item1_2_1", "5 "};
Ary. Add (ary1 );
Ary1 = new string [] {"7", "item1_2_2", "5 "};
Ary. Add (ary1 );
 
Ary1 = new string [] {"8", "item2_1", "2 "};
Ary. Add (ary1 );
 
Ary1 = new string [] {"9", "item2_1_1", "8 "};
Ary. Add (ary1 );
 
Ary1 = new string [] {"10", "item2_2", "2 "};
Ary. Add (ary1 );
 
Ary1 = new string [] {"11", "item3_1", "3 "};
Ary. Add (ary1 );
Ary1 = new string [] {"12", "item3_2", "3 "};
Ary. Add (ary1 );
 
Request. setattribute ("lstall", Ary );

%>

 

<SCRIPT>

// Initialization tree
Function INI (){
VaR STR, str2, OBJ;
<C: foreach items = "$ {lstall}" Var = "row">
<C: Set Var = "isshow" value = "Block"/>
<C: Set Var = "sope" value = "+"/>
<C: If test = "$ {row [2]! = '0'} "> <% -- Non-root nodes are not displayed -- %>
<C: Set Var = "isshow" value = "NONE"/>
</C: If>
// Alert ("$ {row [2]} -- $ {isshow} -- $ {SPE }");
OBJ = Document. getelementbyid ("Div $ {row [2]}"); // parent Div
// Itself
Str2 = "<Div style = 'display: $ {isshow} 'id = 'div $ {row [0]} 'Title =' $ {row [2]} '> <span id = 'span $ {row [0 ]} 'onclick = 'ope ($ {row [0]}) '>$ {sope} </SPAN >$ {row [1]} </div> ";

STR = obj. innerhtml; // obtain the original content of the upper-level
STR = STR + str2; // Add yourself
OBJ. innerhtml = STR; // use the appended string to set the new content of the upper-level.
</C: foreach>
}

 

// 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 lower-level [Div with title ID] 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 ();">
<! -- First, there should be div0. Here 0 is the parent Number of the root node. You can set it to the corresponding data in your own data. -->
<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 code in JS

Certificate ----------------------------------------------------------------------------------------------------------------------------------------

You can also consider making it a tag, which is more convenient.