使用jQuery从JSON对象创建树表

使用jQuery从JSON对象创建树表,jquery,json,tree,Jquery,Json,Tree,我从服务器端将以下数据结构作为JSON对象提供 var data = { "name": "preprodwizard", "cSVServers": [{ "name": "preprodwizard_80_csvs", "status": "UP", "ipAddress": "162.115.34.53", "port": "80", "protocol": "HTTP", "l

我从服务器端将以下数据结构作为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对象创建一个树表结构。e、 g

将有多个csvServer,每个csvServer将有一些属性,如名称/状态/IP地址/端口/协议,这些属性将在一行中

现在,每个csvServer将有IBVServer,每个IBVServer将有ServiceGroups,每个ServiceGroups将有服务器


如何为上述数据结构创建此树表。

您提到的动态树似乎没有树表功能。 我可以提出一个解决方案使用


这很有帮助,感谢您的帮助
    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)