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