如何在Syncfusion TreeGrid的ContextMenu中动态实现插入列功能

以下为纯JS版实现逻辑，React/Vue/Angular等框架版可对应替换为框架绑定的响应式列逻辑，核心实现思路通用。

步骤1：配置自定义上下文菜单 #

首先启用TreeGrid的上下文菜单能力，自定义三个列操作的菜单项，指定仅在表头区域触发菜单，避免点击内容行弹出无关选项：

import { TreeGrid, ContextMenu } from '@syncfusion/ej2-treegrid';
TreeGrid.Inject(ContextMenu);

let treeGridObj = new TreeGrid({
  dataSource: yourDataSource,
  allowResizing: true,
  showColumnMenu: false, // 关闭默认列菜单，优先使用自定义上下文菜单
  contextMenuItems: [
    { text: 'Insert Column', target: '.e-headercell', id: 'insert_col' },
    { text: 'Rename Column', target: '.e-headercell', id: 'rename_col' },
    { text: 'Delete Column', target: '.e-headercell', id: 'delete_col' }
  ],
  contextMenuClick: contextMenuClickHandler, // 菜单点击事件回调
  columns: [
    { field: 'taskID', headerText: '任务ID', isPrimaryKey: true, width: 100 },
    { field: 'taskName', headerText: '任务名称', width: 200 },
    { field: 'duration', headerText: '耗时', width: 120 }
  ]
});
treeGridObj.appendTo('#TreeGrid');

步骤2：实现菜单点击的业务逻辑 #

在回调函数中分别处理三个列操作的逻辑：

function contextMenuClickHandler(args) {
  // 获取当前右键点击的表头对应的列对象
  const clickedColumn = treeGridObj.getColumnByIndex(args.rowInfo.rowIndex);
  const currentColIndex = clickedColumn.index;

  // 1. 插入列逻辑
  if(args.item.id === 'insert_col') {
    // 可替换为自定义弹窗配置列参数，此处为最简示例
    const newColumn = {
      field: `custom_col_${Date.now()}`, // 生成唯一字段名避免冲突
      headerText: '新增列',
      width: 150
    };
    // 在当前点击列的右侧插入，如需插入左侧可改为currentColIndex
    treeGridObj.columns.splice(currentColIndex + 1, 0, newColumn);
    treeGridObj.refreshColumns(); // 刷新列渲染
  }

  // 2. 重命名列逻辑
  else if(args.item.id === 'rename_col') {
    const newHeader = prompt('请输入新列名：', clickedColumn.headerText);
    if(newHeader?.trim()) {
      clickedColumn.headerText = newHeader.trim();
      treeGridObj.refreshColumns();
    }
  }

  // 3. 删除列逻辑
  else if(args.item.id === 'delete_col') {
    // 业务限制示例：禁止删除主键列、禁止仅剩一列时删除
    if(clickedColumn.isPrimaryKey) return alert('主键列不允许删除');
    if(treeGridObj.columns.length <= 1) return alert('至少保留一列');

    if(confirm(`确认删除列「${clickedColumn.headerText}」吗？`)) {
      treeGridObj.columns.splice(currentColIndex, 1);
      treeGridObj.refreshColumns();
    }
  }
}

注：如果需要更复杂的插入列规则，比如指定列类型、格式化规则、是否可编辑等，可将插入列的prompt替换为自定义表单弹窗，用户填写完参数后再生成对应的列配置插入即可。

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