html递归显示属性菜单,递归循环树菜单.html

Document

var json = {"code":1000,"datas":{"menuTree":[{"id":1,"title":"\u6570\u636e\u770b\u677f","type":1,"key":"board","pid":0,"sort":1,"children":[{"id":517,"title":"CEO\u770b\u677f","type":1,"key":"board_ceo_kb008-kb009-kb010","pid":1,"sort":11},{"id":518,"title":"COO\u770b\u677f","type":1,"key":"board_coo_kb008-kb009","pid":1,"sort":12},{"id":519,"title":"CMO\u770b\u677f","type":1,"key":"board_cmo_kb011-kb012","pid":1,"sort":13},{"id":2,"title":"B2C\u6570\u636e\u770b\u677f","type":1,"key":"board_b2c","pid":1,"sort":50,"children":[{"id":5,"title":"\u5168\u56fd\u6570\u636e\u770b\u677f","type":1,"key":"board_b2c_kb001","pid":2,"sort":50},{"id":6,"title":"\u4e2d\u5fc3\u57ce\u6570\u636e\u770b\u677f","type":1,"key":"board_b2c_kb002","pid":2,"sort":50},{"id":7,"title":"\u4e3b\u57ce\u6570\u636e\u770b\u677f","type":1,"key":"board_b2c_kb003","pid":2,"sort":50},{"id":8,"title":"\u767e\u57ce\u6570\u636e\u770b\u677f","type":1,"key":"board_b2c_kb004","pid":2,"sort":50}]},{"id":3,"title":"C2B\u6570\u636e\u770b\u677f","type":1,"key":"board_c2b","pid":1,"sort":50,"children":[{"id":9,"title":"\u5168\u56fd\u6570\u636e\u770b\u677f","type":1,"key":"board_c2b_kb005","pid":3,"sort":50}]},{"id":4,"title":"\u6295\u653e\u6570\u636e\u770b\u677f","type":1,"key":"board_throw","pid":1,"sort":50,"children":[{"id":11,"title":"\u54c1\u724c\u6295\u653e\u770b\u677f","type":1,"key":"board_throw_kb007","pid":4,"sort":50},{"id":12,"title":"\u6548\u679c\u6295\u653e\u770b\u677f","type":1,"key":"board_throw_kb006","pid":4,"sort":50}]}]},{"id":13,"title":"\u4e1a\u52a1\u62a5\u8868","type":1,"key":"statement","pid":0,"sort":2,"children":[{"id":15,"title":"B2C\u4e1a\u52a1\u62a5\u8868","type":1,"key":"statement_b2c","pid":13,"sort":50,"children":[{"id":24,"title":"\u4e2d\u5fc3\u57ce\u4e70\u8f66\u4e1a\u52a1\u62a5\u8868","type":1,"key":"statement_b2c_bc002-bc004","pid":15,"sort":1501},{"id":25,"title":"\u4e3b\u57ce\u4e70\u8f66\u4e1a\u52a1\u62a5\u8868","type":1,"key":"statement_b2c_bc003","pid":15,"sort":1502},{"id":26,"title":"\u767e\u57ce\u4e70\u8f66\u4e1a\u52a1\u62a5\u8868","type":1,"key":"statement_b2c_bc001","pid":15,"sort":1503},{"id":27,"title":"\u6210\u4ea4\u660e\u7ec6\u8868","type":1,"key":"statement_b2c_bc005","pid":15,"sort":1504},{"id":29,"title":"\u7ebf\u7d22\u660e\u7ec6\u8868","type":1,"key":"statement_b2c_bc007","pid":15,"sort":1505},{"id":28,"title":"\u5546\u5708\u7ef4\u5ea6\u6570\u636e\u7edf\u8ba1\u8868","type":1,"key":"statement_b2c_bc006","pid":15,"sort":1506},{"id":30,"title":"\u5230\u5e97\u660e\u7ec6\u8868","type":1,"key":"statement_b2c_bc045","pid":15,"sort":1507},{"id":31,"title":"\u4e0a\u95e8\u660e\u7ec6\u8868","type":1,"key":"statement_b2c_bc044","pid":15,"sort":1508},{"id":32,"title":"\u5546\u57ce\u8be2\u4ef7\u660e\u7ec6\u8868","type":1,"key":"statement_b2c_bc043","pid":15,"sort":1509}]},{"id":16,"title":"C2B\u4e1a\u52a1\u62a5\u8868","type":1,"key":"statement_c2b","pid":13,"sort":50,"children":[{"id":52,"title":"\u6218\u961f\u4f1a\u5458\u9762\u7b7e","type":1,"key":"statement_c2b_cb001","pid":16,"sort":50},{"id":53,"title":"\u4f1a\u5458","type":1,"key":"statement_c2b_cb002","pid":16,"sort":50},{"id":54,"title":"\u8fd0\u8425\u6570\u636e\u5468\u5bf9\u6bd4","type":1,"key":"statement_c2b_cb003","pid":16,"sort":50},{"id":55,"title":"\u4f1a\u5458\u6570\u636e\u5468\u5bf9\u6bd4","type":1,"key":"statement_c2b_cb004","pid":16,"sort":50}]},{"id":17,"title":"\u6295\u653e\u4e1a\u52a1\u62a5\u8868","type":1,"key":"statement_throw","pid":13,"sort":50,"children":[{"id":61,"title":"Campaign\u6570\u636e\u62a5\u8868","type":1,"key":"statement_throw_tf057-tf058-tf059","pid":17,"sort":50},{"id":62,"title":"\u5546\u52a1\u6295\u653e\u6570\u636e","type":1,"key":"statement_throw_tf011-tf012-tf013-tf014-tf019-tf020-tf021-tf022","pid":17,"sort":50},{"id":63,"title":"\u6e20\u9053\u6570\u636e\u603b\u89c8","type":1,"key":"statement_throw_tf007-tf008-tf009-tf010-tf015-tf016-tf017-tf018","pid":17,"sort":50},{"id":65,"title":"\u4fe1\u606f\u6d41\u6295\u653e\u6570\u636e","type":1,"key":"statement_throw_tf029-tf030-tf031-tf032-tf033-tf034-tf035-tf036-tf037-tf038-tf039","pid":17,"sort":50},{"id":67,"title":"\u6e20\u9053\u6570\u636e\u603b\u89c8B2C&C2B","type":1,"key":"statement_throw_tf040","pid":17,"sort":50},{"id":68,"title":"\u5206\u4e1a\u52a1\u62c6\u57ce\u5e02\u6570\u636eB2C&C2B","type":1,"key":"statement_throw_tf041","pid":17,"sort":50},{"id":69,"title":"\u4fe1\u606f\u6d41\u4e0b\u8f7d\u62c6\u89e3","type":1,"key":"statement_throw_tf060-tf061-tf062-tf063","pid":17,"sort":50}]},{"id":18,"title":"CC\u4e1a\u52a1\u62a5\u8868","type":1,"key":"statement_cc","pid":13,"sort":50,"children":[{"id":460,"title":"\u7ebf\u7d22\u5230\u5e97\u6210\u4ea4","type":1,"key":"statement_cc_cc011","pid":18,"sort":50},{"id":461,"title":"\u7ebf\u4e0a\u6210\u4ea4\u5360\u6bd4\u60c5\u51b5","type":1,"key":"statement_cc_cc012","pid":18,"sort":50},{"id":462,"title":"\u5168\u56fd\u6210\u4ea4\u91cf\u5468\u73af\u6bd4","type":1,"key":"statement_cc_cc013","pid":18,"sort":50},{"id":463,"title":"\u7ebf\u7d22\u91cf\u5206\u6765\u6e90","type":1,"key":"statement_cc_cc014","pid":18,"sort":50}]}]},{"id":451,"title":"\u6570\u636e\u68c0\u7d22","type":1,"key":"search","pid":0,"sort":3,"children":[{"id":454,"title":"B2C\u6570\u636e\u68c0\u7d22","type":1,"key":"search_b2c","pid":451,"sort":50},{"id":455,"title":"C2B\u6570\u636e\u68c0\u7d22","type":1,"key":"search_c2b","pid":451,"sort":50}]},{"id":452,"title":"\u635f\u8017\u5730\u56fe","type":1,"key":"map","pid":0,"sort":4,"children":[{"id":456,"title":"B2C\u635f\u8017\u5730\u56fe","type":1,"key":"map_b2c","pid":452,"sort":50},{"id":457,"title":"C2B\u635f\u8017\u5730\u56fe","type":1,"key":"map_c2b","pid":452,"sort":50}]},{"id":453,"title":"\u5c55\u5f00\u5206\u6790","type":1,"key":"staydata","pid":0,"sort":5,"children":[{"id":458,"title":"B2C\u5c55\u5f00\u5206\u6790","type":1,"key":"staydata_b2c","pid":453,"sort":50},{"id":459,"title":"C2B\u5c55\u5f00\u5206\u6790","type":1,"key":"staydata_c2b","pid":453,"sort":50}]},{"id":83,"title":"\u7cfb\u7edf\u4fe1\u606f","type":1,"key":"system","pid":0,"sort":6,"children":[{"id":84,"title":"\u7248\u672c\u53d1\u5e03\u7ba1\u7406","type":1,"key":"system_versions","pid":83,"sort":50},{"id":130,"title":"\u7248\u672c\u4fe1\u606f","type":1,"key":"system_versionsinfo","pid":83,"sort":50}]},{"id":230,"title":"\u6570\u636e\u6e90\u4e0a\u4f20","type":1,"key":"dataupload","pid":0,"sort":7,"children":[{"id":231,"title":"CC\u6570\u636e\u6e90","type":1,"key":"dataupload_cc","pid":230,"sort":50,"children":[{"id":450,"title":"\u7ebf\u7d22\u5230\u5e97\u6210\u4ea4","type":1,"key":"dataupload_cccheck_cc011001","pid":231,"sort":50},{"id":480,"title":"\u7ebf\u4e0a\u6210\u4ea4\u5360\u6bd4\u60c5\u51b5","type":1,"key":"dataupload_cccheck_cc012001","pid":231,"sort":50},{"id":481,"title":"\u5168\u56fd\u6210\u4ea4\u91cf\u5468\u73af\u6bd4","type":1,"key":"dataupload_cccheck_cc013001","pid":231,"sort":50},{"id":482,"title":"\u7ebf\u7d22\u91cf\u5206\u6765\u6e90","type":1,"key":"dataupload_cccheck_cc014001","pid":231,"sort":50}]},{"id":359,"title":"B2C\u6570\u636e\u6e90","type":1,"key":"dataupload_b2c","pid":230,"sort":50},{"id":530,"title":"SEM\u6570\u636e\u6e90","type":1,"key":"dataupload_sem","pid":230,"sort":50},{"id":531,"title":"\u5e94\u7528\u5e02\u573a\u6570\u636e\u6e90","type":1,"key":"dataupload_app","pid":230,"sort":50},{"id":532,"title":"\u4fe1\u606f\u6d41\u6295\u653e\u6570\u636e\u6e90","type":1,"key":"dataupload_infoflow","pid":230,"sort":50,"children":[{"id":535,"title":"\u4fe1\u606f\u6d41\u843d\u5730\u9875\u6570\u636e","type":1,"key":"dataupload_infoflow_landing","pid":532,"sort":50},{"id":536,"title":"\u4fe1\u606f\u6d41\u4e0b\u8f7d\u6570\u636e","type":1,"key":"dataupload_infoflow_download","pid":532,"sort":50}]},{"id":533,"title":"\u5546\u52a1\u6295\u653e\u6570\u636e\u6e90","type":1,"key":"dataupload_business","pid":230,"sort":50},{"id":534,"title":"\u54c1\u724c\u6295\u653e\u6570\u636e\u6e90","type":1,"key":"dataupload_brand","pid":230,"sort":50},{"id":605,"title":"C2B\u57ce\u5e02\u533a\u57df\u4e0a\u4f20","type":1,"key":"dataupload_c2b_local_city","pid":230,"sort":50}]},{"id":80,"title":"\u6743\u9650\u7ba1\u7406","type":1,"key":"rule","pid":0,"sort":8,"children":[{"id":604,"title":"\u83dc\u5355\u7ba1\u7406","type":1,"key":"rule_menu","pid":80,"sort":2},{"id":81,"title":"\u7528\u6237\u7ba1\u7406","type":1,"key":"rule_user","pid":80,"sort":50},{"id":82,"title":"\u89d2\u8272\u7ba1\u7406","type":1,"key":"rule_role","pid":80,"sort":50}]}],"version":{"id":22,"versions":"1.5.3"}},"msg":"\u521d\u59cb\u5316\u83dc\u5355\u6210\u529f"}

