如何在Excel Add-in中通过Office JS创建层级选项并按条件禁用项？

1. 用Office JS创建层级（Hierarchy）选项 #

可以通过自定义Ribbon菜单的嵌套结构实现层级选项，Office JS支持在Ribbon配置中定义多层嵌套的Menu控件，匹配你需要的层级效果。

示例Ribbon XML配置（定义层级菜单） #

<CustomUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
  <Ribbon>
    <Tabs>
      <Tab id="customTab" label="自定义工具">
        <Group id="customGroup" label="层级菜单">
          <!-- 一级菜单 -->
          <Menu id="level1Menu" label="一级选项">
            <!-- 二级子菜单 -->
            <Menu id="level2Menu1" label="二级选项组1">
              <Button id="option1" label="选项1" onAction="onOptionClick"/>
              <Button id="option2" label="选项2" onAction="onOptionClick"/>
            </Menu>
            <!-- 另一个二级子菜单 -->
            <Menu id="level2Menu2" label="二级选项组2">
              <Button id="option3" label="选项3" onAction="onOptionClick"/>
              <Button id="option4" label="选项4" onAction="onOptionClick"/>
            </Menu>
          </Menu>
        </Group>
      </Tab>
    </Tabs>
  </Ribbon>
</CustomUI>

如果是在任务窗格中实现层级结构，可直接用HTML/CSS构建折叠式层级列表，结合Office JS绑定交互事件，比如用<ul>/<li>嵌套配合JavaScript控制展开/收起状态。

2. 根据特定条件禁用部分选项 #

可以通过Office JS的Office.Ribbon.requestUpdate方法动态更新Ribbon控件的启用状态，以下是实现示例：

示例代码（条件禁用控件） #

// 更新Ribbon控件状态的函数
function updateRibbonControls() {
  // 模拟特定条件：判断当前选中单元格是否为空
  Excel.run(async (context) => {
    const range = context.workbook.getSelectedRange();
    range.load('values');
    await context.sync();
    
    const isCellEmpty = range.values[0][0] === undefined || range.values[0][0] === '';
    
    // 请求更新Ribbon控件状态
    Office.Ribbon.requestUpdate({
      tabs: [
        {
          id: 'customTab',
          groups: [
            {
              id: 'customGroup',
              controls: [
                {
                  id: 'level1Menu',
                  controls: [
                    {
                      id: 'level2Menu1',
                      controls: [
                        { id: 'option1', enabled: !isCellEmpty },
                        { id: 'option2', enabled: !isCellEmpty }
                      ]
                    },
                    {
                      id: 'level2Menu2',
                      controls: [
                        { id: 'option3', enabled: isCellEmpty },
                        { id: 'option4', enabled: isCellEmpty }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    });
  }).catch(error => {
    console.error('更新Ribbon失败:', error);
  });
}

// 在Add-in初始化时绑定事件触发更新
Office.initialize = function() {
  Excel.run(async (context) => {
    const sheet = context.workbook.activeWorksheet;
    // 监听工作表选择变化，实时更新控件状态
    sheet.onSelectionChanged.add(updateRibbonControls);
    await context.sync();
  });
};

注意事项：

• 控件ID必须与Ribbon XML中定义的ID完全一致
• 动态更新Ribbon的操作需在Excel.run上下文或Office JS异步流程中执行
• 任务窗格中的控件禁用可直接修改HTML元素的disabled属性，结合条件判断实现即可

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