本教程详细讲解如何通过 kendo ui orgchart 的模板功能，自定义组织图节点以展示多达九个自定义数据字段，并灵活控制节点布局。我们将探讨如何利用 html 模板渲染数据，移除默认头像，从而构建一个满足特定业务需求的高度定制化组织图。
Kendo UI OrgChart 组件默认提供了一种简洁的节点展示方式，通常只包含“姓名”和“职位”等基本信息。然而，在许多实际应用场景中，用户可能需要在一个节点内展示更丰富的业务数据，例如绩效指标、成本数据或其他自定义属性。本文将深入探讨如何利用 Kendo UI OrgChart 的强大模板功能，突破默认限制，实现高度定制化的节点内容与布局。
Kendo UI OrgChart 模板机制概述
Kendo UI OrgChart 提供了 template 属性，允许开发者为每个组织图节点定义自定义的 HTML 结构。通过这个属性，你可以完全控制节点的视觉呈现，包括显示哪些数据字段、如何布局这些字段，以及添加自定义样式等。
template 属性接受一个 HTML 字符串。在这个字符串中，你可以使用 Kendo UI 的模板语法 #: fieldName # 来绑定数据源中对应的字段值。这意味着，只要你的数据源包含所需的字段，你就可以在模板中引用它们并进行展示。
构建自定义节点模板
假设我们有以下 JSON 数据结构，其中包含 item_desc、eoy_target、ytd_plan 等多个需要展示的字段：
[
{
"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_desc, eoy_target, eoy_actual, ytd_plan, ytd_actual, achi_pi, achi_ra, achi_ip, achi_ia 这九个字段，并移除默认的头像。
以下是如何通过 template 属性实现这一目标的示例代码：
<div id="orgchart"></div>
<script>
$(document).ready(function() {
var orgChartData = [
{
"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: orgChartData,
// 定义节点模板
template:
"<div class='custom-orgchart-node'>" +
"<div class='node-header'><strong>#: item_desc #</strong></div>" +
"<div class='node-body'>" +
"<p>EOY Target: <span>#: eoy_target #</span></p>" +
"<p>EOY Actual: <span>#: eoy_actual #</span></p>" +
"<p>YTD Plan: <span>#: ytd_plan #</span></p>" +
"<p>YTD Actual: <span>#: ytd_actual #</span></p>" +
"<p>Achi PI: <span>#: achi_pi #</span></p>" +
"<p>Achi IA: <span>#: achi_ia #</span></p>" +
"<p>Achi RA: <span>#: achi_ra #</span></p>" +
"<p>Achi IP: <span>#: achi_ip #</span></p>" +
"</div>" +
"</div>",
// 配置数据绑定字段
// Kendo OrgChart 默认使用 'id' 和 'parentId' 来构建层级关系
// 如果你的数据源字段名不同，需要通过 dataValueField 和 dataParentValueField 进行映射
dataValueField: "item_id", // 对应 item_id
dataParentValueField: "parent_pi_kode", // 对应 parent_pi_kode
// 如果需要分组，可以设置 groupField 和 groupHeaderTemplate
// groupField: "parent_pid_desc",
// groupHeaderTemplate: "<i>部门:</i> <strong>#: value #</strong>"
});
});
</script>
<style>
/* 自定义节点样式 */
.custom-orgchart-node {
width: 200px; /* 调整节点宽度 */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-size: 12px;
line-height: 1.4;
text-align: left;
color: #333;
}
.custom-orgchart-node .node-header {
font-size: 14px;
margin-bottom: 8px;
color: #007bff;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.custom-orgchart-node .node-body p {
margin: 0;
padding: 2px 0;
display: flex;
justify-content: space-between;
}
.custom-orgchart-node .node-body p span {
font-weight: bold;
color: #555;
}
/* Kendo UI OrgChart 容器的默认样式可能需要调整以适应自定义节点大小 */
#orgchart {
height: 600px; /* 确保有足够高度 */
width: 100%;
}
</style>示例代码解析
- dataSource 配置：将你的 JSON 数据赋值给 dataSource 属性。Kendo UI OrgChart 会根据 dataValueField 和 dataParentValueField 定义的字段来构建层级关系。在我们的例子中，item_id 作为唯一标识，parent_pi_kode 作为父节点标识。
-
template 属性：这是实现自定义的关键。
- 我们定义了一个包含多个 div 和 p 标签的 HTML 结构。
- class='custom-orgchart-node' 和内部的 node-header、node-body 类用于配合 CSS 进行样式控制。
- <strong>#: item_desc #</strong>：通过 #: fieldName # 语法，直接将数据源中的 item_desc 字段值绑定并显示。
- <span>#: eoy_target #</span> 等：同理，其他字段也以类似方式绑定。
- 移除头像：由于我们没有在模板中包含 <img> 标签，默认的头像将不会显示。
- CSS 样式：为了让自定义节点看起来更专业和易读，我们提供了 .custom-orgchart-node 及其子元素的 CSS 样式。这些样式定义了节点的宽度、内边距、边框、背景色、字体大小和文本对齐方式等。你可以根据自己的品牌或设计指南进行调整。
注意事项与最佳实践
- 字段匹配：确保 template 中使用的字段名（例如 item_desc, eoy_target）与 dataSource 中的实际字段名完全一致，区分大小写。
- 布局与可读性：当展示的信息较多时，合理利用 HTML 标签（如 div, p, span）和 CSS 样式来组织内容至关重要。考虑使用网格布局或弹性盒子布局来优化信息展示。
- 响应式设计：如果你的应用需要在不同设备上运行，请考虑为自定义节点模板添加响应式 CSS 规则，以确保在小屏幕上也能良好显示。
- 性能优化：对于包含大量节点的复杂组织图，过于复杂的 HTML 模板可能会影响渲染性能。在设计模板时，应在信息丰富度和渲染效率之间找到平衡。
- 调试：如果模板未能按预期工作，可以使用浏览器的开发者工具检查渲染后的 HTML 结构和 CSS 样式，定位问题。
- Kendo UI 版本：确保你使用的 Kendo UI 版本支持 OrgChart 组件及其模板功能。
总结
Kendo UI OrgChart 的 template 属性是一个极其强大的功能，它赋予了开发者完全自定义节点外观和内容的能力。通过灵活运用 HTML 结构和 Kendo UI 的数据绑定语法，你可以轻松地将多达九个甚至更多的自定义数据字段整合到组织图节点中，并精确控制其布局，同时移除不需要的默认元素如头像。这使得 Kendo UI OrgChart 能够适应各种复杂的业务展示需求，提供高度定制化的用户体验。
