It's not complicated to do trees, but we usually do 2 or 3 layers, and that data comes from more than one table, such as: Department, employee
Yet this self-contained table, which has no definite level, may be infinitely multilevel
For example: A is the superior of B, B is the superior of C, C is the superior of D ...
Each superior has several subordinates, the subordinate level, all is the dynamic
Solve this problem, in fact, mainly used to the knowledge of JS
You can use the innerHTML property of a Div
Of course, you can use table, using the Append method
The following is implemented using the innerHTML attribute of Div
The main idea is through super, in the document to find the ID and its own super associated Div, this div is its own superiors, attach themselves to this div can be
In addition, by setting their own title, save their superiors ID
In order to see the layer indentation effect, the Div's style is set to the left margin with 10px
+ and-through the span of the div implementation, where the change is span of innerHTML, can also be changed to use the picture, change the img SRC can
While clicking on these + or-, will call a JS function, passing in their ID, this function will be in the document of all div to find their subordinates, because each div title saved its superior ID, so only to find those title for their own ID on it
Find these subordinates and set them to hide or show
Building a table
Use tempdb
Go
CREATE TABLE TB
(
ID int PRIMARY KEY,
Name varchar 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, ' Changsha Eastern District Points ', 2);
INSERT into TB values (6, ' Changsha Southern District Points ', 2);
INSERT into TB values (7, ' Xiangtan East Point ', 4);
INSERT into TB values (8, ' Changsha East District points one place ', 5);
INSERT into TB values (9, ' Changsha Eastern District points two ', 5);
INSERT into TB values (10, ' Changsha Eastern District points three ', 5);
INSERT into TB values (11, ' Changsha Southern District points one place ', 6);
INSERT into TB values (12, ' Changsha Southern District points two ', 6);
INSERT into TB values (13, ' Xiangtan East District points one place ', 7);
INSERT into TB values (14, ' Xiangtan Eastern Division points two ', 7);
INSERT into TB values (15, ' Changsha East District points a retail outlet ', 8);
INSERT into TB values (16, ' Changsha Eastern District points a two retail outlet ', 8);
Select Id,name,isnull (super,0) as Super from TB order by super
--------------------------------------------------------------------------------------------------------------- ----------
tree.jsp file
<%@ page language= "java" import= "java.sql.*,java.util.*" pageencoding= "GBK" contenttype= "text/html"; CHARSET=GBK "iselignored= false"%>
<%
Get the data for the database and save it as a two-tier collection and put it in the PageContext
This is consistent with what you get from using DAO and the servlet 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 Terabytes order by Super";
ResultSet rs = st.executequery (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>
Initialize 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 level: Set its superior to Div0
obj = document.getElementById ("Div0");
Define its own content, set itself visible--Display:block
span is used to determine the + or-, and the Ope function is used to show or hide subordinates when clicked
str2 = "<div style= ' display:block ' id= ' div" + ary2[0] + "' ><span id= ' span" + ary2[0] + "' onclick= ' ope (" + ary2[0 ] + ") ' >+</span>" + ary2[1] + "</div>";
}
else {
Other: Find its superior, that is: The ID is ' div ' + ary2[2] Div
For example: If ARY2[2] is 3, then its superior is DIV3
obj = document.getElementById ("div" + ary2[2]);
Defines its own content, where title is used to store its ancestor ID, and the setting itself is not visible--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; Get the original content of the superior
str = str + str2; Append current Div
obj.innerhtml = str; Set up new content for superiors
}
}
When you click a node, expand or hide its subordinates
function Ope (ID) {
First change + and-
var obj = document.getElementById ("span" + ID);
if (obj.innerhtml = = "+") {
obj.innerhtml = "-";
}
else {
obj.innerhtml = "+";
}
Then find the subordinate and change its visibility
var objs = document.getelementsbytagname ("div"); Get all the div
var len = objs.length;
Traverse these Div, find all subordinate, namely: title for ID Div, for these subordinate
If it turns out to be hidden, let it show; otherwise, hide--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>
--------------------------------------------------------------------------------------------------------------- ---------------
We can further think, the actual point of each content, usually linked to a URL, then, how to deal with this?
If you're familiar with HTML and JS, of course it's easy.
Idea: Add a field to the table in the database, URL, define the link address
Modify the code in JS
You can also consider making it a label, more convenient
