AG-Grid分组行实现根级下拉框及批量赋值功能咨询

一、根分组行添加Form下拉框 #

默认分组行不会渲染普通列的编辑器，需修改Form列配置，让分组行可编辑并显示下拉框：

1. 仅允许分组行编辑Form列
2. 为分组行单独渲染下拉框显示内容
3. 将分组行选中的Form值存储到groupData中，供后续批量赋值使用

二、选中根复选框批量设置子行Form值 #

监听选择变更事件，筛选根分组行，递归获取所有子节点后批量更新Form字段：

完整修改后的代码 #

generateGroupSelectionGridConfig(aggrField: string, userAvailableForms: string[], defaultFields: string[], allFields: Array<any>) {

  let gridOptions : GridOptions = {
      columnDefs: [],
      pagination: true,
      rowSelection: 'multiple',
      // 监听选择变更事件，处理批量赋值
      selectionChanged: () => {
          const selectedNodes = gridOptions.api.getSelectedNodes();
          selectedNodes.forEach(node => {
              // 仅处理根层级的分组行
              if (node.group && node.level === 0) {
                  const formValue = node.groupData?.Form;
                  if (!formValue) return; // 未选择Form时不执行批量操作

                  // 递归获取分组下所有子节点（含嵌套分组的子行）
                  const getAllChildNodes = (parentNode: RowNode) => {
                      let children: RowNode[] = [];
                      if (parentNode.childrenAfterGroup) {
                          parentNode.childrenAfterGroup.forEach(child => {
                              if (child.group) {
                                  children = [...children, ...getAllChildNodes(child)];
                              } else {
                                  children.push(child);
                              }
                          });
                      }
                      return children;
                  };

                  const childNodes = getAllChildNodes(node);
                  // 批量更新子行的Form字段
                  gridOptions.api.updateCells({
                      cells: childNodes.map(child => ({
                          rowNode: child,
                          colKey: 'Form',
                          newValue: formValue
                      }))
                  });
              }
          });
      }
  };

  // 遍历生成字段列
  allFields.forEach( colField => {
      let fieldValue = colField.COLUMN_NAME;
      gridOptions.columnDefs.push({
          field : fieldValue,
          rowGroup: fieldValue == aggrField ? true : false,
          hide: defaultFields.indexOf(fieldValue) !== -1 && fieldValue !== aggrField ? false : true,
          maxWidth: 220,
          aggFunc: 'sum'
      });
  });

  // 修改Form列配置，支持分组行编辑和显示
  gridOptions.columnDefs.push({
      field: "Form",
      // 仅分组行可编辑该列
      editable: params => params.node.group,
      cellEditor: 'agSelectCellEditor',
      cellRenderer: params => {
          if (params.node.group) {
              // 分组行显示已选Form或提示文本
              const selectedForm = params.node.groupData?.Form || 'Click to Select Form';
              return `<div style="padding: 4px;">${selectedForm}</div>`;
          }
          // 普通行保持原有渲染逻辑
          return params.value ? params.value : 'Click to Select Form';
      },
      cellEditorParams: {
          values: userAvailableForms
      },
      // 保存分组行的Form选择到groupData
      onCellValueChanged: params => {
          if (params.node.group) {
              params.node.groupData.Form = params.newValue;
          }
      }
  });

  gridOptions.defaultColDef = {
      flex: 1,
      minWidth: 100
  };

  gridOptions.autoGroupColumnDef = {
      headerName: aggrField.charAt(0).toUpperCase() + aggrField.slice(1),
      field: aggrField,
      maxWidth: 160,
      cellRenderer: 'agGroupCellRenderer',
      cellRendererParams: {
          checkbox: true,
      }
  };

  return gridOptions;
}

关键修改说明 #

• 分组行下拉框：通过editable函数控制仅分组行可编辑，cellRenderer区分分组行和普通行的显示逻辑，onCellValueChanged将选中值存入groupData
• 批量赋值：在selectionChanged事件中筛选根分组行，递归获取所有子节点后，用updateCells批量更新Form字段，避免循环调用setData影响性能

内容的提问来源于stack exchange，提问作者אברגיל יעקובו