本教程详细介绍了如何利用 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。为了提高可读性，可以使用 或 标签来标识字段名称。

<div class='custom-orgchart-node'>
    <div class='node-header'>
        <strong>#: item_desc #</strong>
    </div>
    <div class='node-body'>
        <p>EOY Target: <span>#: kendo.toString(eoy_target, "n2") #</span></p>
        <p>EOY Actual: <span>#: kendo.toString(eoy_actual, "n2") #</span></p>
        <p>YTD Plan: <span>#: kendo.toString(ytd_plan, "n2") #</span></p>
        <p>YTD Actual: <span>#: kendo.toString(ytd_actual, "n2") #</span></p>
        <p>ACHI PI: <span>#: kendo.toString(achi_pi, "n2") #</span></p>
        <p>ACHI IA: <span>#: kendo.toString(achi_ia, "n2") #</span></p>
        <p>ACHI RA: <span>#: kendo.toString(achi_ra, "n2") #</span></p>
        <p>ACHI IP: <span>#: kendo.toString(achi_ip, "n2") #</span></p>
    </div>
</div>

注意：

• 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: "<div class='custom-orgchart-node'>" +
                "<div class='node-header'>" +
                    "<strong>#: item_desc #</strong>" +
                "</div>" +
                "<div class='node-body'>" +
                    "<p>EOY Target: <span>#: kendo.toString(eoy_target, 'n2') #</span></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>
                " +
                    "<p>EOY Actual: <span>#: kendo.toString(eoy_actual, 'n2') #</span></p>" +
                    "<p>YTD Plan: <span>#: kendo.toString(ytd_plan, 'n2') #</span></p>" +
                    "<p>YTD Actual: <span>#: kendo.toString(ytd_actual, 'n2') #</span></p>" +
                    "<p>ACHI PI: <span>#: kendo.toString(achi_pi, 'n2') #</span></p>" +
                    "<p>ACHI IA: <span>#: kendo.toString(achi_ia, 'n2') #</span></p>" +
                    "<p>ACHI RA: <span>#: kendo.toString(achi_ra, 'n2') #</span></p>" +
                    "<p>ACHI IP: <span>#: kendo.toString(achi_ip, 'n2') #</span></p>" +
                "</div>" +
            "</div>"
});

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、J*aScript 和 CSS 片段整合到一个页面中，即可看到自定义的 Kendo UI OrgChart。

<!DOCTYPE html>
<html>
<head>
    <title>Kendo UI OrgChart 自定义节点</title>
    <link href="https://kendo.cdn.telerik.com/2025.1.130/styles/kendo.default-v2.min.css" rel="stylesheet" />
    <script src="https://kendo.cdn.telerik.com/2025.1.130/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2025.1.130/js/kendo.all.min.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        #orgchart {
            height: 100%;
            width: 100%;
            margin: 0 auto;
        }
        .k-orgchart-node {
            width: 280px; /* 调整节点宽度以容纳更多信息 */
            min-height: 200px; /* 调整节点最小高度 */
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            border-radius: 8px;
            overflow: hidden;
            background-color: #fff;
            border: 1px solid #e0e0e0;
        }

        .custom-orgchart-node {
            padding: 10px;
            color: #333;
            font-size: 13px;
            line-height: 1.4;
            display: flex;
            flex-direction: column;
            height: 100%; /* 确保内部div填充节点高度 */
        }

        .custom-orgchart-node .node-header {
            background-color: #f8f9fa;
            padding: 8px 10px;
            margin: -10px -10px 10px -10px; /* 扩展背景到边缘 */
            border-bottom: 1px solid #dee2e6;
            font-size: 15px;
            color: #212529;
            text-align: center;
            font-weight: bold;
        }

        .custom-orgchart-node .node-body {
            flex-grow: 1; /* 让内容区域填充剩余空间 */
            display: flex;
            flex-direction: column;
            justify-content: space-around; /* 均匀分布内容 */
        }

        .custom-orgchart-node .node-body p {
            margin: 2px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .custom-orgchart-node .node-body p strong {
            color: #555;
            font-weight: normal;
            margin-right: 5px;
        }

        .custom-orgchart-node .node-body p span {
            font-weight: bold;
            color: #007bff;
            white-space: nowrap; /* 防止数字换行 */
        }
    </style>
</head>
<body>
    <div id="orgchart"></div>

    <script>
        $(document).ready(function () {
            var orgChartData = [
                {
                    "item_id": "193", // 假设这是一个根节点或父节点
                    "item_desc": "Blasting Cost",
                    "parent_pi_kode": 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_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" }
                            }
                        }
                    }
                }),
                template: "<div class='custom-orgchart-node'>" +
                            "<div class='node-header'>" +
                                "#: item_desc #" +
                            "</div>" +
                            "<div class='node-body'>" +
                                "<p><strong>EOY Target:</strong> <span>#: kendo.toString(eoy_target, 'n2') #</span></p>" +
                                "<p><strong>EOY Actual:</strong> <span>#: kendo.toString(eoy_actual, 'n2') #</span></p>" +
                                "<p><strong>YTD Plan:</strong> <span>#: kendo.toString(ytd_plan, 'n2') #</span></p>" +
                                "<p><strong>YTD Actual:</strong> <span>#: kendo.toString(ytd_actual, 'n2') #</span></p>" +
                                "<p><strong>ACHI PI:</strong> <span>#: kendo.toString(achi_pi, 'n2') #</span></p>" +
                                "<p><strong>ACHI IA:</strong> <span>#: kendo.toString(achi_ia, 'n2') #</span></p>" +
                                "<p><strong>ACHI RA:</strong> <span>#: kendo.toString(achi_ra, 'n2') #</span></p>" +
                                "<p><strong>ACHI IP:</strong> <span>#: kendo.toString(achi_ip, 'n2') #</span></p>" +
                            "</div>" +
                        "</div>"
            });
        });
    </script>
