kendo-ui - 将标题和附加属性设置为 kendo ui 网格

Question

我正在使用剑道 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>');
});

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

$("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 UIgrid元素，你需要使用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");