Question

我有以下数据结构作为服务器端的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对象创建一个Tree表结构。 e.g。

会有多个csvServers，每个csvServer都会有一些属性，如name / status / ipAddress / Port / Protocol，它们将在一行中

现在每个csvServer都有IBVServers，每个IBVServer都有ServiceGroup，每个ServiceGroup都有服务器。

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

Answer 1

你提到的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)

使用jQuery从JSON对象创建树表

1 个答案: