javascript將平行的擁有上下級關係的數據轉換成樹形結構

下載地址

csdn下載地址

服務端數據存儲

當有多級菜單或者多級部門這樣的場景的時候，傳統的結構化數據設計都會用類似parentId來標識其父級，以達到多級樹形結構存儲於數據庫中

服務端提供接口

服務端提供接口可以有兩種模式

服務端將數據轉換成樹形的json傳遞給前端，如設計children字段存放下級數據
服務端按存儲數據直接返回到前端

前端轉換

如果服務端按照數據庫存儲的數據模型直接將數據傳遞給前端，那麼前端使用一些樹形菜單插件就不可直接使用，這時候中間就需要一層轉換層來使數據適配，該方法就是用於此處

轉換js代碼

var Littlehow = {};
/**
 * littlehow 2019-05-15
 * 平行數據樹形轉換器
 * @type {{format: tree.format, sort: tree.sort, map: (function(*, *): {root, da})}}
 */
Littlehow.tree = {
    /**
     *  將平行結果轉換成樹形結構，父編號不可爲空，如果爲最高，則可以設置root等字樣
     *  如果有排序字段，將排序完成後返回
     *  如：data:[{id:'1', parentId:'root', name:'test'}, {id:'2', parentId:'1', name:'test1'},{id:'3', parentId:'1', name:'test2'}]
     *     format:{id:'id', root:'root', 'pid':'parentId', child:'children'}
     *  解析後的數據形式爲:
     *  [{id:'1','parentId':'root',name:'test', children:[{id:'2',parentId:'1',name:'test1'},{id:'3',parentId:'1',name:'test2'}]}]
     *  @param data   -- 需要轉換的數據
     *  @param format -- 轉換格式 {id:'', root:'', pid:'', child:'', sort:{field:'', direct:1}}
     *  @return {*} 轉換後的數據
     */
    format : function(data, format) {
        //如果data，沒有數據，則將data原樣返回
        if (!data || data.length <= 0) return data;
        var map = this.map(data, format);
        //再遍歷原數據進行樹形填充
        for (var i = 0, len = data.length; i < len; i++) {
            var d = data[i];
            if (map.dm[d[format.pid]]) {
                map.dm[d[format.pid]][format.child].push(d);
            }
        }
        //最後將root排序後返回
        this.sort(map.root, format);
        return map.root;
    },
    /**
     * 平行數據映射爲map
     * @param data     -- 平行數據
     * @param format   -- tree格式化信息
     * @return {{d, root}}  -- 返回數據和根數據map
     */
    map : function(data, format) {
        var dataMap = {};//全數據映射
        var root = [];//根
        for (var i = 0, len = data.length; i < len; i++) {
            var d = data[i];
            //初始化child字段,如果不想要這裏初始化也可以在樹形填充出進行判斷初始化
            d[format.child] = [];
            dataMap[d[format.id]] = d;
            if (data[i][format.pid] === format.root) {//將root記錄到root數組
                root.push(d);
            }
        }
        return {dm : dataMap, root : root};
    },
    /**
     * 進行排序  format.sort格式爲sort:{field:'', direct:1},其中direct=1爲正序，direct=-1爲逆序
     * @param result  -- 結果集
     * @param format  -- 格式化
     */
    sort : function(result, format) {
        if (!format.sort) return;//沒有排序配置則不進行排序
        result.sort(function(a, b) {
            var as = a[format.sort.field];
            var bs = b[format.sort.field];
            return (as - bs) * format.sort.direct;
        });
        //如果result中有child，則繼續進行排序
        for (var i = 0, len = result.length; i < len; i++) {
            if (result[i][format.child].length > 0) {
                this.sort(result[i][format.child], format);
            }
        }
    }
};

