本教程详细介绍了如何利用 kendo ui orgchart 的模板功能，突破默认限制，实现节点内容的深度自定义。通过定义 `template` 属性，开发者可以根据具体业务需求，灵活展示包括多字段数据在内的丰富信息，并移除不必要的元素如头像，从而构建出更具专业性和信息量的组织结构图。
Kendo UI OrgChart 默认提供的节点显示内容通常仅限于“姓名”和“职位”等少量信息。然而，在实际应用中，我们往往需要在一个节点内展示更多关联数据，例如项目指标、成本详情或绩效数据等。Kendo UI 为此提供了强大的模板（template）机制，允许开发者完全自定义每个组织图节点的 HTML 结构和数据绑定方式，从而满足复杂的展示需求。
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>" +
"<p>Achi IP: #: kendo.toString(achi_ip, 'n2') #%</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/892">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679988742423.png" alt="语鲸">
</a>
<div class="aritcle_card_info">
<a href="/ai/892">语鲸</a>
<p>AI智能阅读辅助工具</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="语鲸">
<span>314</span>
</div>
</div>
<a href="/ai/892" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="语鲸">
</a>
</div>
" +
"</div>" +
"</div>",
// ... 其他配置
});在这个模板中：
标签包裹。
下面是一个完整的 Kendo UI OrgChart 配置示例，演示了如何集成自定义模板和您提供的数据。
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI OrgChart 自定义节点</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2025.3.1114/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2025.3.1114/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2025.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>代码说明：
Kendo UI OrgChart 的 template 属性为开发者提供了极大的灵活性，使其能够根据具体业务需求，完全掌控组织图节点的显示内容和样式。通过精心设计的模板，您可以将默认仅展示少量信息的 OrgChart 转换为功能丰富、数据详尽的可视化工具，从而提升用户体验和数据洞察力。掌握这一技巧，将使您在构建复杂的 Kendo UI 应用时如虎添翼。
以上就是Kendo UI OrgChart 节点内容自定义与数据扩展教程的详细内容，更多请关注其它相关文章！
相关文章：
谷歌浏览器最新官方入口链接 谷歌浏览器网页版官网导航
Android Studio计算器C键逻辑错误排查与修复：条件判断优化指南
Eclipse怎么运行工程_Eclipse工程运行配置说明
现代化 SciPy 一维插值：interp1d 的替代方案与最佳实践
《铁拳8》黑皮辣妹新实机：元气满满的18岁少女！
内存检查：在VS Code中调试C++时的内存视图
小米14应用无法联网原因分析_小米14网络权限修复
小红书商家版怎样在笔记嵌入商品卡路径_小红书商家版在笔记嵌入商品卡路径【挂载教程】
uc浏览器网页版极速入口 uc网页浏览器网页版流畅体验
中兴Axon42Ultra怎样在文件App筛图_iPhone中兴Axon42Ultra文件App筛图【图片筛选】
Excel组合图表怎么做 Excel创建柱状图与折线组合图教程【图表】
浏览器打开即用 美图秀秀网页版入口
c++如何使用chrono库处理时间_c++标准库时间与日期操作
中兴BladeV30怎样用测距估书架层高_iPhone中兴BladeV30测距估书架层高【家装参考】
J*aScript中安全有效地处理localStorage字符串数据
Python：递归比较文件夹内容并找出特定类型文件的差异
Win11怎么关闭快速启动_Win11彻底关机设置教程
蛙漫漫画官网在线入口 蛙漫全本漫画免费阅读平台
抖音网页版怎么|直播|_抖音网页版开播操作指南
yy漫画网页版官方入口_yy漫画官网登录页面链接
VS Code远程开发时如何处理文件权限问题
Win10文件资源管理器“此电脑”分组怎么关 Win10恢复经典视图【技巧】
文心一言怎样用批量生成做多版文案_文心一言用批量生成做多版文案【批量创作】
Windows7怎么硬盘安装 Windows7提取ISO镜像到非系统盘并运行setup.exe实现硬盘直装【教程】
J*aScript map 迭代中检测空数组元素的有效方法
消息称三星明年 2 月正式发布 HBM4，与 SK 海力士同台竞技
sublime怎么格式化代码_sublime代码美化与一键排版插件配置
WooCommerce产品页高级定制：实现基于分类的交叉销售
Win11输入法不见了怎么办_Windows11恢复语言栏显示方法
J*a最大堆Heapify方法修复：索引计算与边界条件深度解析
魅族20怎样在浏览器开无图省流_iPhone魅族20浏览器开无图省流【流量节省】
移动端XML文件怎么转换成Excel 手机和平板上的解决方案
钉钉视频会议声音异常如何处理 钉钉会议音频修复技巧
win11跳过OOBE三种方法 Win11跳过OOBE设置步骤
mysql如何设置表访问权限_mysql表访问权限配置
魅族17怎样用浏览器译外语网页_iPhone魅族17浏览器译外语网页【即时翻译】
c++ 获取系统当前时间 c++时间戳获取方法
抖音网页版企业服务中心登录入口_抖音网页版企业登录平台
Python异步编程实践：使用Binance API构建实时交易数据流
Win11蓝牙耳机断连怎么解决 Win11蓝牙设置重新配对与驱动更新【技巧】
C++如何生成随机数_C++ random库使用方法与范围设置
Log4j Console Appender性能瓶颈与高并发优化策略
C++如何实现单例模式_C++设计模式之线程安全的单例写法
Go RPC HTTP服务正确实现与常见陷阱解析
PyTorch模型训练效果不佳？深入剖析常见错误与调试技巧
2026春节假期票务安排_2026春节放假购票指南
铁路12306官网网页端快速入口 铁路12306官方首页登录教程
使用CSS更改登录屏幕输入框中PNG图标颜色的策略与局限性
Win11怎么开启高性能模式_Windows 11电源计划优化设置
192.168.1.1管理中心入口 192.168.1.1路由器网页设置平台
服务热线
+
"<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>