javascript - 从 JSON 数据构建表格布局(代码改进)

Question

我有一个如下所示的 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"]
}

它应该像在这个 fiddle 中一样被编译成 HTML http://jsfiddle.net/RwdWq/

这是我写的代码

 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/

我该如何解决这个问题，如果数据很大，页面有时会死机。帮助我提高性能，我想检查一下没有表格的可能性。

Answer 1

我知道如何解决您的问题。有不止一种解决方案。你的代码很长，我所有的解决方案都需要重写几乎所有你写的东西，所以我只把最重要的部分放在这里。先到先得。

<强>1。你的 json 结构很糟糕。我建议你稍微改变一下。这是我的:

编辑:作为Bergi说过，我的结构没有精确定义标题中单元格的顺序。你的这种方式更好。

var data = {

    "Column Headers" : {
        "Column1" : { 
            "Column1's SubColumn 1" : ["I am column 1", "I am column 2"], 
            "Column1's SubColumn 2" : ["I am column 1", "I am column 2"]
        },
        "Column2" : {
            "Column2's SubColumn 1": ["I am column 1", "I am column 2"], 
            "Column2's SubColumn 2" : ["I am column 1", "I am column 2"]
        },
        "Column3" : {
            "Column3's SubColumn 1": ["I am column 1", "I am column 2"], 
            "Column3's SubColumn 2": ["I am column 1", "I am column 2"]
        } 
    },

    "Row Headers" : {
        "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"] 
    },

    "Data for Table" : [
    [0, 1, 1, 2, 45, 20, 0, 1, 1, 2, 45, 20],
    [0, 1, 1, 2, 45, 20, 0, 1, 1, 2, 45, 20],
    [0, 1, 1, 2, 45, 20, 0, 1, 1, 2, 45, 20],
    [0, 1, 1, 2, 45, 20, 0, 1, 1, 2, 45, 20]
    ]
}

它仍然不完美，但至少它是人类可读的。

<强>2。 Json解析算法

您从一些函数渲染开始，它可能是恕我直言的命名空间或构造函数。然后你创建了很多小函数，然后是很长的算法部分。

尝试将您的算法拆分为更多功能，并为每个功能设置一些要点，例如:

function parseJson() { ... } 

function parseHeader() { ... } 

function parseRows() { ... } 

function renderColumnsHeaders() { ... }

function renderRow() { ... }

你也可以把它做成一个对象。然后你可以轻松地添加各种功能，如排序、过滤或其他东西。

var MyDataTable = (function () { // this is namespace

    var MyDataTable = function(json) { // this is object constructor, it will probably just loads data
        this.data = json;
    }

    // these functions are visible only inside namespace
    function parseJson() { ... } 

    function parseHeader() { ... } 

    function parseRows() { ... } 

    function renderColumnsHeaders() { ... }

    function renderRow() { ... }

    MyDataTable.prototype.renderTable = function (where) { ... } // this will render whole table

    MyDataTable.prototype.filterTableBy = function () { ... } // filter that you can implement later


return MyDataTable; // returns constructor
})();


var data = { ... } // some data

var firstTable = new MyDataTable(data);
firstTable.renderTable(someDivOrAnyElementYouWant);

这样的代码几乎是专业的；)易于维护，易于扩展，易于从中制作插件；)

<强>3。提高表格渲染性能

为什么表格渲染这么慢？好吧，这可能不是因为表格，而是因为您试图一次包含的大型 html。不管是用javascript制作DOM元素还是直接把DOM元素写成html都无所谓。如果有很多元素，渲染它总是需要一段时间。

不幸的是，html 渲染是同步的。这意味着一切都被卡住，直到你的功能没有完成。它的工作方式与例如动画或 ajax 不同(它被称为“异步 JavaScript 和 XML”以引起共鸣)。

您的第一个选择是使用 ajax 并逐步加载表。为一次可以加载的行数设置一些限制。然后:* 调用ajax* 从ajax获取json* 解析它* 获取线条并渲染它们* 重复那么您的浏览器将不会卡住。渲染仍将是同步的，但两次渲染调用之间会有“窗口”，因此各种事件和其他事情都在这里完成。只是许多短尖峰不会像一个长尖峰一样卡住您的浏览器。

另一个选项是根据用户位置加载数据。用户无法一次看到所有数据。这与第一个选项非常相似，它被称为“无限滚动”。您可能已经在 facebook、google 图片上看到了...为此有 jquery 插件。

最后一个选项是使用 setInterval 或 setTimeout 原生 javascript 函数。这种技术也适用于许多较短的尖峰，除非你不使用 ajax。您首先在 javascript 中加载所有数据。然后你用这些函数一步一步渲染它们。由于这些函数异步运行，因此运行良好。但它需要更深入的理解。我这里有异步调用的例子。有些 div 会像彩虹一样改变颜色，但它不是动画: http://windkiller.g6.cz/async/async-html-render.html

编辑:

没有 table 的可能性

可以使用 div 元素或一些列表而不是表格。我不推荐它。表是为大数据而生的，浏览器的开发者正在尽最大努力提高表的性能。也许您听说过或读到过一些关于表运行缓慢的猜测。他们很慢，但这些时间已经过去了。所以在这种情况下坚持使用表格。