使用jQuery从JSON对象创建树表
我从服务器端将以下数据结构作为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
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)