本教程详细介绍了如何利用 kendo ui orgchart 的 `template` 选项，实现对组织结构图节点内容的深度定制。通过自定义 html 模板，您可以轻松展示多个业务字段（如绩效指标），并移除默认的头像显示，从而满足特定的数据可视化需求，提升图表的专业性和信息密度。
Kendo UI OrgChart 简介与默认行为
Kendo UI OrgChart 是一个功能强大的组织结构图组件，用于以层级结构可视化数据。它默认提供了一种简洁的节点显示方式，通常只包含“姓名”和“职位”两个核心信息，并可能附带一个头像。这种默认配置在许多标准场景下已足够使用。然而，在面对更复杂的数据模型时，例如需要在一个节点中展示多个业务指标或自定义属性，并且可能不需要头像时，就需要进行更深层次的定制。
默认的 Kendo UI OrgChart 节点结构通常是固定的，它通过内部机制绑定数据源中的 name 和 position 字段来显示信息。当您的数据源包含 item_desc、eoy_target、ytd_plan 等多个自定义字段，并且希望将它们全部呈现在组织结构图的每个节点上时，就需要利用 Kendo UI 提供的模板机制。
自定义节点模板：template 选项
Kendo UI OrgChart 提供了 template 选项，允许开发者完全控制每个节点（Node）的渲染方式。通过指定一个包含 HTML 结构的字符串作为 template 的值，您可以定义节点内部的任何内容、布局和样式。
在模板字符串中，您可以使用 #: fieldName # 的语法来访问当前节点数据项中的任意字段。例如，如果您的数据项包含 item_desc 字段，您就可以在模板中使用 #: item_desc # 来显示其值。
实现多字段与无头像显示
要实现 Kendo UI OrgChart 节点显示多个自定义字段并移除头像，核心步骤是构建一个包含所有所需字段的 HTML 模板，并将其赋值给 template 选项。
1. 数据准备
首先，确保您的 JSON 数据源包含了所有需要显示的信息。例如，以下是包含多个业务指标的数据结构：
[
{
"item_id": "195",
"item_desc": "Fuel Cost",
"parent_pi_kode": "193",
"parent_pid_desc": "Blasting Cost",
"eoy_target": 0.2,
"eoy_actual": 0.32,
"ytd_plan": 0.13,
"ytd_actual": 0.14,
"achi_pi": 107.69,
"achi_ia": 0.0,
"achi_ra": 0.0,
"achi_ip": 0.0,
"has_child": true,
"is_expanded": true
},
{
"item_id": "194",
"item_desc": "AN Cost",
"parent_pi_kode": "193",
"parent_pid_desc": "Blasting Cost",
"eoy_target": 0.2,
"eoy_actual": 0.32,
"ytd_plan": 0.1,
"ytd_actual": 0.12,
"achi_pi": 120.0,
"achi_ia": 0.0,
"achi_ra": 0.0,
"achi_ip": 0.0,
"has_child": true,
"is_expanded": true
},
{
"item_id": "196",
"item_desc": "Oil Cost",
"parent_pi_kode": "193",
"parent_pid_desc": "Blasting Cost",
"eoy_target": 0.2,
"eoy_actual": 0.32,
"ytd_plan": 0.08,
"ytd_actual": 0.1,
"achi_pi": 125.0,
"achi_ia": 0.0,
"achi_ra": 0.0,
"achi_ip": 0.0,
"has_child": true,
"is_expanded": true
}
]2. 构建自定义 HTML 模板
根据您需要显示的字段，创建一个 HTML 字符串。在这个模板中，我们将移除默认的头像 <img> 标签，并为每个字段创建相应的显示元素，例如 div 或 span。为了提高可读性，可以使用 <label> 或 <strong> 标签来标识字段名称。
<div class='custom-orgchart-node'>
<div class='node-header'>
<strong>#: item_desc #</strong>
</div>
<div class='node-body'>
<p>EOY Target: <span>#: kendo.toString(eoy_target, "n2") #</span></p>
<p>EOY Actual: <span>#: kendo.toString(eoy_actual, "n2") #</span></p>
<p>YTD Plan: <span>#: kendo.toString(ytd_plan, "n2") #</span></p>
<p>YTD Actual: <span>#: kendo.toString(ytd_actual, "n2") #</span></p>
<p>ACHI PI: <span>#: kendo.toString(achi_pi, "n2") #</span></p>
<p>ACHI IA: <span>#: kendo.toString(achi_ia, "n2") #</span></p>
<p>ACHI RA: <span>#: kendo.toString(achi_ra, "n2") #</span></p>
<p>ACHI IP: <span>#: kendo.toString(achi_ip, "n2") #</span></p>
</div>
</div>注意：
- kendo.toString(value, "n2") 用于格式化数字，保留两位小数。
- 模板中的类名（如 custom-orgchart-node）可以用于后续的 CSS 样式定义。
- 模板中不再包含 <img> 标签，从而移除了头像显示。
3. Kendo UI OrgChart 初始化配置
在初始化 Kendo UI OrgChart 时，将上述自定义模板字符串赋值给 template 选项。同时，您需要配置 dataSource 和 schema 来正确解析数据。schema.model.id 和 schema.model.parentId 字段是构建层级关系的关键。
$("#orgchart").kendoOrgChart({
dataSource: new kendo.data.OrgChartDataSource({
data: orgChartData, // 您的JSON数据
schema: {
model: {
id: "item_id", // 映射数据中的唯一标识字段
parentId: "parent_pi_kode", // 映射数据中的父节点标识字段
fields: {
item_desc: { type: "string" },
eoy_target: { type: "number" },
eoy_actual: { type: "number" },
ytd_plan: { type: "number" },
ytd_actual: { type: "number" },
achi_pi: { type: "number" },
achi_ia: { type: "number" },
achi_ra: { type: "number" },
achi_ip: { type: "number" }
}
}
}
}),
// 启用展开/折叠功能，如果您的数据有has_child和is_expanded字段
// 这通常由OrgChartDataSource自动处理，但确保数据源配置正确
template: "<div class='custom-orgchart-node'>" +
"<div class='node-header'>" +
"<strong>#: item_desc #</strong>" +
"</div>" +
"<div class='node-body'>" +
"<p>EOY Target: <span>#: kendo.toString(eoy_target, 'n2') #</span></p>" +
"<p>EOY Actual: <span>#: kendo.toString(eoy_actual, 'n2') #</span></p>" +
"<p>YTD Plan: <span>#: kendo.toString(ytd_plan, 'n2') #</span></p>" +
"<p>YTD Actual: <span>#: kendo.toString(ytd_actual, 'n2') #</span></p>" +
"<p>ACHI PI: <span>#: kendo.toString(achi_pi, 'n2') #</span></p>" +
"<p>ACHI IA: <span>#: kendo.toString(achi_ia, 'n2') #</span></p>" +
"<p>ACHI RA: <span>#: kendo.toString(achi_ra, 'n2') #</span></p>" +
"<p>ACHI IP: <span>#: kendo.toString(achi_ip, 'n2') #</span></p>" +
"</div>" +
"</div>"
});4. 样式调整 (CSS)
为了让自定义节点看起来更美观，可以添加一些 CSS 样式。
.k-orgchart-node {
width: 250px; /* 调整节点宽度以容纳更多信息 */
min-height: 180px; /* 调整节点最小高度 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden; /* 确保内容不溢出 */
}
.custom-orgchart-node {
padding: 10px;
background-color: #fff;
color: #333;
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1.4;
}
.custom-orgchart-node .node-header {
background-color: #f0f0f0;
padding: 8px 10px;
margin: -10px -10px 10px -10px; /* 扩展背景到边缘 */
border-bottom: 1px solid #ddd;
font-size: 14px;
color: #0056b3;
}
.custom-orgchart-node .node-header strong {
display: block;
text-align: center;
}
.custom-orgchart-node .node-body p {
margin: 3px 0;
display: flex;
justify-content: space-between;
}
.custom-orgchart-node .node-body span {
font-weight: bold;
color: #007bff;
}完整代码示例
将上述 HTML、JavaScript 和 CSS 片段整合到一个页面中，即可看到自定义的 Kendo UI OrgChart。
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI OrgChart 自定义节点</title>
<link href="https://kendo.cdn.telerik.com/2024.1.130/styles/kendo.default-v2.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2024.1.130/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-family: Arial, sans-serif;
}
#orgchart {
height: 100%;
width: 100%;
margin: 0 auto;
}
.k-orgchart-node {
width: 280px; /* 调整节点宽度以容纳更多信息 */
min-height: 200px; /* 调整节点最小高度 */
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
border-radius: 8px;
overflow: hidden;
background-color: #fff;
border: 1px solid #e0e0e0;
}
.custom-orgchart-node {
padding: 10px;
color: #333;
font-size: 13px;
line-height: 1.4;
display: flex;
flex-direction: column;
height: 100%; /* 确保内部div填充节点高度 */
}
.custom-orgchart-node .node-header {
background-color: #f8f9fa;
padding: 8px 10px;
margin: -10px -10px 10px -10px; /* 扩展背景到边缘 */
border-bottom: 1px solid #dee2e6;
font-size: 15px;
color: #212529;
text-align: center;
font-weight: bold;
}
.custom-orgchart-node .node-body {
flex-grow: 1; /* 让内容区域填充剩余空间 */
display: flex;
flex-direction: column;
justify-content: space-around; /* 均匀分布内容 */
}
.custom-orgchart-node .node-body p {
margin: 2px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.custom-orgchart-node .node-body p strong {
color: #555;
font-weight: normal;
margin-right: 5px;
}
.custom-orgchart-node .node-body p span {
font-weight: bold;
color: #007bff;
white-space: nowrap; /* 防止数字换行 */
}
</style>
</head>
<body>
<div id="orgchart"></div>
<script>
$(document).ready(function () {
var orgChartData = [
{
"item_id": "193", // 假设这是一个根节点或父节点
"item_desc": "Blasting Cost",
"parent_pi_kode": null, // 根节点没有父节点
"eoy_target": 0.6,
"eoy_actual": 0.96,
"ytd_plan": 0.31,
"ytd_actual": 0.36,
"achi_pi": 116.13,
"achi_ia": 0.0,
"achi_ra": 0.0,
"achi_ip": 0.0,
"has_child": true,
"is_expanded": true
},
{
"item_id": "195",
"item_desc": "Fuel Cost",
"parent_pi_kode": "193",
"parent_pid_desc": "Blasting Cost",
"eoy_target": 0.2,
"eoy_actual": 0.32,
"ytd_plan": 0.13,
"ytd_actual": 0.14,
"achi_pi": 107.69,
"achi_ia": 0.0,
"achi_ra": 0.0,
"achi_ip": 0.0,
"has_child": true,
"is_expanded": true
},
{
"item_id": "194",
"item_desc": "AN Cost",
"parent_pi_kode": "193",
"parent_pid_desc": "Blasting Cost",
"eoy_target": 0.2,
"eoy_actual": 0.32,
"ytd_plan": 0.1,
"ytd_actual": 0.12,
"achi_pi": 120.0,
"achi_ia": 0.0,
"achi_ra": 0.0,
"achi_ip": 0.0,
"has_child": true,
"is_expanded": true
},
{
"item_id": "196",
"item_desc": "Oil Cost",
"parent_pi_kode": "193",
"parent_pid_desc": "Blasting Cost",
"eoy_target": 0.2,
"eoy_actual": 0.32,
"ytd_plan": 0.08,
"ytd_actual": 0.1,
"achi_pi": 125.0,
"achi_ia": 0.0,
"achi_ra": 0.0,
"achi_ip": 0.0,
"has_child": true,
"is_expanded": true
}
];
$("#orgchart").kendoOrgChart({
dataSource: new kendo.data.OrgChartDataSource({
data: orgChartData,
schema: {
model: {
id: "item_id",
parentId: "parent_pi_kode",
fields: {
item_desc: { type: "string" },
eoy_target: { type: "number" },
eoy_actual: { type: "number" },
ytd_plan: { type: "number" },
ytd_actual: { type: "number" },
achi_pi: { type: "number" },
achi_ia: { type: "number" },
achi_ra: { type: "number" },
achi_ip: { type: "number" }
}
}
}
}),
template: "<div class='custom-orgchart-node'>" +
"<div class='node-header'>" +
"#: item_desc #" +
"</div>" +
"<div class='node-body'>" +
"<p><strong>EOY Target:</strong> <span>#: kendo.toString(eoy_target, 'n2') #</span></p>" +
"<p><strong>EOY Actual:</strong> <span>#: kendo.toString(eoy_actual, 'n2') #</span></p>" +
"<p><strong>YTD Plan:</strong> <span>#: kendo.toString(ytd_plan, 'n2') #</span></p>" +
"<p><strong>YTD Actual:</strong> <span>#: kendo.toString(ytd_actual, 'n2') #</span></p>" +
"<p><strong>ACHI PI:</strong> <span>#: kendo.toString(achi_pi, 'n2') #</span></p>" +
"<p><strong>ACHI IA:</strong> <span>#: kendo.toString(achi_ia, 'n2') #</span></p>" +
"<p><strong>ACHI RA:</strong> <span>#: kendo.toString(achi_ra, 'n2') #</span></p>" +
"<p><strong>ACHI IP:</strong> <span>#: kendo.toString(achi_ip, 'n2') #</span></p>" +
"</div>" +
"</div>"
});
});
</script>
</body>
</html>注意事项
- 数据字段映射： 确保 schema.model.id 和 schema.model.parentId 正确映射到您数据源中的唯一标识和父节点标识字段。这是构建正确层级关系的基础。
- 模板内容与样式： 模板中的 HTML 结构和 CSS 样式直接决定了节点的视觉效果。合理设计布局和样式，以确保所有信息清晰可读，并适应不同
