本教程详细介绍了如何利用 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 字符串。在这个模板中，我们将移除默认的头像 标签，并为每个字段创建相应的显示元素，例如 div 或 span。为了提高可读性，可以使用
#: item_desc #EOY Target: #: kendo.toString(eoy_target, "n2") #
EOY Actual: #: kendo.toString(eoy_actual, "n2") #
YTD Plan: #: kendo.toString(ytd_plan, "n2") #
YTD Actual: #: kendo.toString(ytd_actual, "n2") #
ACHI PI: #: kendo.toString(achi_pi, "n2") #
ACHI IA: #: kendo.toString(achi_ia, "n2") #
ACHI RA: #: kendo.toString(achi_ra, "n2") #
ACHI IP: #: kendo.toString(achi_ip, "n2") #
注意：
- kendo.toString(value, "n2") 用于格式化数字，保留两位小数。
- 模板中的类名（如 custom-orgchart-node）可以用于后续的 CSS 样式定义。
- 模板中不再包含
标签，从而移除了头像显示。
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: "" +
"" +
"#: item_desc #" +
"" +
"" +
"EOY Target: #: kendo.toString(eoy_target, 'n2') #
" +
"EOY Actual: #: kendo.toString(eoy_actual, 'n2') #
" +
"YTD Plan: #: kendo.toString(ytd_plan, 'n2') #
" +
"YTD Actual: #: kendo.toString(ytd_actual, 'n2') #
" +
"ACHI PI: #: kendo.toString(achi_pi, 'n2') #
" +
"ACHI IA: #: kendo.toString(achi_ia, 'n2') #
" +
"ACHI RA: #: kendo.toString(achi_ra, 'n2') #
" +
"ACHI IP: #: kendo.toString(achi_ip, 'n2') #
" +
"" +
""
});
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。
Kendo UI OrgChart 自定义节点
注意事项
- 数据字段映射： 确保 schema.model.id 和 schema.model.parentId 正确映射到您数据源中的唯一标识和父节点标识字段。这是构建正确层级关系的基础。
- 模板内容与样式： 模板中的 HTML 结构和 CSS 样式直接决定了节点的视觉效果。合理设计布局和样式，以确保所有信息清晰可读，并适应不同
