樹狀結構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、設置各種亂八七糟的樣式