在 Kendo Grid (Javascript) 中创建动态列答案

【问题标题】：Create Dynamic Column In Kendo Grid (Javascript)在 Kendo Grid (Javascript) 中创建动态列
【发布时间】：2013-04-02 19:58:41
【问题描述】：

我想创建一个带有动态列的剑道网格，所有列都将在客户端创建。

举个例子：

我已经编写了以下代码来创建一个网格：

var grid = $("#grid");
        grid.children().remove();
        grid.kendoGrid({
            columns: [{ title: 'One', width: '100px' }, { title: 'Two', width: '100px' }, {title: 'Three', width:'100px'}],
            dataSource: {
                transport: {
                    read: {
                        url: "@Url.Action("")",
                        type: "GET",
                        dataType: "json",
                        traditional: true,
                        data: {
                            itemTypeId: $("#").val(),
                            where: ["", "", "", "", ""],
                            orderBy: ["", "", ""],
                        },
                    },
                },
                schema: {
                    data: "",
                    total: "",
                },
                serverPaging: true,
                pageSize: 4,
                error: function (e) {
                    alert(e.errors);
                }
            },
            pageable: true,
            resizable: true,
            reorderable: true,
        })
    }

当我定义列时：

columns: [{ title: 'One', width: '100px' }, { title: 'Two', width: '100px' }, {title: 'Three', width:'100px'}],

以上代码运行良好。

但我想在一个不起作用的循环中创建所有这些列。

喜欢：我将模式保存在 javascript 变量中，然后将其分配给剑道网格。

Var columnSchema = "{ title: 'One', width: '100px' },{ title: 'Two', width: '100px' },{ title: 'Two', width: '100px' }";

columns : [columnSchema]

但它不起作用。

【问题讨论】：

标签： kendo-grid

【解决方案1】：

对您的代码稍作改动，它应该可以工作：

var columnSchema = [{ title: 'One', width: '100px' },{ title: 'Two', width: '100px' },{ title: 'Three', width: '100px' }];

grid.kendoGrid({
    // .. other properties ..
    columns : columnSchema
});

您需要将您的 columnSchema 变量定义为数组而不是字符串（如我的示例所示），它会起作用。

你也可以构建数组，例如

var columnSchema = [];
columnSchema.push({ title: 'One', width: '100px' });
columnSchema.push({ title: 'Two', width: '100px' });
columnSchema.push({ title: 'Three', width: '100px' });

如果需要，您可以在从其他地方读取列信息的循环中使用push(..)。

只要在使用变量初始化网格之前完成此操作。创建网格后，您将无法更改列。

如果您需要在创建网格后更改列，您需要先调用 destroy() 方法，然后使用新的列规范再次调用 kendoGrid(..)。

【讨论】：