// Setp1 设置name

json.datas.menuTree.forEach(function(item,index){

setName(item,index)

});

function setName(obj,index){

obj.name = index

if(obj.hasOwnProperty('children')){

obj.children.forEach(function(item,i){

setName(item,index+'-'+i)

})

}

}

// Setp2 根据条件 获取nameIndex

var key = 'dataupload_c2b_local_city';

var menuIndex = []

json.datas.menuTree.forEach(function(item,index){

findKey(item,key,function(i){

menuIndex = i

})

})

// 从树中查找key

function findKey(obj,key,cb){

if(obj.hasOwnProperty('children')){

obj.children.forEach(function(item,index){

findKey(item,key,cb)

})

}else{

if(obj.key == key){

cb(obj.name)

return obj.name

}

}

}

// Setp3 拆分选中项数组

var activeListArray = []

GetopenNames()

// 拆解openNames '1-2-0' => ['1','1-2','1-2-0']

function GetopenNames(){

let openList = menuIndex.split('-');

let activeList = [];

// 拆分方法

openList.forEach(function(item,index){

let obj = {};

if(index==0){

activeList.push(item)

}else{

activeList.push(activeList[activeList.length-1]+'-'+item)

}

});

// openNames 指向

activeListArray = activeList

}

console.log(activeListArray)

// Setp4 获取选择的数组

activeListArray.forEach(function(item){

toBreadcrumb(item)

})

var path

function toBreadcrumb(arrIndex){

console.log(arrIndex)

let mapIndex = arrIndex.split('-');

// 获取对应name

let box={};

let mapText = mapIndex.map(function(item,index){

if(index == 0){

box = json.datas.menuTree[eval(item)];

}else{

box = box.children[eval(item)];

}

// 储存当前路径

if(index == mapIndex.length-1){

path = box.path

}

return box.title;

});

console.log(mapText)

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史