本教程详细介绍了如何利用 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:
"" +
"#: 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') #%
" +
"" +
"",
// ... 其他配置
});
在这个模板中：
- 我们创建了一个名为 orgchart-node-custom 的主容器 div，用于整体样式控制。
- node-header 显示了 item_desc 作为节点的标题。
- node-body 包含了其他所有需要展示的字段，每个字段都用一个
标签包裹。
- #: kendo.toString(fieldName, 'n2') # 用于格式化数字，例如保留两位小数，使其更具可读性。
完整示例代码
下面是一个完整的 Kendo UI OrgChart 配置示例，演示了如何集成自定义模板和您提供的数据。
Kendo UI OrgChart 自定义节点
代码说明：
- 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 应用时如虎添翼。
