JS:如何动态加载数据到一个数据表

Question

我需要一个使用YUI库进行列排序的数据表。所以我试着改编这个的例子:

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");
});

我需要动态地将数据添加到该表中。因此，我将一个二维数组从服务器端传递给JS函数。它是由表示行的数组组成的数组，然后内部数组中的数据表示表的单元格数据。服务器端的数组是:

Array ( [0] => Array ( [0] => Name [1] => Age [2] => CGPA ) [1] => Array ( [0] => Alex [1] => 23 [2] => 2.5 ) [2] => Array ( [0] => Bob [1] => 24 [2] => 3 ) [3] => Array ( [0] => Mike [1] => 22 [2] => 3.9 ) ) 

这是我试图做的事情(参见for循环将数据放入cols =[...])，但它不起作用，甚至不是alert($rowsArray);部分。显然这个函数似乎根本不起作用。

M.mod_quiz.init_tabView = function(Y, params) {
    var $rowArray= params.key1;
    alert($rowArray);
    YUI().use("datatable-sort", function(Y) {
                    var cols = [
                        for (i=0; i<$rowArray.length; i++) {
                            {key:"Column "+i , label: $rowArray[0][i] , sortable=true}
                        }
                        /*{key:"Company", label:"Sort Column A", sortable:true},
                        {key:"Phone", label:"Sort Column B", sortable:true},
                        {key:"Contact", label:"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(params.key2);
                    });
};

问题:

那么我如何从数组动态加载数据到这个数据表呢?

Answer 1

您的代码在这里有一个Uncaught SyntaxError: Unexpected token for:

var cols = [
    for (i=0; i<dummyArray.length; i++) {
        {key:"Column "+i , label: dummyArray[0][i] , sortable=true}
    }
    //...
],

数组块[]中的代码期望变量或某种类型的对象(例如["foo"]或[someVariable])。但是你把一个for循环在数组中导致错误。

假设传递给我们的是指定格式的虚拟数组(因为我无法从代码中访问实际数组)，您可以这样做:

YUI().use("datatable-sort", function(Y) {
    // dummyArray since I cannot access your external array.
    var dummyArray = [
        ["Name", "Age", "CGPA"],
        ["Alex", 23, 2.5],
        ["Bob", 24, 3],
        ["Mike", 22, 3.9]   
    ];
    // Get the array of labels from the 2d array.
    var labels = dummyArray[0];
    var cols = [];
    for (var i = 0; i < labels.length; i++) {
        cols.push({key: "Column " + i, label: labels[i], sortable: true});
    }
    // Get the 2d array and then remove the labels with a shift().
    var values = dummyArray;
    values.shift();
    var data = [];
    for (var i = 0; i < values.length; i++) {
        // Create a row object and map each value to its corresponding key.
        var row = {};
        for (var j = 0; j < values[i].length; j++) {
            row["Column " + j] = values[i][j];
        }
        // Add the row.
        data.push(row);
    }
    // Create the dataTable.
    var table = new Y.DataTable({
        columns: cols,
        data   : data,
    }).render("#sort");
});