Question

我在php中有一组数据，我需要在HTML表格中显示这些数据。以下是示例数据集的样子。

Array(
  Array
  (
     [comparisonFeatureId] => 1182
     [comparisonFeatureType] => Category
     [comparisonValues] => Array
                 (
                 [0] => Not Available
                 [1] => Standard
                 [2] => Not Available
                 [3] => Not Available
                 )
    [featureDescription] => Rear Seat Heat Ducts
),)

数据集是3个项目的比较（显示在数组的comparisonValues索引中）

最后我需要该行看起来与此类似

<tr class="alt2 section_1"> 
   <td><strong>$record['featureDescription']</strong></td> 
   <td>$record['comparisonValues'][0]</td> 
   <td>$record['comparisonValues'][1]</td> 
   <td>$record['comparisonValues'][2]</td> 
   <td>$record['comparisonValues'][3]</td> 
</tr>

我遇到的问题是如何做到这一点。我应该在服务器端创建整个表HTML，通过ajax调用传递它，只是将预呈现的HTML数据转储到div中或传递json数据并呈现表客户端。

任何优雅的建议？

Answer 1

这取决于。有几个因素需要考虑：

您希望在网络服务器上浪费多少CPU和网络带宽？生成和发送HTML不仅仅是发送一个紧凑的JSON字符串。
您想在Web浏览器上浪费多少CPU和内存？在HTML DOM树中生成表不仅仅是将现成的字符串插入innerHTML。
您希望Web服务的可重用性如何？返回“静态”HTML对每个人都没用。更灵活的格式（如XML或JSON）更有用（将来也适用于您自己）。

到目前为止，我建议返回JSON并让JS / jQuery在客户端填充它。

更新：假设JSON数据将以此格式到达

var json = {"features": [{
    "comparisonFeatureId": 1182,
    "comparisonFeatureType": "Category",
    "comparisonValues": [ "Not Available", "Standard", "Not Available", "Not Available" ],
    "featureDescription": "Rear Seat Heat Ducts"
}, {
    "comparisonFeatureId": 1183,
    "comparisonFeatureType": "Category",
    "comparisonValues": [ "Not Available", "Standard", "Not Available", "Not Available" ],
    "featureDescription": "Some Description"
}]};

并且你有一个像这样的空表

<table id="table"></table>

然后您可以使用以下jQuery脚本以您在问题中描述的方式填充它

$.each(json.features, function(i, feature) {
    var row = $('<tr class="alt2 section_1">').appendTo($('#table'));
    row.append($('<td>').append($('<strong>').text(feature.featureDescription)));
    $.each(feature.comparisonValues, function(j, comparisonValue) {
        row.append($('<td>').text(comparisonValue));
    });
});

Answer 2

dnaluz，

如其他人所提到的那样，那里有很多很好的lib来做thios客户端。我还认为你最好将json数组发送到客户端，然后使用lib以表格格式显示数据。

虽然我提到使用漂亮的表示库来创建表，下面是一个小函数，我用来从json数组中轻量级快速和脏表可视化：

function CreateTableFromJson(objArray) {
    // has passed in array has already been deserialized
    var array = typeof  objArray != 'object' ? JSON.parse(objArray) : objArray;

    str = '<table class="tableNormal">';
    str += '<tr>';
    for (var index in array[0]) {
        str += '<th scope="col">' + index + '</th>';
    }
    str += '</tr>';
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
        for (var index in array[i]) {
            str += '<td>' + array[i][index] + '</td>';
        }
        str += '</tr>';
    }
    str += '</tbody>'
    str += '</table>';
    return str;
}

希望这在某些方面很有用.. 吉姆

[edit] - 这是使用非常类似技术的页面链接： http://www.zachhunter.com/2010/04/json-objects-to-html-table/

Answer 3

作为JSON发送的好处是从数据层中删除表示层。我会做表客户端 - 有库和博客教程来处理渲染。

如果你有资金，extJS也是一种相当简单的方法。

Answer 4

欢迎使用Stack Overflow。

我认为无论哪种方式都行......我发现当你一次显示整个表（或行）时，在服务器端的响应中包含大量标记会更容易。如果您将数据位动态地放入页面中已有的表中，您可能希望在客户端呈现它。

将json数据转换为HTML表

4 个答案: