0

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

colHeader.push({ 模板: "" });

colHeader 是数组。

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

4

2 回答 2

1

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

您可能在网格中有这样的列定义：

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
    ...
];

或者您可以将 a 添加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/中的示例，其中第三列使用第一种方法，第四列使用第二种方法。

于 2013-05-15T19:18:57.000 回答
1

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

像这样：

 // 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-”的类+您为命令指定的名称...

希望这可以帮助...

于 2013-05-15T12:58:47.073 回答