在剑道 ui 网格中创建一个空白的第一列

Question

我是剑道 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

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

1. 您要添加模型中没有的列。
2. 列的内容是一个图像，不是可以从模型定义中推断出来的 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。

查看here 了解有关 KendoUI 模板的概述。