Pure jsp creates infinite levels of tree code


It’s not complicated to build a tree, but we usually do two or three layers. Such data usually comes from multiple tables, such as departments and employees
However, this self connected table, which has no definite hierarchy, may be infinite multi-level
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 subordinates. The hierarchy of subordinates is dynamic
In fact, the knowledge of JS is mainly used to solve this problem
You can use the innerHTML attribute of Div
Of course, you can also use table and append
The following is implemented with the innerHTML attribute of Div
The main idea is to use super to find the div associated with its ID and super in the document. This div is its superior. Just attach yourself to this Div
In addition, you can save the ID of your superior by setting your own title
In order to see the indentation effect of layers, set the div style to 10px on the left margin
+And – through the span implementation in div, the innerHTML of span can be changed here, or the SRC of img can be changed with pictures
When you click these + or -, you will call a JS function and pass in your own ID. this function will find your subordinates in all divs in the document. Since the title of each div saves the ID of its superior, you can only find those whose title is your own ID
Find these subordinates and set them to be hidden or displayed
Build table
use tempdb
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, ‘Changsha East Point’, 2);
Insert into TB values (6, ‘Changsha South District’, 2);
Insert into TB values (7, ‘Xiangtan East Point’, 4);
Insert into TB values (8, ‘Changsha East sub district 1’, 5);
Insert into TB values (9, ‘Changsha East Point 2’, 5);
Insert into TB values (10, ‘three points in Changsha East District’, 5);
Insert into TB values (11, ‘Changsha South sub district 1’, 6);
Insert into TB values (12, ‘Changsha South sub point 2’, 6);
Insert into TB values (13, ‘one point in Xiangtan East District’, 7);
Insert into TB values (14, ‘Xiangtan East sub point 2’, 7);
Insert into TB values (15, ‘one store and one marketing department in Changsha East District’, 8);
Insert into TB values (16, ‘second Marketing Department of No. 1 branch in Changsha East District’, 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 of the database, save it as a double-layer collection, and then put it into pagecontext
//This is consistent with the method of putting in the request obtained by using DAO and servlet
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.executeQuery(sql);
ArrayList lstAll = new ArrayList();
ArrayList lstLine;
while(rs.next()) {
lstLine = new ArrayList();
//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 level: set its parent 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 subordinates when clicked
str2 = “<div style=’display:block’ id=’div” + ary2[0] + “‘><span id=’span” + ary2[0] + “‘ onclick=’ope(” + ary2[0] + “)’>+</span>&nbsp;&nbsp;” + ary2[1] + “</div>”;
else {
//Other: find its parent, that is, div with ID ‘div’ + ary2 [2]
//For example, if ary2 [2] is 3, its superior is div3
obj = document.getElementById(“div” + ary2[2]);
//Define its own content, where title is used to store its parent ID and set its own invisibility — display: none
str2 = “<div style=’display:none’ id=’div” + ary2[0] + “‘ title='” + ary2[2] + “‘><span id=’span” + ary2[0] + “‘ onclick=’ope(” + ary2[0] + “)’>+</span>&nbsp;&nbsp;” + ary2[1] + “</div>”;
str = obj.innerHTML; // Get the original content of the superior
str = str + str2; // Attach current div
obj.innerHTML = str; // Set up new content for superior
//When you click a node, expand or hide its children
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 divs
var len = objs.length;
//Traverse these divs and find all subordinate, that is, divs with title ID
//If it is hidden, let it be displayed; Otherwise, hide — just set 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)) {
if(parseInt(title)==parseInt(id)) {
if(obj.style.display==”none”) {
obj.style.display = “block”;
else {
obj.style.display = “none”;
<body onload=”ini();”>
You can further think that when you actually click each content, it will generally be linked to a URL. So, how do you deal with it here?
If you are familiar with HTML and JS, it is easy
Idea: add a field, URL, to the table in the database to define the link address
Modify the code in JS
You can also consider making it into a label, which is more convenient