Js面包屑導航生成

一、先說場景

　　在多層級菜單中，當點擊某一個層級的菜單時需要打印該菜單的層級信息 如 首頁-》子菜單-》列表項-》單條詳情-》詳情修改 要找出某一個結點的位置，打印出所在路徑，

 

二、再說數據

　　菜單數據為數組對象數據，每個對象中必須含有唯一鍵字端，用於標示每個結點

[
	{
		id: 'im01',
		name: '菜單-01',
		children : [
		{
			id: 'im0101',
			name: '菜單-01-01',
		},
		{
			id: 'im0102',
			name: '菜單-01-02',
			children: [
			{
				id: 'im010201',
				name: '菜單-01-02-01',
			}
			]
		},
		{
			id: 'im0103',
			name: '菜單-01-03',
		}
		]
	},
	{
		id: 'im02',
		name: '菜單-02',
		children : [
		{
			id: 'im0201',
			name: '菜單-02-01',
		},
		{
			id: 'im0202',
			name: '菜單-02-02',
		},
		{
			id: 'im0103',
			name: '菜單-02-03',
		}
		]
	},
	{
		id: 'im03',
		name: '菜單-03',
		children :[]
	}

]

 

三、上代碼

const crumb = {
    _id : null,
    _children : null,
    _flat : [],
    _result: [],
    
    /**
     * 將輸入菜單數據轉化為一唯數組
     * @param arrTree  菜單數據
     * @param pid  從屬結點id
     */ 
    _conv_array: (arrTrue, pid = null) => {
        for(let i = 0; i< arrTrue.length; i++) {
            if(pid != "") {
                arrTrue[i]._parent_id = pid
            }
            crumb._flat.push(arrTrue[i])
            if(undefined != arrTrue[i][crumb._children]  && arrTrue[i][crumb._children].length != 0) {
                crumb._conv_array(arrTrue[i][crumb._children], arrTrue[i][crumb._id])
            }
        }
    },
    
    /**
     * 查找結點位置
     * @param node  結點標識
     */
    _find_node: (node) => {
        for(let i in crumb._flat) {
            if(crumb._flat[i][crumb._id] == node){
                crumb._result.push(crumb._flat[i])
            }
            if(crumb._flat[i]._parent_id != undefined && crumb._flat[i][crumb._id]  == node){
                crumb._find_node(crumb._flat[i]._parent_id)
            }
        }
    },
        
    /**
     * 查找結點所在位置
     * @param tree  菜單數據
     * @param find_id  查找結點的ID
     * @param id    唯一標示字段名稱
     * @param children  子節點字段標示名稱
     * @returns {T[]}   
     */
    find: (tree,  find_id , id = "id" , children = "children") => {
        crumb._id = id
        crumb._children = children
        crumb._flat = []
        crumb._result = []
        crumb._conv_array(tree)
        crumb._find_node(find_id)
        return crumb._result.reverse()
    }
}

 

四、使用方式

　　

crumb.find(數據, 唯一表示字段值, 唯一標示字段名稱, 子節點字段標示名稱)

crumb.find(data, "im010201");

 

　　

五、思路

　　1. 將多維菜單樹通過crumb._conv_array函數進行一維展開的, 展開結果如下

[
    {"id":"im01", "name":"菜單-01", "_parent_id":null},
    {"id": "im0101", "name": "菜單-01-01", "_parent_id":"im01"},
    {"id": "im0102", "name": "菜單-01-02", "_parent_id":"im01"},
    {"id":"im010201","name":"菜單-01-02-01","_parent_id":"im0102"},
    {"id":"im0103","name":"菜單-01-03","_parent_id":"im01"},
    {"id":"im02","name":"菜單-02", "_parent_id":null},
    {"id":"im0201","name":"菜單-02-01","_parent_id":"im02"},
    {"id":"im0202","name":"菜單-02-02","_parent_id":"im02"},
    {"id":"im0103","name":"菜單-02-03","_parent_id":"im02"},
    {"id":"im03","name":"菜單-03","_parent_id":null}
]

　　2. 對一維數組進行遞歸查找，找出依賴鏈, 對查找結果進行反轉，返回

crumb.find(data, 'im010201', 'id', 'children')

/ *** 結果 ***/
[
    {"id":"im01","name":"菜單-01","_parent_id":null,"children":[
        {"id":"im0101","name":"菜單-01-01","_parent_id":"im01"},
        {"id":"im0102","name":"菜單-01-02","_parent_id":"im01","children":
            [
                {"id":"im010201","name":"菜單-01-02-01","_parent_id":"im0102"}
            ]
        },
        {"id":"im0103","name":"菜單-01-03","_parent_id":"im01"}
    ]},
    {"id":"im0102","name":"菜單-01-02","_parent_id":"im01","children":
        [
            {"id":"im010201","name":"菜單-01-02-01","_parent_id":"im0102"}
        ]
    },
    {"id":"im010201","name":"菜單-01-02-01","_parent_id":"im0102"}
]