Question

这是我的JSON数据

{
    "TEST": [{
        "Name": "gm:check-GetMap-request",
        "Result": "Passed",
        "ObjectID": 1,
        "ParentID": 0,
        "Indent": 1
    }, {
        "Name": "basic:mandatory-params",
        "Result": "Passed",
        "ObjectID": 2,
        "ParentID": 1,
        "Indent": 2
    }, {
        "Name": "basic:version",
        "Result": "Passed",
        "ObjectID": 3,
        "ParentID": 1,
        "Indent": 2
    }, {
        "Name": "basic:request",
        "Result": "Passed",
        "ObjectID": 4,
        "ParentID": 1,
        "Indent": 2
    }, {
        "Name": "gm:core-map-request",
        "Result": "Passed",
        "ObjectID": 5,
        "ParentID": 1,
        "Indent": 2
    }, {
        "Name": "gm:layers-count",
        "Result": "Passed",
        "ObjectID": 6,
        "ParentID": 5,
        "Indent": 3
    }, {
        "Name": "gm:layers-names",
        "Result": "Passed",
        "ObjectID": 7,
        "ParentID": 5,
        "Indent": 3
    }, {
        "Name": "gm:styles-count",
        "Result": "Passed",
        "ObjectID": 8,
        "ParentID": 5,
        "Indent": 3
    }, {
        "Name": "gm:styles-names",
        "Result": "Passed",
        "ObjectID": 9,
        "ParentID": 5,
        "Indent": 3
    }, {
        "Name": "gm:crs",
        "Result": "Passed",
        "ObjectID": 10,
        "ParentID": 5,
        "Indent": 3
    }, {
        "Name": "gm:bbox-format",
        "Result": "Passed",
        "ObjectID": 11,
        "ParentID": 5,
        "Indent": 3
    }, {
        "Name": "gm:bbox-non-subsettable-layers",
        "Result": "Passed",
        "ObjectID": 12,
        "ParentID": 5,
        "Indent": 3
    }, {
        "Name": "gm:format",
        "Result": "Passed",
        "ObjectID": 13,
        "ParentID": 5,
        "Indent": 3
    }, {
        "Name": "gm:width-height",
        "Result": "Passed",
        "ObjectID": 14,
        "ParentID": 5,
        "Indent": 3
    }, {
        "Name": "gm:width-height",
        "Result": "Passed",
        "ObjectID": 15,
        "ParentID": 5,
        "Indent": 3
    }, {
        "Name": "gm:transparent",
        "Result": "Passed",
        "ObjectID": 16,
        "ParentID": 5,
        "Indent": 3
    }]
}

我不明白该怎么做。我想用jquery做这个。

Answer 1

我认为这就是你要找的东西？并且有许多插件可以为您完成。 www.jstree.com是其中之一。

var data = [
    {
        "text": "Chocolate Beverage",
        "id": "1",
        "parentid": "-1"
    }, {
        "id": "2",
        "parentid": "1",
        "text": "Hot Chocolate"
    }, {
        "id": "3",
        "parentid": "1",
        "text": "Peppermint Hot Chocolate"
    }, {
        "id": "4",
        "parentid": "1",
        "text": "Salted Caramel Hot Chocolate"
    }, {
        "id": "5",
        "parentid": "1",
        "text": "White Hot Chocolate"
    }, {
        "id": "6",
        "text": "Espresso Beverage",
        "parentid": "-1"
    }, {
        "id": "7",
        "parentid": "6",
        "text": "Caffe Americano"
    }, {
        "id": "8",
        "text": "Caffe Latte",
        "parentid": "6"
    }, {
        "id": "9",
        "text": "Caffe Mocha",
        "parentid": "6"
    }, {
        "id": "10",
        "text": "Cappuccino",
        "parentid": "6"
    }, {
        "id": "11",
        "text": "Pumpkin Spice Latte",
        "parentid": "6"
    }, {
        "id": "12",
        "text": "Frappuccino",
        "parentid": "-1"
    }, {
        "id": "13",
        "text": "Caffe Vanilla Frappuccino",
        "parentid": "12"
    }, {
        "id": "15",
        "text": "450 calories",
        "parentid": "13"
    }, {
        "id": "16",
        "text": "16g fat",
        "parentid": "13"
    }, {
        "id": "17",
        "text": "13g protein",
        "parentid": "13"
    }, {
        "id": "14",
        "text": "Caffe Vanilla Frappuccino Light",
        "parentid": "12"
    }]

我们将遍历数据并构建我们将传递给Tree插件的分层数据源。这是builddata函数的代码。

var builddata = function () {
    var source = [];
    var items = [];
    // build hierarchical source.
    for (i = 0; i < data.length; i++) {
        var item = data[i];
        var label = item["text"];
        var parentid = item["parentid"];
        var id = item["id"];

        if (items[parentid]) {
            var item = { parentid: parentid, label: label, item: item };
            if (!items[parentid].items) {
                items[parentid].items = [];
            }
            items[parentid].items[items[parentid].items.length] = item;
            items[id] = item;
        }
        else {
            items[id] = { parentid: parentid, label: label, item: item };
            source[id] = items[id];
        }
    }
    return source;
}

在调用builddata函数之后，我们将拥有一个可由Tree读取的数据源。让我们创建Tree插件并用数据填充它。要将jqxTree添加到页面，您应该包含javascript文件和css样式表。您可以在这里查看依赖项列表：jquery-tree-getting-started下一步是将DIV元素添加到文档的正文中。

<div id='jqxTree'>
</div>

最后，调用builddata函数并创建jqxTree。

var source = builddata();
// create jqxTree
$('#jqxTree').jqxTree({ source: source, width: '350px' });

将此JSON数据转换为TREE视图

1 个答案: