javascript - 如何向可容纳行/单元格添加数据值

Question

我正在创建这样的footable:

        $('#itemsTable').footable({
        "rows": items.AllItems,
        "paging": {
            "size": 20,
            "container": '#pagination-container',
            "countFormat": "Страница {CP} из {TP}",
            "limit": 8
        },
        "sorting": {
            "enabled": true
        }
    });

我需要添加到所有 <tr>和<td>数据值。它应该看起来像这样:

<tr data-id="1">Value</tr>

td 也一样:

<td data-id="1">Value</td>

Answer 1

如果您能够修改 JSON，则可以通过每个对象属性的嵌套“选项”属性添加单元格数据 ( <td..> ) 的数据属性。因此，如果您想附加 data-id ，它看起来像这样:

{
    "property1": {
        "options": {
            "id": "1"
        },
        "value": "<span class =\"row-val\"> </span>"
    }
}

为了更改表行( <tr..> )上的数据属性，没有默认选项来允许这种自定义行为，我可以从文档中看到 - 但可以覆盖 FooTable.Row#$create方法来达到您想要的结果。这需要在 FooTable 包含在页面中之后访问和扩展插件:

(function($, F){

    // Extend the Row.$create method to add an id attribute to each <tr>.
    F.Row.extend("$create", function(){
        // call the original method
        this._super();
        // get the current row values
        var values = this.val();
        // then add whatever attributes are required
        this.$el.attr("id", values["your-id-column-name"]);
    });

})(jQuery, FooTable);

Reference