Question

我需要使用YUI库的数据表和列排序。所以我正在尝试调整this example：

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

JS：如何将数据动态加载到数据表中？

1 个答案: