如何动态地将行和列添加到YUI dataTable

时间:2014-08-13 04:23:07

标签: yui yui3

我正在尝试修改the YUI sortable dataTable example以在创建dataTable后动态添加行和列。我的代码如下所示:

YUI().use("datatable-sort", function(Y) {
    var cols = [
        {key:"Company", label:"Click to Sort Column A", sortable:true},
        {key:"Phone", label:"Not Sortable Column B"},
        {key:"Contact", label:"Click to Sort Column C", sortable:true}
    ],
    data = [
        {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
        {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
        {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
    ],
    table = new Y.DataTable({
        columns: cols,
        data   : data,
        summary: "Contacts list",
        caption: "Table with simple column sorting"
    }).render("#sort");

    // Add rows and columns here.
});

1 个答案:

答案 0 :(得分:0)

您可以通过调用addRow()addRows()方法动态地将行添加到YUI dataTable中。如果您使用YUI sortable dataTable example,则可以这样做:

table.addRows(
    [{Company:"New Company", Phone:"555-555-5555", Contact:"John Smith"},
    {Company:"Old Company", Phone:"555-555-6666", Contact:"Rowdy Piper"}]);

动态加载columns可以与addColumn()类似地完成:

 table.addColumn({key:"NewColumn", label:"Column D"});

注意:您必须在代码中包含datatable-mutable模块才能使用这些方法。