Question

我正在使用kendo ui grid。我在网格中动态添加了列。我在网格中创建了第一列，如下所示，以显示图像。我能够在网格中看到图像。我在数组中添加了Column Names并将它们传递给grid

中的columns参数

colHeader.push（{template：“”}）;

colHeader是数组。

根据行的数据，点击图片时打开的网址不同。所以我看到的唯一选择是循环所有行找到特定列然后找到单元格然后将url附加到图像的click事件。希望这说清楚。请在此建议。

Answer 1

这可能不是推荐的方法，但我会使用网格（而不是MVC包装器）并使用自定义命令列，然后更改命令按钮的样式以使用您的图像。 / p>

像这样：

 // rest of grid ommitted

        groupable: true,
        sortable: true,
        pageable: {
            input: true,
            refresh: true,
            messages: {
             display: '{2} Items'
            }
        },
        columns: [
        {
          title: ' ',
          field: 'RowId',            
          command: [{ name: 'hmm', text: ' ', click: viewRowInfo }],
        }
     ]);

然后点击处理程序：

function viewRowInfo(e) {
    e.preventDefault();

    //get data item for row
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
}

在样式表中：

.k-grid-hmm { border:none !important; width:32px; height: 32px; background-color: transparent !important; background-image: url(icons/your-image.png) !important; }

在网格中使用自定义命令时，Kendo会自动添加名为“.k-grid-”的类+您为命令指定的名称...

希望这会有所帮助......

Answer 2

为什么需要迭代和修改它而不是直接用事件生成图像？

你可能会在网格中有一个这样的列定义：

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

修改模板并添加事件处理程序：

columns: [
    // Your other columns
    ...
    {
        title :"Image",
        template: "<img src='my_image.gif' click='javascript:sayHello();'/>"
    },
    // More columns
    ...
];

或者您可以在图片中添加class并使用该类来设置事件：

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

// Set handler
$("#grid").on("click", ".ob-image", function() {
    alert("Hi");
});

在http://jsfiddle.net/OnaBai/CNZrA/1/中查看两者的示例，其中第三列使用第一种方法，第四列使用第二种方法。

查找列中添加的所有行的图像，并将click事件附加到该行

2 个答案: