3

我有以下数据结构作为来自服务器端的 JSON 对象

var data = {
    "name": "preprodwizard",
    "cSVServers": [{
        "name": "preprodwizard_80_csvs",
        "status": "UP",
        "ipAddress": "162.115.34.53",
        "port": "80",
        "protocol": "HTTP",
        "lBVServers": [{
            "name": "preprodwizard_static_lbvs",
            "status": "UP",
            "ipAddress": "0.0.0.0",
            "port": "0",
            "protocol": "HTTP",
            "serviceGroups": [{
                "name": "preprodwizard_static_30443_sg",
                "status": "--",
                "ipAddress": "--",
                "port": "--",
                "protocol": "--",
                "servers": [{
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.28",
                    "port": "30443",
                    "protocol": "--"
                }, {
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.37",
                    "port": "30443",
                    "protocol": "--"
                }]
            }]
        }]
    }, {
        "name": "preprodwizard_443_csvs",
        "status": "UP",
        "ipAddress": "162.115.34.53",
        "port": "443",
        "protocol": "SSL",
        "lBVServers": [{
            "name": "preprodwizard_static_lbvs",
            "status": "UP",
            "ipAddress": "0.0.0.0",
            "port": "0",
            "protocol": "HTTP",
            "serviceGroups": [{
                "name": "preprodwizard_static_30443_sg",
                "status": "--",
                "ipAddress": "--",
                "port": "--",
                "protocol": "--",
                "servers": [{
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.28",
                    "port": "30443",
                    "protocol": "--"
                }, {
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.37",
                    "port": "30443",
                    "protocol": "--"
                }]
            }]
        }, {
            "name": "preprodwizard_web_lbvs",
            "status": "UP",
            "ipAddress": "0.0.0.0",
            "port": "0",
            "protocol": "HTTP",
            "serviceGroups": [{
                "name": "preprodwizard_web_28443_sg",
                "status": "--",
                "ipAddress": "--",
                "port": "--",
                "protocol": "--",
                "servers": [{
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.28",
                    "port": "28443",
                    "protocol": "--"
                }, {
                    "name": "--",
                    "status": "UP",
                    "ipAddress": "10.255.48.37",
                    "port": "28443",
                    "protocol": "--"
                }]
            }]
        }]
    }]
};

现在我想用这个 JSON 对象创建一个树表结构。例如

会有多个 csvServer，每个 csvServer 都会有一些属性，例如名称/状态/ipAddress/端口/协议，它们将在一行中

现在每个 csvServer 将具有 IBVServer，每个 IBVServer 将具有 ServiceGroups，并且每个 ServiceGroups 将具有服务器。

如何为上述数据结构创建此树表http://wwwendt.de/tech/dynatree/doc/samples.html 。

4

1 回答 1

4

您提到的 dynatree 似乎没有树表功能。我可以使用jsTreeTable提出解决方案。

    function normalize(data, hirarchy) {
        var hirarchy = hirarchy.slice(0)
        var nextLevel = hirarchy.shift()
        $.each(data, function(i, d) {
            d['children'] = d[nextLevel]
            if (hirarchy.length > 0) {
                normalize(d[nextLevel], hirarchy)
            }
        })
    }
    normalize(data.cSVServers, [ 'lBVServers', 'serviceGroups', 'servers' ])

    com_github_culmat_jsTreeTable.register(this)
    var options = {
        idAttr : 'name',
        slider : true,
        renderedAttr : {
            name : 'Name',
            status : 'Status',
            ipAddress : 'IP',
            port : 'Port',
            protocol : 'Protocol'
        },
        initialExpandLevel : 4
    }
    appendTreetable(data.cSVServers, options)
于 2013-09-03T20:04:28.280 回答