我有一个如下所示的 JSON 对象，我正在使用下面的包装函数将 JSON 转换为 HTML
从 JSON 检索的部分：
var data = { "Column Headers" : [ // Hierarchy is not limited to two levels, it is n level
[ "Column1" , ["Column1's SubColumn 1", "Column1's SubColumn 2"] ],
[ "Column2" , ["Column2's SubColumn 1", "Column1's SubColumn 2"] ],
[ "Column3" , ["Column3's SubColumn 1", "Column1's SubColumn 2"] ]
],
"Columns under subColumns" : ["I am column 1", "I am column 2"],
"Data for Table" :[
{ "name": ["Group 1","Sub Group 1"], "data" : [[0,1],[1,2],[45,20],[0,1],[1,2],[45,20]]},
{ "name": ["Group 1","Sub Group 2"], "data" : [[0,1],[1,2],[45,20],[0,1],[1,2],[45,20]]},
{ "name": ["Group 2","Sub Group 1"], "data" : [[0,1],[1,2],[45,20],[0,1],[1,2],[45,20]]},
{ "name": ["Group 2","Sub Group 2"], "data" : [[0,1],[1,2],[45,20],[0,1],[1,2],[45,20]]}
], // here the hierarchy is not limited to two sub groups.. it could be any number..
"row group headers" : ["Group 1 Header", "Sub group Header"]
}
它应该像这个小提琴一样被编译成 HTMLhttp://jsfiddle.net/RwdWq/一样编译成 HTML
这是我写的代码
var render = function(data){
var formattedData = {};
function returnRowsData( obj ) {
return obj["Data for Table"];
}
function returnColsData(obj) {
return obj["Column Headers"];
}
function rowLabels(obj) {
return obj["row group headers"];
}
function bottomColLabels(obj) {
return obj["Columns under subColumns"];
}
function simplifyCols(obj) {
var reform = {
table : {}
}, bottomLabs = bottomColLabels(data);
var y = 0;
for(var i = 0, l = obj.length; i < l; i++){
var key = obj[i];
key.push(bottomLabs);
for (var j = 0, m = key.length; j < m; j++) {
var colspan = 1;
for (var k = j + 1; k < m; k++) {
colspan *= key[k].length;
}
reform.table[j] = reform.table[j] || [];
if (j == 0) {
y += colspan;
}
reform.table[j].push({
span : colspan,
data : key[j]
});
}
}
reform.count = y;
return reform;
}
var formatted = simplifyCols( returnColsData( data[0]) ) || {};
var cols = formatted.table;
//console.log(cols);
formattedData.cols = cols;
var keys = Object.keys(cols).sort(function(a, b){
return a - b;
});
var table = document.createElement('table');
for (var i = 0, l = keys.length - 1; i < l; i++) {
var keyData = cols[keys[i]], tr = document.createElement('tr');
if (i == 0) {
var rLs = rowLabels(data[0]);
for (var rL = 0; rL < rLs.length; rL++) {
var td = document.createElement('th');
td.innerHTML = rLs[rL];
td.rowSpan = keys.length;
td.className = "rowLabel";
tr.appendChild(td);
}
}
table.appendChild(tr);
for (var j = 0, m = keyData.length; j < m; j++) {
var eleData = keyData[j].data;
if(eleData instanceof Array){
for (var k = 0, n = eleData.length; k < n; k++) {
var td = document.createElement('td');
td.innerHTML = eleData[k];
td.colSpan = keyData[j].span;
td.className = "colHeaders";
tr.appendChild(td);
}
}else{
var td = document.createElement('td');
td.innerHTML = keyData[j].data;
td.colSpan = keyData[j].span;
td.className = "colHeaders";
tr.appendChild(td);
}
}
table.appendChild(tr);
}
var tr = document.createElement('tr');
var noOfbottomLabs = formatted.count ? formatted.count / bottomLabs.length : bottomLabs.length;
for (var i = 1; i <= noOfbottomLabs; i++) {
for (var j = 0; j < bottomLabs.length; j++) {
var td = document.createElement('td');
td.innerHTML = bottomLabs[j];
td.className = "bottomLabs";
tr.appendChild(td);
}
}
table.appendChild(tr);
function setToValue(obj, value, path) {
var parent = obj;
for (var i = 0; i < path.length - 1; i += 1) {
parent[path[i]] = parent[path[i]] || {}
parent = parent[path[i]];
}
parent[path[path.length-1]] = value;
}
var rowsData = returnRowsData(data), tempRows = {}, tempArr = {};
for (var i = 0, l = rowsData.length; i < l ; i++) {
var names = rowsData[i].name, _data = rowsData[i].data;
setToValue(tempRows, _data, names);
}
var similiar = {};
for (var ele = 0, lent = rowsData.length; ele < lent; ele++) {
var curD = rowsData[ele], tr = document.createElement('tr');
for (var i = 0; i < curD.name.length; i++) {
var td = document.createElement('td');
td.innerHTML = curD.name[i] || "-";
td.setAttribute('val', curD.name[i]);
td.className = "rowHeader";
similiar[curD.name[i]] = 0;
tr.appendChild(td);
}
var merg = [];
merg = [].concat.apply( merg, curD.data);
for (var i = 0; i < merg.length; i++) {
var td = document.createElement('td');
td.innerHTML = merg[i] || "-";
td.className = "tdData";
tr.appendChild(td);
}
table.appendChild(tr);
console.log(merg);
}
document.body.appendChild(table);
for (var text in similiar) {
var elements = document.querySelectorAll('[val="' + text + '"]');
elements[0].rowSpan = elements.length;
for (var j = 1; j < elements.length; j++) {
var v = elements[j];
v.parentNode.removeChild(v);
}
}
}
目前它的工作方式是这样的http://jsfiddle.net/RwdWq/3/
如果数据很大，我该如何解决这个问题并且页面有时会死掉。帮我提高性能，我想检查一下没有桌子的可能性。