Kendo UI OrgChart 节点内容自定义与数据扩展教程-js教程-PHP中文网

Kendo UI OrgChart 节点内容自定义与数据扩展教程

心靈之曲

发布： 2025-11-25 11:25:27

原创

295人浏览过

Kendo UI OrgChart 节点内容自定义与数据扩展教程

本教程详细介绍了如何利用 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 这些字段，并且不需要头像。

AVCLabs

AI移除视频背景，100%自动和免费

268

查看详情

您可以这样构建您的 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>" +
        "</div>",
    // ... 其他配置
});

登录后复制

在这个模板中：

我们创建了一个名为 orgchart-node-custom 的主容器 div，用于整体样式控制。
node-header 显示了 item_desc 作为节点的标题。
node-body 包含了其他所有需要展示的字段，每个字段都用一个 <p> 标签包裹。
#: kendo.toString(fieldName, 'n2') # 用于格式化数字，例如保留两位小数，使其更具可读性。

完整示例代码

下面是一个完整的 Kendo UI OrgChart 配置示例，演示了如何集成自定义模板和您提供的数据。

<!DOCTYPE html>
<html>
<head>
    <title>Kendo UI OrgChart 自定义节点</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.3.1114/styles/kendo.default-v2.min.css" />
    <script src="https://kendo.cdn.telerik.com/2023.3.1114/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.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>

登录后复制

代码说明：

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 应用时如虎添翼。

以上就是Kendo UI OrgChart 节点内容自定义与数据扩展教程的详细内容，更多请关注php中文网其它相关文章！