在剑道ui树列表中，headerTemplate只适用于层次结构中最低列的多列。
示例:
columns: [{
field: "FirstName", title: "First Name", width: 180
}, {
title: "Personal Info",
/* headerTemplate: "Personal Info Template", */ /* do not works */
columns: [{
field: "LastName", title: "Last Name", width: 120,
}, {
title: "Location",
columns: [{
field: "City", width: 140,
headerTemplate: "City Template", /* works */
}, {
field: "Country", width: 140
}]
}]
}]
样本链接
一个按钮/html如何被放置在一个多列标题的根列?
我已经检查了控制台，当headerTemplate未注释时，它有一个运行时错误:
Uncaught TypeError: i.p headertemplate is not a function
所以我假设它期待一个模板函数，如:
headerTemplate: kendo.template("Personal Info Template"),
它可以工作，因此你可以在模板中使用html:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treelist/multicolumnheaders">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
sortable: true,
resizable: true,
reorderable: true,
columnMenu: true,
columns: [{
field: "FirstName", title: "First Name", width: 180
}, {
title: "Personal Info",
headerTemplate: kendo.template("Personal Info <button>Button</button>"),
columns: [{
field: "LastName", title: "Last Name", width: 120,
}, {
title: "Location",
columns: [{
field: "City", width: 140,
headerTemplate: "City Template", /* works */
}, {
field: "Country", width: 140
}]
}]
}]
});
});
</script>
</div>
</body>
</html>Dojo更新