如何解决如何在kendo ui treelist的多列标题的根列中放置按钮/ html？
在 kendo 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
}]
}]
}]
示例Link
如何在多列标题的根列中放置按钮/html？
解决方法
我检查了控制台，当 headerTemplate 被取消注释时，它有一个运行时错误：
未捕获的类型错误：i.headerTemplate 不是函数
所以我认为它需要一个模板函数，比如：
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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
