如何为动态数据源生成的Kendo UI Menu子项组添加父项名称标题

嗨，我来帮你搞定这个需求！给Kendo UI Menu的子项组加上父项名称的标题，其实有两种实用的实现方式，你可以根据自己的项目偏好来选：

方法1：用弹出框模板（PopupTemplate）直接添加标题 #

这种方法不需要改动你的原始动态数据源，直接通过配置Menu的popupTemplate，就能给每个弹出的子菜单顶部自动绑定父菜单项的文本作为标题，非常省心。

示例代码如下：

<!-- HTML结构 -->
<ul id="menu"></ul>

<script>
// 假设这是你的动态菜单数据源
var menuData = [
  {
    text: "Menu 1",
    items: [
      { text: "Item 1" },
      { text: "Item 2", items: [
        { text: "Sub Item 1" },
        { text: "Sub Item 2" }
      ]},
      { text: "Item 3", items: [
        { text: "Sub Item 3" }
      ]}
    ]
  },
  // 这里可以加其他父菜单项...
];

$("#menu").kendoMenu({
  dataSource: menuData,
  // 配置弹出框模板，插入父项名称作为标题
  popupTemplate: `
    <div class="k-popup k-menu-group">
      <h2 class="submenu-title">#: parent.text #</h2>
      <ul class="k-list k-menu-items"></ul>
    </div>
  `,
  // 可选：给标题添加基础样式（也可以直接写在CSS里）
  open: function(e) {
    $(".submenu-title").css({
      padding: "8px 12px",
      margin: 0,
      fontSize: "1.1em",
      fontWeight: "bold",
      borderBottom: "1px solid #eee"
    });
  }
});
</script>

核心是popupTemplate里的#: parent.text #，它会自动关联当前弹出子菜单对应的父菜单项文本，完全不需要手动传值。

方法2：修改动态数据源，插入专属标题项 #

如果你更习惯通过数据源来控制内容结构，可以在构建数据源时，给每个父菜单项的子项数组最前面插入一个特殊的「标题项」，再通过itemTemplate把它渲染成标题样式，同时设置不可点击。

示例代码：

<ul id="menu"></ul>

<script>
var menuData = [
  {
    text: "Menu 1",
    items: [
      { text: "Item 1" },
      { text: "Item 2", items: [
        { text: "Sub Item 1" },
        { text: "Sub Item 2" }
      ]},
      { text: "Item 3", items: [
        { text: "Sub Item 3" }
      ]}
    ]
  }
];

// 遍历数据源，给有子项的父项插入标题项
menuData.forEach(function(parentItem) {
  if (parentItem.items && parentItem.items.length > 0) {
    // 在子项数组最前面插入标题项，标记类型为header
    parentItem.items.unshift({
      text: parentItem.text,
      type: "header",
      enabled: false, // 设置不可点击
      encoded: false // 允许渲染HTML标签
    });
  }
});

$("#menu").kendoMenu({
  dataSource: menuData,
  // 自定义项模板，根据类型渲染不同内容
  itemTemplate: function(dataItem) {
    if (dataItem.type === "header") {
      return `<h2 class="submenu-title">${dataItem.text}</h2>`;
    }
    // 正常菜单项的默认渲染逻辑
    return `<span class="k-link">#: text #</span>`;
  }
});
</script>

<style>
.submenu-title {
  padding: 8px 12px;
  margin: 0;
  font-size: 1.1em;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  cursor: default; /* 鼠标样式改成默认，提示不可点击 */
}
</style>

这种方式的优势是你可以灵活控制哪些父项需要标题，或者给标题项添加更多自定义属性。

小提醒 #

• 如果用方法2，一定要记得设置encoded: false，否则Kendo UI会把<h2>这类标签当成纯文本显示，达不到预期效果。
• 两种方法都可以通过CSS调整标题的样式，让它和你的菜单风格完全匹配。

你可以根据自己的项目场景选一种，亲测都能实现你想要的子项组带父项标题的效果！

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