</body>
</html>

注意事项

1. 数据字段映射： 确保 schema.model.id 和 schema.model.parentId 正确映射到您数据源中的唯一标识和父节点标识字段。这是构建正确层级关系的基础。
2. 模板内容与样式： 模板中的 HTML 结构和 CSS 样式直接决定了节点的视觉效果。合理设计布局和样式，以确保所有信息清晰可读，并适应不同

以上就是Kendo UI OrgChart 高级定制：显示多字段与移除头像的详细内容，更多请关注其它相关文章！

# javascript  # css  # 可视化数据  # 数据可视化  # cdn  # node  # json  # js  # html  # jquery  # java  # 网站域名优化建议  # bob网站建设  # seo效果展示  # 免费seo问答  # 天津实用网站建设有几种  # wordpress 关键词排名  # 设计类网站建设方案小学  # 阜平网站快排seo  # 网站排名优化外包多少钱  # 团风关键词排名  # 更多信息  # 弹出  # 数据结构  # 您可以  # 结构图  # 多个  # 您的  # 移除  # 自定义  # 多字 

相关栏目： 【 科技资讯46185 】 【 网络学院92790 】

相关推荐： Python异步编程实践：使用Binance API构建实时交易数据流  PHP中获取MongoDB服务器运行时间（Uptime）的专业指南  C++如何实现单例模式_C++设计模式之线程安全的单例写法  QQ邮箱官方网页版登录 QQ邮箱个人邮箱快速访问  lar*el怎么安全地存储和获取配置文件中的敏感信息_lar*el敏感信息安全存储方法  j*a toString()的覆盖  QQ邮箱网页版登录入口 QQ邮箱官方在线使用平台  Win10如何恢复误删的快捷方式_Win10重建常用软件快捷方式  C++如何操作注册表_Windows平台下C++读写注册表的API函数详解  MAC如何将整个网页截长图_MAC使用Safari的导出为PDF或第三方工具  J*aScript中localStorage数据的获取、清洗与格式化教程  荣耀Play7TPro怎样在信息App置顶客服对话_iPhone荣耀Play7TPro信息App置顶客服对话【优先查看】  QQ邮箱登录官网首页 腾讯QQ邮箱网页入口  css链接悬停下划线样式如何自定义_使用::after结合content和transition  Tabulator表格日期时间排序问题及自定义解决方案  b站怎么看视频的弹幕数量_b站弹幕数量查看方法  汽水音乐车机版8.9下载 汽水音乐车机版8.9版本安装入口  PDF文件体积过大处理_PDF压缩技巧详解  微博网页版官方账号登录 微博网页版内容浏览使用指南  Safari自带网页翻译功能怎么用 无需插件轻松看懂外文网站【方法】  AngularJS $http POST请求数据传递与Go后端接收实践  C++ vector二维数组定义_C++ vector of vector用法  百度浏览器字体显示异常偏小_百度浏览器字体渲染修复方案  Django表单提交验证失败后保持字段值不刷新  Golang如何使用new_Go new分配内存机制讲解  内存疯狂猛猛涨价：主板销量直接腰斩！  Go语言中Map存储的结构体如何调用指针方法：深入解析与实践  Django表单验证失败时保留用户输入数据的最佳实践  拼多多赚钱渠道_拼多多收益来源  蛙漫移动版在线看 蛙漫手机浏览器直达入口  利用Bokeh CustomJS动态控制DataTable列可见性  火锅吃太多会怎样 火锅吃太多会上火吗  必由学官网快捷入口 必由学网页版在线学习平台  AO3最新入口2025公告_AO3中文官网合集  AO3同人作品网入口 AO3搜索引擎官网永久地址  多闪网页版在线观看免费入口_多闪官网访问入口  iCloud登录入口网页版 苹果iCloud官网登录  解决Python单元测试中Mock异常方法调用计数为零的问题  qq音乐在线播放入口_qq音乐电脑版登录链接  QQ网页版官方账号入口 QQ网页版网页版登录指南  qq游戏网页版直接玩_qq游戏免下载快速入口  Win11怎么关闭快速启动_Win11彻底关机设置教程  漫画星球免费下拉式入口 漫画星球免费漫画在线阅读网站  实现分段式页面滚动导航：CSS与J*aScript教程  Golang如何优雅处理error_Golang error处理最佳实践总结  深入理解与实现最大堆的Heapify过程：常见错误与修正  抖音网页版平台入口 抖音网页版官网在线访问教程  深入理解J*a合成构造器：何时以及为何阻止其生成  vivo手机互传视频怎么操作_vivo手机互传视频详细传输方法  HTML5原生日期选择器与jQuery UI：实现日期选择器的联动与程序化控制