• 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"}
    ]
  • 相关阅读:
    Redis序列化存储Java集合List等自定义类型
    Redis序列化存储Java集合List等自定义类型
    Unity 实现Log实时输出到屏幕或控制台上<二>
    Object-C,NumberDemo和StringDemo
    Object-C,NumberDemo和StringDemo
    Object-C,四则运算计算器
    Object-C,四则运算计算器
    HDU 3732 Ahui Writes Word
    HDU 1176 免费馅饼
    HDU 2571 命运
  • 原文地址:https://www.cnblogs.com/onlycat/p/12807860.html
Copyright © 2020-2023  润新知