Javascript - 如何动态地将对象添加到 kendo ui 网格中的列数组？

Question

正如标题所暗示的那样，我正在尝试在列数组中生成对象，尽管我还没有找到工作方法。

alert( "Value 1: " + temporaryArray[1] + " - " + finalArray[1].values ); 
alert( "Value 2: " + temporaryArray[2] + " - " + finalArray[2].values ); 
var myGrid =  $("#grid").kendoGrid( 
{
    columns: 
    [
        {
            title: temporaryArray[0] + " ",
            field: gridArray[0].values + " "
        }
    ],
    dataSource: 
    {
        data:finalArray,
        pageSize:10
    },
    scrollable:false,
    pageable:true 
});

我尝试了以下方法来添加对象：

for( var x = 0; x < finalArray.length; x++ )
{
    myGrid[columns] = { temporaryArray[x]:finalArray[x] };
}

和

for( var x = 0; x < finalArray.length; x++ )
{
    myGrid.columns[values]= finalArray[x].values;
}

没有成功...

以下看起来像我想要动态实现的对象内部的对象数组：

columns: 
[
    {
        title: temporaryArray[0] + " ",
        field: gridArray[0].values + " "
    },
    {
        title: temporaryArray[1] + " ",
        field: gridArray[1].values + " "
    },
    {
        title: temporaryArray[2] + " ",
        field: gridArray[2].values + " "
    }
],

例如：

for( var x = 0; x < finalArray.length; x++ )
{
    myGrid[columns] = { temporaryArray[x]:finalArray[x] };
}

我想使用 for 循环生成对象，以在列数组中生成对象数组。

我想知道的是，这是否可以动态执行？还是完全可以不用硬编码？

Answer 1

你可以做到。让标题存储在titleDefs 中，field 名称存储在fieldDef 中。那么你应该这样做：

// Title Definitions
var titleDefs = [
    "First Name", "Last Name", "Title"
];
// Field Definition
var fieldDefs = [
    "FirstName", "LastName", "Title"
];
// Lets compute column definition
var columnDefs = [];
for (var i = 0; i < titleDefs.length; i++) {
    columnDefs.push({ title : titleDefs[i], field: fieldDefs[i] });
}
// Now, create the grid using columnDefs as argument
var grid = $("#grid").kendoGrid({
    dataSource: {
        data    : dataArray,
        pageSize: 10
    },
    columns   : columnDefs
}).data("kendoGrid");

注意：在本例中，我在内存中定义了一个数据源，它是 JavaScript array，但您可以从更改 DataSource 定义的服务器获取数据。

注意：在您的代码中，您在 title 定义中添加了额外的空格，这是不正确的：列定义是 JavaScript 代码而不是 strings，所以您没有格式化它，就像你要显示它一样。