如何自定义Kendo UI OrgChart展示多业务字段（无头像）

给定如下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.692307,
    "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
  }
]

需要制作带展开折叠功能的Kendo UI OrgChart，默认仅展示name和position字段，需求如下：

• 展示指定9个字段：item_desc、eoy_target、eoy_actual、ytd_plan、ytd_actual、achi_pi、achi_ra、achi_ip、achi_ia
• 移除默认头像字段
• 保留展开折叠功能

核心是通过数据源字段映射和自定义节点模板实现需求，步骤如下：

1. 数据源字段映射 #

Kendo UI OrgChart默认依赖id、parentId、hasChildren等字段，需要通过schema.model将你的JSON字段对应到这些核心字段，确保节点层级和展开状态正常工作。

2. 自定义节点模板 #

使用template属性完全自定义节点内容，去掉头像，通过HTML布局展示所有需要的字段，可结合Kendo模板语法直接调用数据源字段。

3. 启用展开折叠 #

通过映射has_child和is_expanded字段，OrgChart会自动显示展开/折叠按钮，并控制节点默认展开状态。

<!-- 引入Kendo UI依赖资源 -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2024.1.319/styles/kendo.default-v2.min.css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js"></script>

<!-- OrgChart容器 -->
<div id="orgchart"></div>

<script>
// 你的业务数据
const chartData = [
  {
    "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.692307,
    "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
$("#orgchart").kendoOrgChart({
  dataSource: {
    data: chartData,
    schema: {
      model: {
        id: "item_id", // 映射节点唯一ID
        parentId: "parent_pi_kode", // 映射父节点ID
        hasChildren: "has_child", // 映射是否存在子节点
        expanded: "is_expanded", // 映射节点默认展开状态
        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_ra: { type: "number" },
          achi_ip: { type: "number" },
          achi_ia: { type: "number" }
        }
      }
    }
  },
  // 自定义节点内容模板，去掉头像，展示所有业务字段
  template: '<div class="k-orgchart-item-content">' +
              '<h4 style="margin:0;">#: item_desc #</h4>' +
              '<table style="width:100%; margin-top:8px; border-collapse: collapse;">' +
                '<tr><td style="padding:4px 0; border-bottom:1px solid #eee;">EOY Target:</td><td style="padding:4px 0; border-bottom:1px solid #eee; text-align:right;">#: eoy_target #</td></tr>' +
                '<tr><td style="padding:4px 0; border-bottom:1px solid #eee;">EOY Actual:</td><td style="padding:4px 0; border-bottom:1px solid #eee; text-align:right;">#: eoy_actual #</td></tr>' +
                '<tr><td style="padding:4px 0; border-bottom:1px solid #eee;">YTD Plan:</td><td style="padding:4px 0; border-bottom:1px solid #eee; text-align:right;">#: ytd_plan #</td></tr>' +
                '<tr><td style="padding:4px 0; border-bottom:1px solid #eee;">YTD Actual:</td><td style="padding:4px 0; border-bottom:1px solid #eee; text-align:right;">#: ytd_actual #</td></tr>' +
                '<tr><td style="padding:4px 0; border-bottom:1px solid #eee;">Achi PI:</td><td style="padding:4px 0; border-bottom:1px solid #eee; text-align:right;">#: kendo.toString(achi_pi, "n2") #</td></tr>' +
                '<tr><td style="padding:4px 0; border-bottom:1px solid #eee;">Achi IA:</td><td style="padding:4px 0; border-bottom:1px solid #eee; text-align:right;">#: achi_ia #</td></tr>' +
                '<tr><td style="padding:4px 0; border-bottom:1px solid #eee;">Achi RA:</td><td style="padding:4px 0; border-bottom:1px solid #eee; text-align:right;">#: achi_ra #</td></tr>' +
                '<tr><td style="padding:4px 0;">Achi IP:</td><td style="padding:4px 0; text-align:right;">#: achi_ip #</td></tr>' +
              '</table>' +
            '</div>',
  avatar: false, // 隐藏默认头像
  width: 320, // 调整节点宽度适配内容
  layout: "vertical" // 可选：设置布局方式，默认水平布局
});
</script>

• 字段映射：通过schema.model将业务字段与OrgChart核心字段绑定，确保节点层级关系、子节点判断和默认展开状态正常生效。
• 自定义模板：使用Kendo模板语法直接调用数据源字段，通过HTML表格规整展示所有需要的内容，avatar: false直接移除默认头像模块。
• 展开折叠：无需额外编写事件逻辑，OrgChart会自动根据hasChildren字段显示展开/折叠按钮，expanded字段控制节点初始化时的展开状态。

内容的提问来源于stack exchange，提问作者AgnesHira