Question

我尝试使用columns.headerTemplate的Kendo UI Grid功能来自定义列标题。您可以使用此功能，如下所示，this example I created所示。通常在使用Kendo UI templates时，窗口小部件会将实体传递给模板函数，因此您可以使用各种属性来自定义要呈现的html。

调试Kendo UI网格代码我可以看到，在_headerCellText方法中，即使列对象在范围内，对模板函数的调用也会传入空对象而不是列。

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

在为每个列使用自定义列标题模板之前是否还有其他方法可以采用或更糟糕的是 - 小部件的jQuery操作呈现DOM？

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

// 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 }
    ]
});

Answer 1

RE：“在为每个列使用自定义列标题模板之前，我还可以采取另一种方法，或者更糟糕的是 - 小部件的jQuery操作呈现DOM吗？”

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

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

...

columns: [
    { field: 'field', headerTemplate: createHeaderTemplate('My Field') },
    { field: 'field2', headerTemplate: createHeaderTemplate('My 2nd Field') }
]

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

1 个答案: