树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

一、业务原型：公司的组织结构、传销关系网

二、数据库模型

很简单，创建 id 与 pid 关系即可。（pid：parent_id）

三、Java模型

（我们把这张网撒在html的一张表里。其实用ul来展示会简单N多，自己思考为什么LZ会选择放在表里）

private class Table {
        private Long id; // 当前对象的id
        private int x; // 横坐标
        private int y; // 纵坐标
        private List<Table> tables; // 当前对象的下级集合

public Table(Long id) {
            this.id = id; // 方便快速创建对象
        }
    }

1、组装Java模型数据

1）一次性从表里查出所有数据

2）创建下面的Map　　

// pid 与 List<id> 上级ID与下级对象的对应关系
            Map<Long, List<Table>> psMap = new HashMap<>(); // 简单，不详细说明了

3）创建顶级节点

用顶级对象的ID new 一个Table，然后根据ID从上面的 psMap 取出它的下级给这个 Table 的 tables。

4）递归完成所有子级节点

循环Table对象的tables集合，重复上面一个步骤即可

5）计算每个Table对象的横(x)纵(y)坐标

这里再创建一个对象

private class Max {
                    private int x = 1; // 表的行 
                    private int y = 1; // 列
                }

    // 计算纵坐标
    private void countY(List<Table> tables, int y, Max max) {
        if (tables != null)
            for (Table table : tables) {
                table.y = y;
                countY(table.tables, y + 1, max);
                if (y > max.y)
                    max.y = y;
            }
    }

    // 计算横坐标
    private void countX(List<Table> tables, int x, Max max) {
        if (tables != null)
            for (Table table : tables) {
                table.x = max.x;
                if (table.tables != null) {
                    max.x++;
                }
                countX(table.tables, max.x, max);
            }
        else
            max.x = x + 1;
    }

2、创建二维数组，对应html页面中要展示的表

T[][] ts = new T[max.x][max.y]; // T对应数据库表里的对象

上面的Java模型已经将每个对象的横(x)纵(y)坐标都算出来了，填充到这个二维数组即可

四、html页面展示

1、根据前面的Max对象画一个表格，标注坐标

2、用上面的二维数组填充表格

五、表格画好，接下来你可以不折手段了（这就是我不用ul的原因）

1、统计每行每列的数据

2、设置各种乱八七糟的样式