8

我有一个向服务器发送 ajax 请求的页面。页面上有一个表格，其中显示了一些数据。服务器返回一个 json 对象，它是一个对象列表，它不包含页面的任何布局。

我想通过返回的 json只更新表行。如何在不使用第三方库且仅使用 jquery 的情况下做到这一点？我只是想要一个粗略的想法和例子。

4

3 回答 3

18

这是演示小提琴。（简单版）
新：查看更新的小提琴（高级版）。

假设您检索了以下 JSON 数据： 

var jsonData = [
    { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },
    { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },
    { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }
];

你有这张桌子： 

<table id="data-table">
    <tr><td>There are no items...</td></tr>
</table>

现在，您需要一种可以以可自定义的顺序和存在方式解析值的方法。例如，如果您可以将字段数组传递给解析器函数；您可以设置字段的顺序，如果您愿意，可以省略一两个字段：

loadTable('data-table', ['field1', 'field2', 'field3'], jsonData);

请注意，field4未解析。

该loadTable函数遍历返回数组的项目，并使用 a<tr>中的每个字段值创建 a <td>。这是简单的功能：

function loadTable(tableId, fields, data) {
    //$('#' + tableId).empty(); //not really necessary
    var rows = '';
    $.each(data, function(index, item) {
        var row = '<tr>';
        $.each(fields, function(index, field) {
            row += '<td>' + item[field+''] + '</td>';
        });
        rows += row + '<tr>';
    });
    $('#' + tableId).html(rows);
}

更新：

增加了对：

  • 表头
  • 默认文本（用于空列表）
  • 附加列表
  • 清理桌子
  • ETC...

您现在可以简单地包含一个空表，dynamicTable其余的将处理：

<table id="data-table"></table>

调用dynamicTable.config()方法配置表： 

var dt = dynamicTable.config('data-table', //id of the table
                             ['field2', 'field1', 'field3'], //field names
                             ['header 1', 'header 2', 'header 3'], //set to null for field names to be used as header names instead of custom headers
                             'There are no items to list...'); //default text for no items

然后调用dt.load(data);加载新数据（如果有，则删除前一个列表），
或者调用dt.load(data, true);将新数据附加到前一个列表的末尾。

调用dt.clear();方法将清除整个列表。

在这里更新了小提琴。

于 2013-02-19T03:52:07.420 回答
1

您可以遍历您的 JSON 对象。

$.each(JSON_Object, function(key, value) {
    // Write your code here
});

然后你可以简单地在你的表中附加数据。

$('#yourTableName tr:last').after('<tr><td>John</td><td>$500</td></tr>');

由于您特别提到您不需要 3rd 方库，因此您可以执行上述操作。但是，如果您需要具有所有功能的数据集，您可以考虑使用一些插件，例如http://datatables.net/。

于 2013-02-19T03:39:48.290 回答
0

如果有问题的表与表 XML 中的项目引用关联到 oData 服务（例如，Fiori 中的标准），items="{/ReportSet}"则使用过滤器更新表的请求将自动更新表项目，即在 JS 中：

eTable.bindItems(sPathR,template,null,this.instanceFilter);
  • sPathR 是/ReportSet上面的实体集
  • template应该是表中的项目模板
  • this.instanceFilter是调用前定义的过滤器集
于 2020-01-20T10:33:36.180 回答