Question

我需要在以下结构中以HTML格式显示数据

          Region
--------------------------------
outlet1 | outlet2 | outlet3 |
---------------------------------
123     | 323     | 123  
233     | 34234   | 23234

出口数量不固定。我的Java对象的变量将由动作形成，并将作为JSON抛出

DataObject : regionName, outletName, personName, count

将使用这些DataObject的列表。

如何使用Data Table或plain Jquery绘制它们。我认为目前数据表不允许动态列绑定.. :(

Answer 1

您可以通过执行以下步骤来实现这一目标;

将您的java模型作为json从您的操作返回到客户端html
解析JSON并生成html表

根据你的问题，我在以下结构中开发了一个json;

{
    regionName: "India",
    outlets: [
        {
            outletName: "outlet1",
            personName: "debrup",
            count: "430"
        }
    ]
}

让我给你举个例子;

$(document).ready(function() {

    var jsonObj = [
        {
            regionName: "India",
            outlets: [
                {
                    outletName: "outlet1",
                    personName: "debrup",
                    count: "430"
                },
                {
                    outletName: "outlet12",
                    personName: "debrup2",
                    count: "440"
                }
            ]
        }
    ];                 

    var html = '<table border="1">';
    $.each(jsonObj, function(i, region) {
        html += '<tr><td>' + region.regionName + '</th></tr>';
        html += '<tr><td></td>'
        $.each(region.outlets, function(x, outlet) {
                html += '<td><b>' + outlet.outletName + '</b></td>';
        });
        html += '</tr><tr>';
        html += '<td>personName</td>';
        $.each(region.outlets, function(key, value) {
            html += '<td>' + value.personName + '</td>';    
        });
        html += '</tr><tr>';
        html += '<td>count</td>';
        $.each(region.outlets, function(key, val) {
            html += '<td>' + val.count + '</td>';
        });
        html += '</tr>';

    });
    html += '</table>';

    $("#table").html(html);
});

您可以在此处看到工作小提琴： http://jsfiddle.net/Y8qHZ/19/ 。更改json值并查看其工作原理

Answer 2

您不需要解析json数据来创建表 - 如果您正确调用它，DataTable插件将为您执行此操作。

在为表行生成json数据结构的代码中，您还可以为表头生成数据结构，然后使用aaData和aoColumns参数将它们作为参数传递给数据表初始化。

生成标题数据应该很容易，因为在生成行数据时，您将循环遍历列。

无论如何都适合我......

使用DataTable或plain JQUERY动态创建列/ HTML表

2 个答案: