基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

让我来为您详细讲解基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合的攻略。

需要的前置知识

在学习本篇教程之前，您需要对以下内容有一定的了解：

MVC5框架基础
Bootstrap组件的使用
jQuery TreeView树形控件的使用

如果您还不了解以上知识，可以先学习相关内容再来阅读本篇攻略。

准备工作

在开始本篇攻略之前，您需要先准备好以下环境：

Visual Studio 2015及以上版本
.NET Framework 4.5及以上版本
jQuery TreeView插件的源代码

支持json字符串的Treeview树形控件

让我们先来看一个支持json字符串的Treeview树形控件的示例：

<div id="treeview"></div>

$(function () {
    var tree = [
        {
            text: "Parent 1",
            nodes: [
                {
                    text: "Child 1",
                    nodes: [
                        {
                            text: "Grandchild 1"
                        },
                        {
                            text: "Grandchild 2"
                        }
                    ]
                },
                {
                    text: "Child 2"
                }
            ]
        },
        {
            text: "Parent 2"
        },
        {
            text: "Parent 3"
        }
    ];

    $('#treeview').treeview({
        data: JSON.stringify(tree)
    });
});

如上所示，我们创建了一个TreeView控件，将data属性设置为一个json字符串，通过JSON.stringify()方法将js数组对象转换为json字符串格式。这里我们的json数据是嵌套的，所以我们可以展示出多层子节点。

支持list集合的Treeview树形控件

让我们再来看一个支持list集合的Treeview树形控件的示例：

<div id="treeview"></div>

$(function () {
    var tree = [
        {
            id: 1,
            text: "Parent 1",
            nodes: [
                {
                    id: 2,
                    text: "Child 1",
                    nodes: [
                        {
                            id: 3,
                            text: "Grandchild 1"
                        },
                        {
                            id: 4,
                            text: "Grandchild 2"
                        }
                    ]
                },
                {
                    id: 5,
                    text: "Child 2"
                }
            ]
        },
        {
            id: 6,
            text: "Parent 2"
        },
        {
            id: 7,
            text: "Parent 3"
        }
    ];

    $('#treeview').treeview({
        data: getTreeviewData(tree)
    });
});

function getTreeviewData(data) {
    var result = [];

    $.each(data, function (index, item) {
        var node = {
            text: item.text
        };

        if (item.nodes) {
            node.nodes = getTreeviewData(item.nodes);
        }

        result.push(node);
    });

    return result;
}

这里我们创建了一个TreeView控件，将data属性设置为一个list集合。由于Treeview控件需要的数据格式和我们的数据结构不太一样，所以我们需要使用一个辅助函数将我们的list集合转换为Treeview所需的数据格式。在代码中，我们使用了jQuery的each方法来迭代我们的源数据，并递归调用getTreeviewData方法来生成子节点数据。