ag-grid技术问询：拖动子列时触发整组父列拖拽或禁用子列拖拽

我来帮你解决这个ag-grid的列拖拽问题，刚好我之前处理过类似需求，有两个方案供你选择：

这个方案完全贴合你的核心需求——当用户拖动任何子列（比如‘Bought’）时，实际拖动的是整个父列（‘Game of Choice’）及其所有子列。实现思路是利用ag-grid的columnDragStarted事件，在拖动开始时判断当前列是否为子列，如果是，强制切换为拖动其父列。

具体实现代码如下：

const gridOptions = {
  columnDefs: [
    {
      headerName: 'Game of Choice',
      children: [
        { field: 'gameName', headerName: 'Game Name' },
        { field: 'bought', headerName: 'Bought' }
      ]
    },
    // 其他列定义...
  ],
  // 监听列拖动开始事件
  onColumnDragStarted: (event) => {
    const draggedColumn = event.column;
    // 检查当前拖动的列是否有父列
    if (draggedColumn.parent) {
      // 强制设置拖动父列
      event.api.setColumnDragging(draggedColumn.parent);
    }
  },
  // 其他grid配置...
};

原理说明：setColumnDragging是ag-grid提供的API，允许手动指定当前正在拖动的列。当用户点击子列开始拖动时，我们通过这个API把拖动目标替换成父列，这样整个父列就会跟着移动，子列不会被单独拖出父列结构。

如果方案一因为某些原因无法满足你的需求（比如特定版本的ag-grid不支持setColumnDragging），可以退而求其次，禁用所有子列的拖拽功能，只允许父列被拖动。

实现方法很简单，给每个子列添加suppressMovable: true属性即可：

const gridOptions = {
  columnDefs: [
    {
      headerName: 'Game of Choice',
      children: [
        { field: 'gameName', headerName: 'Game Name', suppressMovable: true },
        { field: 'bought', headerName: 'Bought', suppressMovable: true }
      ]
      // 父列默认允许拖动，无需额外设置
    },
    // 其他列定义...
  ],
  // 其他grid配置...
};

如果你的子列数量很多，不想逐个设置，可以用数组的map方法批量处理：

const parentColumn = {
  headerName: 'Game of Choice',
  children: [
    { field: 'gameName', headerName: 'Game Name' },
    { field: 'bought', headerName: 'Bought' },
    // 更多子列...
  ].map(childCol => ({ ...childCol, suppressMovable: true }))
};

这样所有子列都会被禁用拖拽，只有父列可以正常拖动调整位置。

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