Kendo UI OrgChart 高级定制：显示多字段与移除头像-js教程-PHP中文网

Kendo UI OrgChart 高级定制：显示多字段与移除头像

本教程详细介绍了如何利用 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 数据源包含了所有需要显示的信息。例如，以下是包含多个业务指标的数据结构：

小鸽子助手

一款集成于WPS/Word的智能写作插件

查看详情

[
  {
    "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 字符串。在这个模板中，我们将移除默认的头像 <img> 标签，并为每个字段创建相应的显示元素，例如 div 或 span。为了提高可读性，可以使用 <label> 或 <strong> 标签来标识字段名称。

<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 样式定义。
模板中不再包含 <img> 标签，从而移除了头像显示。

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

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

登录后复制

注意事项

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

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