js树结构根据另一组数据设置禁用

Z时代
2024-03-01
分类：IT

js树结构根据另一组数据设置禁用

树结构数据

[{ "children": [{ "children": [{ "children": [{ "hasChildren": false, "name": "高梅专用测试店", "pid": "1900", "id": "1462978837913669632", "label": "高梅专用测试店", "deptType": 2, "leaf": true }], "hasChildren": true, "name": "长清区", "pid": "586", "id": "1900", "label": "长清区", "deptType": 1, "leaf": false }, { "hasChildren": false, "name": "高新区", "pid": "586", "id": "1903", "label": "高新区", "deptType": 1, "leaf": true }, { "children": [{ "hasChildren": false, "name": "小苔便利店001号店", "pid": "588", "id": "1428553074498211840", "label": "小苔便利店001号店", "deptType": 2, "leaf": true }], "hasChildren": true, "name": "市中区", "pid": "586", "id": "588", "label": "市中区", "deptType": 1, "leaf": false }], "hasChildren": true, "name": "济南分公司", "pid": "585", "id": "586", "label": "济南分公司", "deptType": 1, "leaf": false }, { "children": [{ "children": [{ "hasChildren": false, "name": "小苔峰山路店", "pid": "1872", "id": "1436202778274959360", "label": "小苔峰山路店", "deptType": 2, "leaf": true }, { "hasChildren": false, "name": "77", "pid": "1872", "id": "1463794411082223616", "label": "77", "deptType": 2, "leaf": true }], "hasChildren": true, "name": "李沧区", "pid": "589", "id": "1872", "label": "李沧区", "deptType": 1, "leaf": false }, { "hasChildren": false, "name": "高新区", "pid": "589", "id": "1904", "label": "高新区", "deptType": 1, "leaf": true }, { "children": [{ "hasChildren": false, "name": "66", "pid": "1908", "id": "1463794264034119680", "label": "66", "deptType": 2, "leaf": true }], "hasChildren": true, "name": "市中区", "pid": "589", "id": "1908", "label": "市中区", "deptType": 1, "leaf": false }, { "children": [{ "children": [{ "hasChildren": false, "name": "台东店", "pid": "1867", "id": "1448119524422455296", "label": "台东店", "deptType": 2, "leaf": true }, { "hasChildren": false, "name": "库存测试门店", "pid": "1867", "id": "1455718406148984832", "label": "库存测试门店", "deptType": 2, "leaf": true }, { "hasChildren": false, "name": "库存测试门店2", "pid": "1867", "id": "1460485131918774272", "label": "库存测试门店2", "deptType": 2, "leaf": true }], "hasChildren": true, "name": "台东商圈", "pid": "602", "id": "1867", "label": "台东商圈", "deptType": 1, "leaf": false }, { "children": [{ "hasChildren": false, "name": "55", "pid": "1902", "id": "1912", "label": "55", "deptType": 1, "leaf": true }], "hasChildren": true, "name": "市中区", "pid": "602", "id": "1902", "label": "市中区", "deptType": 1, "leaf": false }], "hasChildren": true, "name": "市北区", "pid": "589", "id": "602", "label": "市北区", "deptType": 1, "leaf": false }], "hasChildren": true, "name": "青岛分公司", "pid": "585", "id": "589", "label": "青岛分公司", "deptType": 1, "leaf": false }], "hasChildren": true, "name": "中石油省公司", "pid": "null", "id": "585", "label": "中石油省公司", "deptType": 1, "leaf": false

}]

另一组数据

