本教程详细介绍了如何利用 kendo ui orgchart 的模板功能，突破默认限制，实现节点内容的深度自定义。通过定义 `template` 属性，开发者可以根据具体业务需求，灵活展示包括多字段数据在内的丰富信息，并移除不必要的元素如头像，从而构建出更具专业性和信息量的组织结构图。
Kendo UI OrgChart 节点内容定制概述
Kendo UI OrgChart 默认提供的节点显示内容通常仅限于“姓名”和“职位”等少量信息。然而，在实际应用中，我们往往需要在一个节点内展示更多关联数据，例如项目指标、成本详情或绩效数据等。Kendo UI 为此提供了强大的模板（template）机制，允许开发者完全自定义每个组织图节点的 HTML 结构和数据绑定方式，从而满足复杂的展示需求。
理解 template 属性
template 属性是 Kendo UI OrgChart 配置对象中的一个关键选项，它接受一个字符串作为值，该字符串定义了每个节点将渲染的 HTML 结构。在这个 HTML 字符串中，我们可以使用 Kendo UI 模板语法 #: fieldName # 来绑定数据源中对应的字段值。
例如，如果您的数据源包含 item_desc、eoy_target、ytd_plan 等字段，您可以在模板中直接引用它们，将这些信息动态地渲染到每个节点中。
定义自定义节点模板
要自定义 OrgChart 节点，您需要根据您的数据结构和希望展示的信息来构建一个 HTML 字符串。以下是一个基于您提供的 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_desc, eoy_target, eoy_actual, ytd_plan, ytd_actual, achi_pi, achi_ia, achi_ra, achi_ip 这些字段，并且不需要头像。
您可以这样构建您的 template：
$("#orgchart").kendoOrgChart({
// ... 其他配置
template:
"<div class='orgchart-node-custom'>" +
"<div class='node-header'><strong>#: item_desc #</strong></div>" +
"<div class='node-body'>" +
"<p>EOY Target: #: kendo.toString(eoy_target, 'n2') #</p>" +
"<p>EOY Actual: #: kendo.toString(eoy_actual, 'n2') #</p>" +
"<p>YTD Plan: #: kendo.toString(ytd_plan, 'n2') #</p>" +
"<p>YTD Actual: #: kendo.toString(ytd_actual, 'n2') #</p>" +
"<p>Achi PI: #: kendo.toString(achi_pi, 'n2') #%</p>" +
"<p>Achi IA: #: kendo.toString(achi_ia, 'n2') #%</p>" +
"<p>Achi RA: #: kendo.toString(achi_ra, 'n2') #%</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/762" title="百宝箱"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679962759206.png" alt="百宝箱" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/762" title="百宝箱">百宝箱</a>
<p>百宝箱是支付宝推出的一站式AI原生应用开发平台，无需任何代码基础，只需三步即可完成AI应用的创建与发布。</p>
</div>
<a href="/ai/762" title="百宝箱" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>" +
"<p>Achi IP: #: kendo.toString(achi_ip, 'n2') #%</p>" +
"</div>" +
"</div>",
// ... 其他配置
});在这个模板中：
- 我们创建了一个名为 orgchart-node-custom 的主容器 div，用于整体样式控制。
- node-header 显示了 item_desc 作为节点的标题。
- node-body 包含了其他所有需要展示的字段，每个字段都用一个
标签包裹。
- #: kendo.toString(fieldName, 'n2') # 用于格式化数字，例如保留两位小数，使其更具可读性。
完整示例代码
下面是一个完整的 Kendo UI OrgChart 配置示例，演示了如何集成自定义模板和您提供的数据。
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI OrgChart 自定义节点</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.3.1114/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2023.3.1114/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1114/js/kendo.all.min.js"></script>
<style>
/* 自定义节点样式 */
.orgchart-node-custom {
width: 200px; /* 根据内容调整宽度 */
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
text-align: left;
font-size: 12px;
line-height: 1.4;
}
.orgchart-node-custom .node-header {
font-size: 14px;
margin-bottom: 5px;
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.orgchart-node-custom .node-body p {
margin: 2px 0;
color: #555;
}
</style>
</head>
<body>
<div id="orgchart" style="height: 600px; width: 100%;"></div>
<script>
$(document).ready(function() {
var orgChartData = [
{
"item_id": "193",
"item_desc": "Blasting Cost",
"parent_pi_kode": null, // 根节点没有父级
"parent_pid_desc": 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_id: { type: "string" },
parent_pi_kode: { type: "string", nullable: true }
},
expanded: "is_expanded"
}
}
}),
template:
"<div class='orgchart-node-custom'>" +
"<div class='node-header'><strong>#: item_desc #</strong></div>" +
"<div class='node-body'>" +
"<p>EOY Target: #: kendo.toString(eoy_target, 'n2') #</p>" +
"<p>EOY Actual: #: kendo.toString(eoy_actual, 'n2') #</p>" +
"<p>YTD Plan: #: kendo.toString(ytd_plan, 'n2') #</p>" +
"<p>YTD Actual: #: kendo.toString(ytd_actual, 'n2') #</p>" +
"<p>Achi PI: #: kendo.toString(achi_pi, 'n2') #%</p>" +
"<p>Achi IA: #: kendo.toString(achi_ia, 'n2') #%</p>" +
"<p>Achi RA: #: kendo.toString(achi_ra, 'n2') #%</p>" +
"<p>Achi IP: #: kendo.toString(achi_ip, 'n2') #%</p>" +
"</div>" +
"</div>",
// 如果不需要分组，可以移除 groupField 和 groupHeaderTemplate
// groupField: "parent_pid_desc",
// groupHeaderTemplate: "<i> #: field #</i>: <strong>#: value # </strong>",
});
});
</script>
</body>
</html>代码说明：
- dataSource 配置： kendo.data.OrgChartDataSource 用于处理层级数据。id 字段指定了每个节点的唯一标识，parentId 字段指定了其父节点的标识。expanded 字段用于控制节点默认是否展开。
- template 属性： 包含了我们自定义的 HTML 结构和数据绑定表达式。
- CSS 样式： 示例中提供了一些基本的 CSS 样式，用于美化自定义节点的外观。您可以根据实际需求进一步调整。
- 数据格式化： 使用 kendo.toString(value, format) 可以对数值进行格式化，例如 n2 表示保留两位小数。
注意事项与最佳实践
- CSS 样式的重要性： 自定义模板后，节点的布局和外观完全由您定义的 HTML 和 CSS 控制。务必编写合适的 CSS 样式，以确保节点美观、易读，并适应不同屏幕尺寸。
- 数据绑定安全性： Kendo UI 模板会自动进行 HTML 编码，以防止 XSS 攻击。如果您的数据包含需要作为原始 HTML 渲染的内容（不推荐），可以使用 #! field # 语法，但这会带来安全风险，请谨慎使用。
- 性能考量： 对于包含大量节点或每个节点内容非常复杂的组织图，过多的 DOM 元素可能会影响渲染性能。在设计模板时，应尽量保持 HTML 结构简洁高效。
- 响应式设计： 考虑在不同设备和屏幕尺寸下，自定义节点内容的显示效果。可能需要结合 CSS 媒体查询来实现响应式布局。
- 调试： 如果自定义模板不按预期工作，请检查浏览器的开发者工具，查看生成的 HTML 结构和 CSS 样式，通常能帮助定位问题。
- Kendo UI 版本兼容性： 确保您使用的 Kendo UI 版本支持 OrgChart 功能，并注意不同版本之间可能存在的 API 差异。
总结
Kendo UI OrgChart 的 template 属性为开发者提供了极大的灵活性，使其能够根据具体业务需求，完全掌控组织图节点的显示内容和样式。通过精心设计的模板，您可以将默认仅展示少量信息的 OrgChart 转换为功能丰富、数据详尽的可视化工具，从而提升用户体验和数据洞察力。掌握这一技巧，将使您在构建复杂的 Kendo UI 应用时如虎添翼。
