javascript-如何动态地将对象添加到kendo ui网格中的列数组? [英] Javascript - How to add objects to column array in kendo ui grid dynamically?

问题描述

尽管我没有找到一种有效的方法，但正试图在该列数组中生成对象，如标题所示.

I am trying to generate objects in the columns array as the heading implies, although I haven't found a working method.

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

我尝试了以下添加对象的方法:

I've tried the following to add the object:

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

没有成功...

以下内容看起来像是我要动态实现的对象内部的对象数组:

The following looks like an array of objects inside of the object which I want to achieve dynamically:

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循环来生成对象，以在列数组内生成对象数组.

我想知道的是，这是否有可能动态进行?还是根本不需要硬编码就可以实现?

What I want to know is, whether this is possible to do dynamically? or just possible at all without hard coding it?

推荐答案

您可以做到.让我们将标题存储在titleDefs中并将field名称存储在fieldDef中.然后，您应该这样做:

You can do it. Lets have the Titles stored in titleDefs and the field name in fieldDef. Then you should do:

// 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定义的服务器上获取数据.

NOTE: In this example I've defined a DataSource that is a JavaScript array in memory but you can get the data from a server changing the DataSource definition.

注意:在您的代码中，您要在title定义中添加额外的空格，这是不正确的:列定义是JavaScript代码而不是strings，因此您没有对其进行格式化，就像您要显示它一样.

NOTE: In your code, you were adding extra white space to the title definition and that is not correct: column definitions are JavaScript code and not strings so you don't have to format it as you were going to display it.

这篇关于javascript-如何动态地将对象添加到kendo ui网格中的列数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！