代码看这里
截图
树形结构数据
var data = [
{
"id": "7ce813f379de44e3842ca74a07b710f5",
"parentId": "69fde9ffbd2a4558924d77890c747603",
"label": "萍乡市河长办1",
"code": "100001007002002",
"type": "o",
"sort": 30,
"children": [
{
"id": "5d918f95b513450c83b54748631c3c34",
"parentId": "7ce813f379de44e3842ca74a07b710f5",
"label": "周杰伦",
"type": "u"
},
{
"id": "925c9e605c5b4c888bb164ee884a5c3b",
"parentId": "7ce813f379de44e3842ca74a07b710f5",
"label": "李连杰",
"type": "u"
},
{
"id": "4a5551b95517495db8ca823fcaa01f7b",
"parentId": "7ce813f379de44e3842ca74a07b710f5",
"label": "萍乡市河长办",
"type": "u"
},
{
"id": "0dbe25d3f7fe443cafaf9bc883f6423f",
"parentId": "7ce813f379de44e3842ca74a07b710f5",
"label": "黄辉",
"type": "u"
},
{
"id": "54edd6b3718348e0ac254394ada6cfac",
"parentId": "abb1dae40abf4f7c902d7fc21513d671",
"label": "湘东河长办",
"code": "100001007001001007",
"type": "o",
"sort": 30,
"children": [
{
"id": "c128cc24578842debff29b4eba1355bf",
"parentId": "54edd6b3718348e0ac254394ada6cfac",
"label": "杨博",
"type": "u"
},
{
"id": "05b8387138a74de9b67a14ae793a9ade",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "腊市镇河长办",
"code": "100001007001001007005",
"type": "o",
"sort": 30,
"area": {
"id": "0ee56856786a422c9ca9f8d5759d4622",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "腊市镇",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
},
{
"id": "11303ea1e5b84323afd1b5e290aee812",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "荷尧镇河长办",
"code": "100001007001001007002",
"type": "o",
"sort": 30,
"area": {
"id": "ef4856ce6ce4487495874b8e5b6ba77b",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "荷尧镇",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
},
{
"id": "3d0b83c3a63f4de38dc99bd3f340cdba",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "老关镇河长办",
"code": "100001007001001007004",
"type": "o",
"sort": 30,
"area": {
"id": "3cc4fd35a4e04513b4e9beddee457c59",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "老关镇",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
},
{
"id": "85e87941b8354d9db0c64590b21b4c83",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "峡山口河长办",
"code": "100001007001001007001",
"type": "o",
"sort": 30,
"children": [
{
"id": "4b21a22d711c4cf6a3e0166011a77e53",
"parentId": "85e87941b8354d9db0c64590b21b4c83",
"label": "刘文军",
"type": "u"
}
],
"area": {
"id": "d5945a00c1b545bda8c45a71e4a4fd9b",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "峡山口街道",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
},
{
"id": "9b08a83486d949a991c1554341b63d08",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "湘东镇河长办",
"code": "100001007001001007003",
"type": "o",
"sort": 30,
"area": {
"id": "d05a01385234450aab5e301ac032fec7",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "湘东镇",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
},
{
"id": "a352b11dcbe242ae8a90e4c8f5507de8",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "白竺乡河长办",
"code": "100001007001001007011",
"type": "o",
"sort": 30,
"area": {
"id": "1a9b224975cc4f6bbca361c33d652327",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "白竺乡",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
},
{
"id": "b1e4d1dc75c5414eb145f4d5e08a87b3",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "排上镇河长办",
"code": "100001007001001007007",
"type": "o",
"sort": 30,
"area": {
"id": "1a8c17ff7048475b9e65b3deef1db23f",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "排上镇",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
},
{
"id": "d50bd604178d4ab5abd1c8b60db6981b",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "下埠镇河长办",
"code": "100001007001001007006",
"type": "o",
"sort": 30,
"area": {
"id": "49953cb9c6b44cbdb43097c6e1cff8d0",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "下埠镇",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
},
{
"id": "e7d16744266a4e5194a71a32287ce32b",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "麻山镇河长办",
"code": "100001007001001007009",
"type": "o",
"sort": 30,
"area": {
"id": "00572d630c9d40c596a3ea71dba5d499",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "麻山镇",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
},
{
"id": "f0721d016bf246d3a8c814d59d92655f",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "广寒寒乡河长办",
"code": "100001007001001007010",
"type": "o",
"sort": 30,
"area": {
"id": "3af5d971406344e0aac9c849bba7ab39",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "广寒寨乡",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
},
{
"id": "f64aac00504342758652cdc44c4ea6cd",
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e",
"label": "东桥镇河长办",
"code": "100001007001001007008",
"type": "o",
"sort": 30,
"area": {
"id": "cf31d227f1954a3082106d28695ccfa4",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,72ef8ce2a10f40259aa3338ca4b7177e,",
"name": "东桥镇",
"sort": 30,
"parentId": "72ef8ce2a10f40259aa3338ca4b7177e"
}
}
],
"area": {
"id": "72ef8ce2a10f40259aa3338ca4b7177e",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,",
"name": "湘东",
"sort": 30,
"parentId": "abb1dae40abf4f7c902d7fc21513d671"
}
},
{
"id": "64ee02bf145a4244b6a95a7f84752d0f",
"parentId": "abb1dae40abf4f7c902d7fc21513d671",
"label": "安源区河长办",
"code": "100001007002001001",
"type": "o",
"sort": 30,
"children": [
{
"id": "62fc84845fb3429f83671c491c14a987",
"parentId": "64ee02bf145a4244b6a95a7f84752d0f",
"label": "安源区河长办",
"type": "u"
},
{
"id": "55e5cea42d9c417a96898d6df8451cb5",
"parentId": "64ee02bf145a4244b6a95a7f84752d0f",
"label": "康峰",
"type": "u"
},
{
"id": "80f259115cd24c7198dac136790adae8",
"parentId": "64ee02bf145a4244b6a95a7f84752d0f",
"label": "陈俊颖",
"type": "u"
},
{
"id": "1ab0ea0186e548d8847ae56906b1dd12",
"parentId": "5bd4c9b4e170450aa67c360949f08b91",
"label": "高坑镇河长办",
"code": "100001007001001008",
"type": "o",
"sort": 30,
"area": {
"id": "87220ba52bfc42cdbb770cf5a8bb326b",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,5bd4c9b4e170450aa67c360949f08b91,",
"name": "高坑镇",
"sort": 30,
"parentId": "5bd4c9b4e170450aa67c360949f08b91"
}
},
{
"id": "33ac245e09c34850b8c56b320831288e",
"parentId": "5bd4c9b4e170450aa67c360949f08b91",
"label": "五陂下垦殖场河长办",
"code": "100001007001001010",
"type": "o",
"sort": 30,
"area": {
"id": "5736491d3b994c8f9b93e8c9aacd9983",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,5bd4c9b4e170450aa67c360949f08b91,",
"name": "五陂下垦殖场",
"sort": 30,
"parentId": "5bd4c9b4e170450aa67c360949f08b91"
}
},
{
"id": "426a08bde78c497dbaf9a55c5f08d76b",
"parentId": "5bd4c9b4e170450aa67c360949f08b91",
"label": "安源镇河长办",
"code": "100001007001001007",
"type": "o",
"sort": 30,
"children": [
{
"id": "5efd129d7126407fbc368f5b3ffb54be",
"parentId": "426a08bde78c497dbaf9a55c5f08d76b",
"label": "雷文茂",
"type": "u"
},
{
"id": "9523743f8374448f96d99d16b9dc8bab",
"parentId": "53ec86cd47614e4fa5ba43c03e04005c",
"label": "跃进村",
"code": "100001007002001003003001",
"type": "o",
"sort": 30,
"children": [
{
"id": "2425f2250e174cd7a8cdd55a172c6914",
"parentId": "9523743f8374448f96d99d16b9dc8bab",
"label": "yjchzb",
"type": "u"
}
],
"area": {
"id": "2ac732b685a04f5cb65e8fa73d5d2302",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,5bd4c9b4e170450aa67c360949f08b91,53ec86cd47614e4fa5ba43c03e04005c,",
"name": "跃进村",
"sort": 30,
"parentId": "53ec86cd47614e4fa5ba43c03e04005c"
}
},
{
"id": "e8a7f9a6aea94598b7ed5e222a56a158",
"parentId": "53ec86cd47614e4fa5ba43c03e04005c",
"label": "十里村",
"code": "100001007002001003002001",
"type": "o",
"sort": 30,
"children": [
{
"id": "a7de4c42978645afb1bcdbdd452050e6",
"parentId": "e8a7f9a6aea94598b7ed5e222a56a158",
"label": "slchz",
"type": "u"
}
],
"area": {
"id": "48c80478550042fd9681a97f40edc455",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,5bd4c9b4e170450aa67c360949f08b91,53ec86cd47614e4fa5ba43c03e04005c,",
"name": "十里村",
"sort": 30,
"parentId": "53ec86cd47614e4fa5ba43c03e04005c"
}
}
],
"area": {
"id": "53ec86cd47614e4fa5ba43c03e04005c",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,5bd4c9b4e170450aa67c360949f08b91,",
"name": "安源镇",
"sort": 30,
"parentId": "5bd4c9b4e170450aa67c360949f08b91"
}
},
{
"id": "46d39309cac54b95ab13bcf51d78b069",
"parentId": "5bd4c9b4e170450aa67c360949f08b91",
"label": "百源街河长办",
"code": "100001007001001006",
"type": "o",
"sort": 30,
"children": [
{
"id": "5e3c79fc389f452a80cebb1663dcddea",
"parentId": "46d39309cac54b95ab13bcf51d78b069",
"label": "沈乐",
"type": "u"
}
],
"area": {
"id": "80cf3d0d84ce46d18b216c1f324e98f2",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,5bd4c9b4e170450aa67c360949f08b91,",
"name": "白源街街道",
"sort": 30,
"parentId": "5bd4c9b4e170450aa67c360949f08b91"
}
},
{
"id": "4c96ca4c6beb4ecb987ab912669d5a94",
"parentId": "5bd4c9b4e170450aa67c360949f08b91",
"label": "丹江街河长办",
"code": "100001007001001005",
"type": "o",
"sort": 30,
"children": [
{
"id": "75a58da7d98f423ba64ba636046ef6ca",
"parentId": "4c96ca4c6beb4ecb987ab912669d5a94",
"label": "吴贺明",
"type": "u"
}
],
"area": {
"id": "dfcced13173e41628f814294a58adbd0",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,5bd4c9b4e170450aa67c360949f08b91,",
"name": "丹江街街道",
"sort": 30,
"parentId": "5bd4c9b4e170450aa67c360949f08b91"
}
},
{
"id": "5c61bd82dd7649ed9d264ebe19d331ed",
"parentId": "5bd4c9b4e170450aa67c360949f08b91",
"label": "五陂镇河长办",
"code": "100001007001001009",
"type": "o",
"sort": 30,
"area": {
"id": "a7564189dd454edfb44ead4b61f6627d",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,5bd4c9b4e170450aa67c360949f08b91,",
"name": "五陂镇",
"sort": 30,
"parentId": "5bd4c9b4e170450aa67c360949f08b91"
}
},
{
"id": "9b51818f48a84cafba02dc3713732ce6",
"parentId": "5bd4c9b4e170450aa67c360949f08b91",
"label": "城郊管委会河长办",
"code": "100001007001001012",
"type": "o",
"sort": 30,
"area": {
"id": "99303474bb2f476db9e4dd46fd6818a9",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,5bd4c9b4e170450aa67c360949f08b91,",
"name": "城郊管委会",
"sort": 30,
"parentId": "5bd4c9b4e170450aa67c360949f08b91"
}
},
{
"id": "cc5e264e17424cc98cbd4a2c3d7f5fdd",
"parentId": "5bd4c9b4e170450aa67c360949f08b91",
"label": "青山镇河长办",
"code": "100001007001001011",
"type": "o",
"sort": 30,
"area": {
"id": "ec5c477fda1b45f78fec49b06934dbce",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,5bd4c9b4e170450aa67c360949f08b91,",
"name": "青山镇",
"sort": 30,
"parentId": "5bd4c9b4e170450aa67c360949f08b91"
}
}
],
"area": {
"id": "5bd4c9b4e170450aa67c360949f08b91",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,abb1dae40abf4f7c902d7fc21513d671,",
"name": "安源区",
"sort": 30,
"parentId": "abb1dae40abf4f7c902d7fc21513d671"
}
}
],
"area": {
"id": "abb1dae40abf4f7c902d7fc21513d671",
"tenantId": "system",
"parentIds": "0,1,69fde9ffbd2a4558924d77890c747603,",
"name": "萍乡市",
"sort": 30,
"parentId": "69fde9ffbd2a4558924d77890c747603"
}
}
];
js代码
方法一
// 方法一
function aa(id, arr) {
for (var i in arr) {
if (arr[i] == id) {
return true
}
}
}
function getCity(arr, data, city) {
if (city == undefined) {
var city = new Array();
}
for (var j in data) {
if (aa(data[j].id, arr)) {
city.push(data[j])
}
if (data[j].children !== undefined) {
getCity(arr, data[j].children, city)
}
}
return city
}
console.log(getCity(["c128cc24578842debff29b4eba1355bf", "4b21a22d711c4cf6a3e0166011a77e53","5d918f95b513450c83b54748631c3c34"], data))
方法二--简化代码
// 方法二
function getCity(arr, data, city = []) {
if (typeof data === "object") {
for (let i = 0; arr[i] !== undefined; i++) {
for (let j = 0; data[j] !== undefined; j++) {
if (arr[i] === data[j].id) {
city.push(data[j]);
}
}
};
for (let i = 0; data[i] !== undefined; i++) {
getCity(arr, data[i].children, city);
};
}
return city;
}
console.log(getCity(["c128cc24578842debff29b4eba1355bf", "4b21a22d711c4cf6a3e0166011a77e53", "5d918f95b513450c83b54748631c3c34"], data))