[{ "id": "1478617370349871105", "tenantId": "1428550468858155008", "version": 1, "createdBy": "管理员", "createdTime": 1641364827000, "updatedBy": "管理员", "updatedTime": 1641365242000, "deleted": 0, "shopId": "1428553074498211840", "shopName": "小苔便利店001号店", "skuId": "172836", "skuCode": "010017", "skuName": "测试无供应商", "curVendorCode": null, "sourceType": null, "busType": null, "stockCountMax": null, "stockCountMin": null, "sort": 1, "posIsShow": 1, "isCommon": 0, "safetyStock": null, "type": 1, "discountRate": 0.0000, "fixedPrice": null, "canDelete": 0 }, { "id": "1478617370362454017", "tenantId": "1428550468858155008", "version": 1, "createdBy": "管理员", "createdTime": 1641364827000, "updatedBy": "管理员", "updatedTime": 1641365242000, "deleted": 0, "shopId": "1436202778274959360", "shopName": "小苔峰山路店", "skuId": "172836", "skuCode": "010017", "skuName": "测试无供应商", "curVendorCode": null, "sourceType": null, "busType": null, "stockCountMax": null, "stockCountMin": null, "sort": 1, "posIsShow": 1, "isCommon": 0, "safetyStock": null, "type": 1, "discountRate": 0.0000, "fixedPrice": null, "canDelete": 1 }, { "id": "1478617370366648322", "tenantId": "1428550468858155008", "version": 1, "createdBy": "管理员", "createdTime": 1641364827000, "updatedBy": "管理员", "updatedTime": 1641365242000, "deleted": 0, "shopId": "1448119524422455296", "shopName": "台东店", "skuId": "172836", "skuCode": "010017", "skuName": "测试无供应商", "curVendorCode": null, "sourceType": null, "busType": null, "stockCountMax": null, "stockCountMin": null, "sort": 1, "posIsShow": 1, "isCommon": 0, "safetyStock": null, "type": 1, "discountRate": 0.0000, "fixedPrice": null, "canDelete": 1 }, { "id": "1478617370366648323", "tenantId": "1428550468858155008", "version": 1, "createdBy": "管理员", "createdTime": 1641364827000, "updatedBy": "管理员", "updatedTime": 1641365242000, "deleted": 0, "shopId": "1455718406148984832", "shopName": "库存测试门店", "skuId": "172836", "skuCode": "010017", "skuName": "测试无供应商", "curVendorCode": null, "sourceType": null, "busType": null, "stockCountMax": null, "stockCountMin": null, "sort": 1, "posIsShow": 1, "isCommon": 0, "safetyStock": null, "type": 1, "discountRate": 0.0000, "fixedPrice": null, "canDelete": 1 }, { "id": "1478617370370842625", "tenantId": "1428550468858155008", "version": 1, "createdBy": "管理员", "createdTime": 1641364827000, "updatedBy": "管理员", "updatedTime": 1641365242000, "deleted": 0, "shopId": "1460485131918774272", "shopName": "库存测试门店2", "skuId": "172836", "skuCode": "010017", "skuName": "测试无供应商", "curVendorCode": null, "sourceType": null, "busType": null, "stockCountMax": null, "stockCountMin": null, "sort": 1, "posIsShow": 1, "isCommon": 0, "safetyStock": null, "type": 1, "discountRate": 0.0000, "fixedPrice": null, "canDelete": 1 }, { "id": "1478617370379231234", "tenantId": "1428550468858155008", "version": 1, "createdBy": "管理员", "createdTime": 1641364827000, "updatedBy": "管理员", "updatedTime": 1641365242000, "deleted": 0, "shopId": "1462978837913669632", "shopName": "高梅专用测试店", "skuId": "172836", "skuCode": "010017", "skuName": "测试无供应商", "curVendorCode": null, "sourceType": null, "busType": null, "stockCountMax": null, "stockCountMin": null, "sort": 1, "posIsShow": 1, "isCommon": 0, "safetyStock": null, "type": 1, "discountRate": 0.0000, "fixedPrice": null, "canDelete": 1 }, { "id": "1478617370383425537", "tenantId": "1428550468858155008", "version": 1, "createdBy": "管理员", "createdTime": 1641364827000, "updatedBy": "管理员", "updatedTime": 1641365242000, "deleted": 0, "shopId": "1463794264034119680", "shopName": "66", "skuId": "172836", "skuCode": "010017", "skuName": "测试无供应商", "curVendorCode": null, "sourceType": null, "busType": null, "stockCountMax": null, "stockCountMin": null, "sort": 1, "posIsShow": 1, "isCommon": 0, "safetyStock": null, "type": 1, "discountRate": 0.0000, "fixedPrice": null, "canDelete": 1 }, { "id": "1478617370400202754", "tenantId": "1428550468858155008", "version": 1, "createdBy": "管理员", "createdTime": 1641364827000, "updatedBy": "管理员", "updatedTime": 1641365242000, "deleted": 0, "shopId": "1463794411082223616", "shopName": "77", "skuId": "172836", "skuCode": "010017", "skuName": "测试无供应商", "curVendorCode": null, "sourceType": null, "busType": null, "stockCountMax": null, "stockCountMin": null, "sort": 1, "posIsShow": 1, "isCommon": 0, "safetyStock": null, "type": 1, "discountRate": 0.0000, "fixedPrice": null, "canDelete": 1

}]

第二组数据的shopId和树数据的id对应起来后判断第二组数据的canDelete，如果canDelete为0那么给树数据对应的一条增加disabled:true

回答：

写一个递归遍历树结构

// 树结构数据
const treeData = [];
// 第二组数据
const shopList = [];
// 递归遍历树的方法
function traverseTree(treeList) {
  treeList.forEach(node => {
    const { hasChildren, children, id } = node;
    const targetNode = shopList.find(item => item.shopId == id);
    if (targetNode && targetNode.canDelete === 0) {
      node.disabled = true;
    }
    hasChildren && traverseTree(children);
  })
}traverseTree(treeData);

回答：

假设树数据赋值给变量 tree，第二组数组（列表）赋值给 permList

第一种方法，遍历树，把所有节点找出来，做成表（方便查找）；然后遍历 permList 所有 canDelete === 0 的项，按 shopId 去表里找树节点，找到之后修改它

function flatTree(nodes) {
    return nodes.flatMap(node => {
        return node.hasChildren
            ? [node, ...flatTree(node.children)]
            : node;
    });
}
const nodes = flatTree(tree);
const nodeMap = new Map(nodes.map(node => [node.id, node]));
permList
    .filter(({ canDelete }) => canDelete === 0)
    .forEach(perm => {
        const node = nodeMap.get(perm.shopId);
        if (node) { node.disabled = true; }
    });console.dir(tree, { depth: null });

第二种方法，把 permList 做成表（方便查找，但如果查找次数不多也可以不做成表，用遍历查找 —— 哦，如果过滤了 canDelete 的话，已经不需要 map 了，只需要一个 shopId 集合），然后遍历树，去处理符合条件的树节点

const cannotDeleteIds = new Set(
    permList
        .filter(({ canDelete }) => canDelete === 0)
        .map(perm => perm.shopId)
);
const nodes = [...tree];
while (nodes.length > 0) {
    const node = nodes.shift();
    if (cannotDeleteIds.has(node.id)) {
        node.disabled = true;
    }
    if (node.hasChildren) {
        nodes.push(...node.children);
    }
}console.dir(tree, { depth: null });

PS：上面的代码写到 while (nodes.length > 0) 的时候，Copilot 居然帮我把遍历补出来了…… AI 好可怕！

以上是 js树结构根据另一组数据设置禁用的全部内容，来源链接： utcz.com/p/936831.html