【问题标题】:javascript recursive multi dimensional problemjavascript递归多维问题
【发布时间】:2020-04-28 07:40:47
【问题描述】:

我有一个权限数组,这个数组是点格式的,我想格式化它以在树视图中编辑它。我已经从几个forEach循环中转换了数组,但是由于有很多孩子,我回到了递归格式,这次我无法移动到子树之后的下一部分.

我的原始格式化数组:

var permArray = [
0: {id: 1, name: "auth.login"},
1: {id: 2, name: "dashboard.open"},
2: {id: 3, name: "account.view.others"},
3: {id: 4, name: "account.edit.roles"},
4: {id: 5, name: "account.delete.others"},
5: {id: 6, name: "menu.view.list"},
6: {id: 7, name: "developer.main.title"},
7: {id: 8, name: "developer.main.users"},
8: {id: 9, name: "developer.main.menu"},
9: {id: 10, name: "developer.main.roles"},
10: {id: 11, name: "users.have.branches"},
11: {id: 12, name: "add.users.branches"},
12: {id: 13, name: "edit.users.branches"},
13: {id: 14, name: "list.users.branches"},
14: {id: 15, name: "view.roles.manage.page"},
15: {id: 16, name: "view.users.manage.page"},
16: {id: 17, name: "view.menu.manage.page"},
17: {id: 18, name: "view.branch.products.manage.page"},
18: {id: 19, name: "view.branch.reports.manage.page"},
19: {id: 20, name: "sube.owned.list.product"},
20: {id: 21, name: "sube.owned.list.rapor"},
21: {id: 22, name: "branches.menu.title"},
22: {id: 23, name: "view.branches.menu.item"},
23: {id: 24, name: "users.state.edit"},
24: {id: 25, name: "isMultiLogin"},
25: {id: 26, name: "isViewSummaryAccount"},
26: {id: 27, name: "view.others.info"},
27: {id: 28, name: "addNewAccount"}
];

这是我最后一个递归函数

function buildTree(perms, nodeIndex = 0, permIndex = 0) {
    var out = [],
        form = this.getForm(),
        tmpKeys = perms[permIndex].name.split(".");
    if (permIndex == perms.length - 1) {
        return out;
    } else {
        if (nodeIndex == tmpKeys.length - 1) {
            form.id = perms[permIndex].id;
            form.text = tmpKeys[nodeIndex];
            return form;
        } else {
            form.id = nodeIndex + "-" + permIndex;
            form.text = tmpKeys[nodeIndex];
            if (tmpKeys.length - 1 > nodeIndex) {
                if (!("children" in form))
                    form["children"] = [];

                form["children"].push( buildTree(perms, ++nodeIndex, permIndex) );
            }
            return form;
        }
    }
}

这个函数的结果

{ id: "0-0",text: "auth",children: [{ id: 1, text: "login" }] }

但我想做什么

[{
        id: "0-0",
        text: "auth",
        children: [{
            id: 1,
            text: "login"
        }]
    },
    {
        id: "0-1",
        text: "dashboard",
        children: [{
            id: 2,
            text: "open"
        }]
    },

    {
        id: "0-2",
        text: "account",
        children: [{
                id: "1-2",
                text: "view"
                children: [{
                    id: 3,
                    text: "others"
                }]
            },
            id: "1-3",
            text: "edit",
            children: [{
                id: 4,
                text: "roles"
            }]

        ]
    },...continue]

【问题讨论】:

  • ungiven id的规则是什么?
  • 独一无二,没有规则谢谢你的回答

标签: javascript arrays string recursion treeview


【解决方案1】:

您可以采用迭代方法,使用拆分后的name 获取嵌套对象。

这种方法采用与未知节点不同的id,但对于离开节点采用给定的id

var array = [{ id: 1, name: "auth.login" }, { id: 2, name: "dashboard.open" }, { id: 3, name: "account.view.others" }, { id: 4, name: "account.edit.roles" }, { id: 5, name: "account.delete.others" }, { id: 6, name: "menu.view.list" }, { id: 7, name: "developer.main.title" }, { id: 8, name: "developer.main.users" }, { id: 9, name: "developer.main.menu" }, { id: 10, name: "developer.main.roles" }, { id: 11, name: "users.have.branches" }, { id: 12, name: "add.users.branches" }, { id: 13, name: "edit.users.branches" }, { id: 14, name: "list.users.branches" }, { id: 15, name: "view.roles.manage.page" }, { id: 16, name: "view.users.manage.page" }, { id: 17, name: "view.menu.manage.page" }, { id: 18, name: "view.branch.products.manage.page" }, { id: 19, name: "view.branch.reports.manage.page" }, { id: 20, name: "sube.owned.list.product" }, { id: 21, name: "sube.owned.list.rapor" }, { id: 22, name: "branches.menu.title" }, { id: 23, name: "view.branches.menu.item" }, { id: 24, name: "users.state.edit" }, { id: 25, name: "isMultiLogin" }, { id: 26, name: "isViewSummaryAccount" }, { id: 27, name: "view.others.info" }, { id: 28, name: "addNewAccount" }],
    result = array.reduce((r, { id, name }) => {
        name.split('.')
            .reduce((o, text, i, { length }) => {
                var temp = (o.children = o.children || []).find(q => q.text === text);
                if (!temp) o.children.push(temp = { id: i + 1 === length ? id : [i, id - 1].join('-'), text });
                return temp;
            }, { children: r });
        return r;
    }, []);

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】:

  • 太棒了,我真的很努力。谢谢@NinaScholz
猜你喜欢
  • 1970-01-01
  • 2011-11-27
  • 2019-06-30
  • 2010-12-09
  • 2011-10-24
  • 1970-01-01
  • 1970-01-01
  • 2010-11-18
相关资源
最近更新 更多