Question

我正在使用kendo ui网格来显示数据。我想为网格设置标题。有没有办法设置它。

另外，我想为网格设置一些额外的/自定义属性，这将有助于唯一地识别网格。我可以设置为网格的任何自定义属性，以便在需要时获取其值。

因此，如果网格上有更多实例，这将有所帮助。

请就此提出建议。

Answer 1

遍历所有表格可以使用：

完成

$.each($(".k-grid"), function (idx, grid) {
    // Do whatever you want to do with "grid"
    ...
});

如果您想添加标题，可能类似于：

$.each($(".k-grid"), function (idx, grid) {
    $(grid).data("kendoGrid").wrapper.prepend('<div class="k-grid-header"><table><thead><tr><th class="k-header">Title</th></tr></thead></table></div>');
});

要将点击事件设置为HTML img元素，您可以执行以下操作：

$("tr", ".k-grid").on("click", "img:first", function () {
    // Here "this" is the "img" on which you clicked, finding the grid is:
    var grid = $(this).closest(".k-grid").data("kendoGrid");
    console.log("grid", grid);
    // If you want to access the "id"
    console.log("id", grid.element.attr("id"));
});

一旦你点击每一行的第一张图片，我在事件处理程序中所做的就是找到最近的带有k-grid类（网格）的HTML元素：这是包含网格的HTML。

如果您想获取Kendo UI grid元素，则需要使用data("kendoGrid")。

简单而优雅。

在这个JSFiddle：http://jsfiddle.net/OnaBai/2qpT3/2/中，如果单击“添加标题”按钮，则为每个表添加标题，如果单击“添加处理程序”，然后在图像中，您将收到警告图像所属表格的id。

编辑：如果要迭代文档中每个KendoUI网格的第一列中的每个图像，您应该这样做：

$.each($("td:first > img", ".k-grid table tbody > tr"), function (idx, elem) {
    // "elem" is the image
    console.log(idx, elem);
    // associate event
    $(elem).on("click", fnHandler);
});

Answer 2

我更喜欢像这样更改标题：

$("#grid th[data-field=Field]").html("Title");

将标题和其他属性设置为kendo ui grid

2 个答案: