Question

在 kendo ui 网格中创建空白的第一列

2013-05-15

3958

kendo-ui kendo-grid

我是 kendo ui 网格开发的新手。

我有一个需求，我想在 kendo ui 网格 中显示数据。

我能够使用 java-script 将数据绑定到 kendo 网格 。

这就是我的做法。

(document.getElementById(divId)).kendoGrid({
            columns: cols,
            dataSource: data,           
            change: onChange,
            selectable: "multiple",
            //selectable: "multiple cell",
            schema: {
                model: {
                    id: "ID"
                }
            }
        }).data("kendoGrid");

数据显示在网格中。

现在，我想在网格中创建一个空白的第一列，用于显示图像。我该怎么做呢？网格动态绑定到数据。我没有指定任何硬编码列。所有列都是动态创建的。

请有人能告诉我这件事。

Answer 1

您必须明确定义列，因为：

您想要添加模型中没有的列。
列的内容是图像，它不是可以从模型定义中推断出的 KendoUI 基本类型。

也就是说，您必须添加一个类似于以下内容的列：

var cols = [
    // Your other columns
    ...
    {
        title :"Image",
        template: "<img src='my_image.gif'/>"
    },
    // More columns
    ...
];

此外，您可能需要使用不是常量而是取决于列内容的图像。然后您可以执行以下操作：

var cols = [
    // Your other columns
    ...
    {
        title: "Status",
        template: "# if (status) { # <img src='ok.gif'/> # } else { # <img src='nak.gif'/> # } #"
    },
    {
        title   : "Photo",
        template: "<img src='#= image #'/>"
    }
    // More columns
    ...
];

根据模型中名为 status 的字段的值，我显示图像 ok.gif 或 nak.gif 。或者直接使用字段 image 的内容来生成所显示图像的 URL。

查看此处了解 KendoUI 模板的概述。