使用剑道树视图时,是否有一种方法可以基于ID或文本来联合多个节点? [英] Is there a way to union multiple nodes based on ID or Text when using Kendo tree view?

查看:94
本文介绍了使用剑道树视图时,是否有一种方法可以基于ID或文本来联合多个节点?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有3个不同的对象/节点,如下所示,并且我试图形成finalObj/节点,这是3个节点的并集(唯一树列表).

I have 3 different object / node as below, and I am trying to form the finalObj / node which is the union (unique tree list) of the 3 nodes..

在树状视图中是否有一种方法可以基于文本或id联合3个对象(节点)?

Is there a method in tree view with which I can union 3 objects (nodes) based on text or id ?

First node: 

 [ { text: "TreeRoot", items: [
                                { text: "Subgroup1" },
                                { text: "Subgroup2" }   
                            ]}]

Second Node:
                 [ { text: "TreeRoot", items: [
                            { text: "Subgroup3" }   
                        ]}]


Third node:
                 [{ text: "Subgroup3",
                        items: [ {
                                text: "subgroup5",
                                items: [ {
                                        text: "subgroup6",
                                        items: [ {
                                                text: "subgroup7",
                                                items: [ {
                                                        text: "subgroup8"
                                                    }]
                                            }] }] 
                            }]}]



Final expected node (after merging):

                var finalObj= [ { text: "TreeRoot", items: [
                            { text: "Subgroup1" },
                            { text: "Subgroup2" },
                            { text: "Subgroup3",
                                items: [ {
                                        text: "subgroup5",
                                        items: [ {
                                                text: "subgroup6",
                                                items: [ {
                                                        text: "subgroup7",
                                                        items: [ {
                                                                text: "subgroup8"
                                                            }]
                                                    }] }] 
                                    }]}]}]

以下解决方案不适用于其他类型的节点.

The below solution doesnt work for other type of nodes..

对于EX:

   var node1 = [
                    { text   : "TreeRoot",
                        id:0,
                        items: [
                            { text: "Subgroup1",id:1 },
                            { text: "Subgroup2", id:2}
                        ]
                    }
                ];

            var node2 = [
                {
                    text : "TreeRoot",
                    id:0,
                    items: [
                        { text: "Subgroup3" ,
                        id:3}
                    ]
                }
            ];


            var node3 = [
                {
                    text : "TreeRoot",
                     id:0,
                    items: [
                        {
                            text : "Subgroup2",
                            id:2,
                            items: [
                                {
                                    text : "subgroup6",
                                    id:6,
                                    items: [
                                        {
                                            text : "subgroup7",
                                            id:7,
                                            items: [
                                                {
                                                    text: "subgroup8",
                                                    id:8
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ];

对于上面的示例,我最初应该只看到树的根.展开后,我应该只能看到子组1,2,3 ...,而展开第二组时,我应该能够看到子组6,7,8.

For above example I should see just tree root initially. When expanded I should see just subgroup1,2,3... and when subgroup2 is expanded I should be able to see subgroup6,7,8.

我需要唯一的父节点和子节点.如果使用上述结构,我将获得2个名为Subgroup3的子节点.

I need unique parent and child nodes.. If I use the above structure, I get 2 child node named- Subgroup3

推荐答案

尽管您将其标记为Kendo-UI,但这实际上是一个编程问题,因为没有KendoUI接口可以解决(我知道您想将其用于合并treeview节点),但是用递归来解决它不是很困难.

Although you tag it as Kendo-UI it is actually a programming problem since there is no KendoUI interface for solving (I know that you want to use it for merging treeview nodes) it but it is not very hard solving it using recursion.

这基本上是您的三个节点:

This are basically your three nodes:

var node1 = [
    { text   : "TreeRoot",
        items: [
            { text: "Subgroup1" },
            { text: "Subgroup2" }
        ]
    }
];

var node2 = [
    {
        text : "TreeRoot",
        items: [
            { text: "Subgroup3" }
        ]
    }
];


var node3 = [
    {
        text : "Subgroup3",
        items: [
            {
                text : "subgroup5",
                items: [
                    {
                        text : "subgroup6",
                        items: [
                            {
                                text : "subgroup7",
                                items: [
                                    {
                                        text: "subgroup8"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
];

您可以使用以下功能将其合并:

You can merge it using the following function:

function merge(node1, node2) {
    if (node2 !== null) {
        if (node1.text === node2.text) {
            node1.items = node1.items || [];
            $.each(node2.items, function (idx2, elem2) {
                var found = false;
                // Check that elem does not exist on node1
                $.each(node1.items, function (idx1, elem1) {
                    if (!found && elem1.text === elem2.text) {
                        found = true;
                        merge(elem1, elem2);
                    }
                });
                if (!found) {
                    node1.items.push(elem2);
                }
            });
        } else {
            if (node1.items) {
                $.each(node1.items, function (idx, item) {
                    merge(item, node2);
                });
            }
        }
    }
}

在第一个节点中合并两个节点.

That merges two nodes in the first one.

您应该像这样调用它:

merge(node1[0], node2[0]);
merge(node1[0], node3[0]);

针对您的情况.

注意:我假设每个节点上只有一个元素(即node0node1node2是数组,但它们只有一个元素)

NOTE: I'm assuming that you only have one element on each of the nodes (i.e. node0, node1 and node2 are arrays but they only have one element)

此处

这篇关于使用剑道树视图时,是否有一种方法可以基于ID或文本来联合多个节点?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