本教程详细讲解如何通过 kendo ui orgchart 的模板功能，自定义组织图节点以展示多达九个自定义数据字段，并灵活控制节点布局。我们将探讨如何利用 html 模板渲染数据，移除默认头像，从而构建一个满足特定业务需求的高度定制化组织图。
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>Kendo UI OrgChart 的 template 属性是一个极其强大的功能，它赋予了开发者完全自定义节点外观和内容的能力。通过灵活运用 HTML 结构和 Kendo UI 的数据绑定语法，你可以轻松地将多达九个甚至更多的自定义数据字段整合到组织图节点中，并精确控制其布局，同时移除不需要的默认元素如头像。这使得 Kendo UI OrgChart 能够适应各种复杂的业务展示需求，提供高度定制化的用户体验。
以上就是Kendo UI OrgChart 节点模板深度解析：实现多信息展示与布局定制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
709
收藏
