zoukankan      html  css  js  c++  java
  • 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"}
    ]
  • 相关阅读:
    IIS7中的几种身份鉴别方式(一)Basic身份验证
    IIS7中的几种身份鉴别方式(二)集成身份验证
    java集合
    SharePoint 2010中welcome page的设置细节
    SharePoint中使用Linq出现未将对象引用到实例化的解决方法
    SharePoint 2010中关于An error was encountered while retrieving the user profile的处理方式记录
    The Need for an Architectural Body of Knowledge
    The Softer Side of the Architect
    Event Receivers 学习小结
    使用SmtpClient发送带图片的邮件的代码实现
  • 原文地址:https://www.cnblogs.com/onlycat/p/12807860.html
Copyright © 2011-2022 走看看