調用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree case</title>
    <script src="TreeUtils.js" type="application/javascript"></script>
    <script type="application/javascript">
        var data = [
            {
                "menuName": "系統管理",
                "parentId": "root",
                "iconCls": "el-icon-s-tools",
                "request": null,
                "leaf": "0",
                "sortNo": 30,
                "menuId": "1"
            },
            {
                "menuName": "人員管理",
                "parentId": "1",
                "iconCls": null,
                "request": "/system/user",
                "leaf": "1",
                "sortNo": 3,
                "menuId": "2"
            },
            {
                "menuName": "角色管理",
                "parentId": "1",
                "iconCls": null,
                "request": "/system/role",
                "leaf": "1",
                "sortNo": 6,
                "menuId": "3"
            },
            {
                "menuName": "菜單管理",
                "parentId": "1",
                "iconCls": null,
                "request": "/system/menu",
                "leaf": "1",
                "sortNo": 9,
                "menuId": "4"
            },
            {
                "menuName": "系統配置",
                "parentId": "1",
                "iconCls": null,
                "request": "/system/config",
                "leaf": "1",
                "sortNo": 12,
                "menuId": "5"
            },
            {
                "menuName": "字典管理",
                "parentId": "1",
                "iconCls": null,
                "request": "/system/dictionary",
                "leaf": "1",
                "sortNo": 15,
                "menuId": "6"
            },
            {
                "menuName": "內容管理",
                "parentId": "root",
                "iconCls": "el-icon-tickets",
                "request": null,
                "leaf": "0",
                "sortNo": 18,
                "menuId": "21"
            },
            {
                "menuName": "banner",
                "parentId": "21",
                "iconCls": null,
                "request": "/content/banner",
                "leaf": "1",
                "sortNo": 3,
                "menuId": "22"
            },
            {
                "menuName": "公告列表",
                "parentId": "21",
                "iconCls": null,
                "request": "/content/attention",
                "leaf": "1",
                "sortNo": 9,
                "menuId": "23"
            },
            {
                "menuName": "App版本管理",
                "parentId": "root",
                "iconCls": "el-icon-tickets",
                "request": null,
                "leaf": "0",
                "sortNo": 27,
                "menuId": "91"
            },
            {
                "menuName": "App版本管理",
                "parentId": "91",
                "iconCls": null,
                "request": "/app/manager",
                "leaf": "1",
                "sortNo": 3,
                "menuId": "92"
            }
        ];

        var format = {
            id:'menuId', //菜單編號，作爲樹形查找id
            root:'root', //頂層節點的parentId是root
            pid:'parentId',//父節點標識字段爲parentId
            child:'children',//構造出的樹形子節點數組名爲children
            sort:{field:'sortNo', direct:1}};//排序字段爲sortNo，且正序

        var result = Littlehow.tree.format(data, format);
        console.log(result);
        document.write(JSON.stringify(result));
    </script>
</head>
<body>

</body>
</html>

輸出結果如下

[{
	"menuName": "內容管理",
	"parentId": "root",
	"iconCls": "el-icon-tickets",
	"request": null,
	"leaf": "0",
	"sortNo": 18,
	"menuId": "21",
	"children": [{
		"menuName": "banner",
		"parentId": "21",
		"iconCls": null,
		"request": "/content/banner",
		"leaf": "1",
		"sortNo": 3,
		"menuId": "22",
		"children": []
	}, {
		"menuName": "公告列表",
		"parentId": "21",
		"iconCls": null,
		"request": "/content/attention",
		"leaf": "1",
		"sortNo": 9,
		"menuId": "23",
		"children": []
	}]
}, {
	"menuName": "App版本管理",
	"parentId": "root",
	"iconCls": "el-icon-tickets",
	"request": null,
	"leaf": "0",
	"sortNo": 27,
	"menuId": "91",
	"children": [{
		"menuName": "App版本管理",
		"parentId": "91",
		"iconCls": null,
		"request": "/app/manager",
		"leaf": "1",
		"sortNo": 3,
		"menuId": "92",
		"children": []
	}]
}, {
	"menuName": "系統管理",
	"parentId": "root",
	"iconCls": "el-icon-s-tools",
	"request": null,
	"leaf": "0",
	"sortNo": 30,
	"menuId": "1",
	"children": [{
		"menuName": "人員管理",
		"parentId": "1",
		"iconCls": null,
		"request": "/system/user",
		"leaf": "1",
		"sortNo": 3,
		"menuId": "2",
		"children": []
	}, {
		"menuName": "角色管理",
		"parentId": "1",
		"iconCls": null,
		"request": "/system/role",
		"leaf": "1",
		"sortNo": 6,
		"menuId": "3",
		"children": []
	}, {
		"menuName": "菜單管理",
		"parentId": "1",
		"iconCls": null,
		"request": "/system/menu",
		"leaf": "1",
		"sortNo": 9,
		"menuId": "4",
		"children": []
	}, {
		"menuName": "系統配置",
		"parentId": "1",
		"iconCls": null,
		"request": "/system/config",
		"leaf": "1",
		"sortNo": 12,
		"menuId": "5",
		"children": []
	}, {
		"menuName": "字典管理",
		"parentId": "1",
		"iconCls": null,
		"request": "/system/dictionary",
		"leaf": "1",
		"sortNo": 15,
		"menuId": "6",
		"children": []
	}]
}]

javascript將平行的擁有上下級關係的數據轉換成樹形結構

下載地址

服務端數據存儲

服務端提供接口

前端轉換

轉換js代碼

調用示例

輸出結果如下

java枚舉應用(二)

java註解不常用功能記錄

記錄那些詭異的數據庫死鎖

自己動手寫了個簡單緩存

早期正則表達式練習

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結