Kendo UI OrgChart组件的节点模板是自定义节点内容与布局的核心能力，通过模板可以突破默认节点的信息展示限制，实现符合业务需求的个性化组织架构呈现。
节点模板基础配置
OrgChart的节点模板通过node_template配置项定义，该配置项支持字符串模板或者函数返回值，模板中可以通过对应的数据字段获取节点绑定的数据内容。
首先准备基础的OrgChart初始化代码，数据中包含员工姓名、职位、头像地址、联系方式等字段：
// 组织架构数据
var orgData = [
{
id: 1,
name: "张三",
title: "技术总监",
avatar: "https://ipipp.com/avatar/1.jpg",
phone: "13800138000",
children: [
{ id: 2, name: "李四", title: "前端开发", avatar: "https://ipipp.com/avatar/2.jpg", phone: "13800138001" },
{ id: 3, name: "王五", title: "后端开发", avatar: "https://ipipp.com/avatar/3.jpg", phone: "13800138002" }
]
}
];
// 初始化OrgChart
$("#orgChart").kendoOrgChart({
dataSource: orgData,
// 配置节点模板
nodeTemplate: kendo.template($("#nodeTemplate").html())
});
多信息展示实现
要实现多信息展示，只需要在模板中组合需要的字段和HTML结构即可，以下是包含头像、姓名、职位、联系方式的节点模板：
<script id="nodeTemplate" type="text/x-kendo-template">
<div class="custom-org-node">
<img src="#= avatar #" class="node-avatar" />
<div class="node-info">
<div class="node-name">#= name #</div>
<div class="node-title">#= title #</div>
<div class="node-phone">联系方式：#= phone #</div>
</div>
</div>
</script>
搭配对应的CSS样式，可以让节点信息展示更清晰：
.custom-org-node {
display: flex;
align-items: center;
padding: 12px;
width: 220px;
}
.node-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
margin-right: 12px;
}
.node-info {
flex: 1;
}
.node-name {
font-size: 16px;
font-weight: bold;
margin-bottom: 4px;
}
.node-title {
font-size: 14px;
color: #666;
margin-bottom: 4px;
}
.node-phone {
font-size: 12px;
color: #999;
}
布局定制实现
除了节点内容定制，OrgChart还支持整体布局的自定义，包括节点间距、排列方向等配置。
调整节点间距
通过spacing配置项可以修改节点之间的水平和垂直间距：
$("#orgChart").kendoOrgChart({
dataSource: orgData,
nodeTemplate: kendo.template($("#nodeTemplate").html()),
// 水平间距30px，垂直间距40px
spacing: [30, 40]
});
修改排列方向
默认OrgChart是垂直向下排列，通过orientation配置可以修改为水平排列：
$("#orgChart").kendoOrgChart({
dataSource: orgData,
nodeTemplate: kendo.template($("#nodeTemplate").html()),
// 水平排列
orientation: "horizontal"
});
动态模板适配
如果不同层级的节点需要展示不同的信息，可以使用函数形式的node_template，根据节点的层级或者数据字段返回不同的模板内容：
$("#orgChart").kendoOrgChart({
dataSource: orgData,
nodeTemplate: function(dataItem) {
// 根节点展示更多信息
if (!dataItem.parentId) {
return kendo.template($("#rootNodeTemplate").html())(dataItem);
}
// 普通节点使用基础模板
return kendo.template($("#nodeTemplate").html())(dataItem);
}
});
根节点模板可以额外展示部门人数等信息，满足不同层级的差异化展示需求。