Kendo UI Grid列headerTemplate函数无法访问列定义

Kendo UI Grid column headerTemplate function does not get access to the column definition

本文关键字：访问 定义 headerTemplate UI Grid Kendo 函数      更新时间：2023-09-26

我正在尝试使用Kendo UI网格的columns.headerTemplate功能来自定义列标题。您使用这个功能，如下所示，正如我创建的这个示例所演示的那样。通常，当使用Kendo UI模板时，小部件会将实体传递到模板函数中，这样您就可以使用各种属性来定制要渲染的html。

调试Kendo UI网格代码时，我可以看到在_headerCellText方法中，对模板函数的调用传入了一个空对象，而不是列，即使列对象在作用域中。

text = kendo.template(template, settings)({});

在为每一列使用自定义列标题模板或更糟的方法之前，我是否可以采取其他方法——对小部件渲染的DOM进行jQuery操作？

是否有充分的理由偏离该用例框架中的通用模板模式？

// Example kendoGrid use of column.headerTemplate
var templateFunction = function(shouldBeColumn) {
    // shouldBeColumn is an empty object rather than the column object
    return "Useless object:" + kendo.stringify(shouldBeColumn);
  };
$("#grid").kendoGrid({
    dataSource: {
        data: products,
        pageSize: 20
    },
    height: 550,
    scrollable: true,
    columns: [
      { field: "ProductName", title: "Product Name" },
      { field: "UnitPrice", title: "Unit Price", headerTemplate: plainTemplate },
      { field: "UnitsInStock", title: "Units In Stock", headerTemplate: templateFunction }
    ]
});

RE："在为每列使用自定义列标题模板之前，我可以采取另一种方法吗？或者更糟的是，对小部件渲染的DOM进行jQuery操作？"

调用一个返回函数的包装函数，因此：

function createHeaderTemplate(columnName) {
    return function() { 
        return "Custom: " + columnName; 
    };
}


columns: [
    { field: 'field', headerTemplate: createHeaderTemplate('My Field') },
    { field: 'field2', headerTemplate: createHeaderTemplate('My 2nd Field') }
]
相关文章：