feat: column header of the ListTable supports folding

Author: 李杨枚

packages/vtable/src/ListTable.ts

@@ -36,7 +36,7 @@ import { computeColWidth } from './scenegraph/layout/compute-col-width';
 import { computeRowHeight } from './scenegraph/layout/compute-row-height';
 import { defaultOrderFn } from './tools/util';
 import type { IEditor } from '@visactor/vtable-editors';
-import type { ColumnData, ColumnDefine } from './ts-types/list-table/layout-map/api';
+import type { ColumnData, ColumnDefine, HeaderData } from './ts-types/list-table/layout-map/api';
 import { getCellRadioState, setCellRadioState } from './state/radio/radio';
 import { cloneDeepSpec } from '@visactor/vutils-extension';
 import { getGroupCheckboxState, setCellCheckboxState } from './state/checkbox/checkbox';
@@ -839,6 +839,9 @@ export class ListTable extends BaseTable implements ListTableAPI {
    * @returns
    */
   getHierarchyState(col: number, row: number) {
+    if (this.isHeader(col, row)) {
+      return (this._getHeaderLayoutMap(col, row) as HeaderData)?.hierarchyState;
+    }
     if (!this.options.groupBy || (isArray(this.options.groupBy) && this.options.groupBy.length === 0)) {
       const define = this.getBodyColumnDefine(col, row) as ColumnDefine;
       if (!define.tree) {
@@ -857,6 +860,34 @@ export class ListTable extends BaseTable implements ListTableAPI {
   toggleHierarchyState(col: number, row: number, recalculateColWidths: boolean = true) {
     this.stateManager.updateHoverIcon(col, row, undefined, undefined);
     const hierarchyState = this.getHierarchyState(col, row);
+    if (this.isHeader(col, row)) {
+      // 表头的展开和收起
+      const headerTreeNode = this.internalProps.layoutMap.getHeader(col, row) as any;
+      const { hierarchyState: rawHierarchyState, define: columnDefine } = headerTreeNode;
+      if (![HierarchyState.collapse, HierarchyState.expand].includes(rawHierarchyState) || !columnDefine) {
+        return;
+      }
+      const children = columnDefine.columns;
+      // 有子节点才需要自动展开和折叠
+      if (!!Array.isArray(children) && children.length > 0) {
+        const hierarchyState =
+          rawHierarchyState === HierarchyState.expand ? HierarchyState.collapse : HierarchyState.expand;
+        headerTreeNode.hierarchyState = hierarchyState;
+        headerTreeNode.define.hierarchyState = hierarchyState;
+        // 全量更新
+        this.updateColumns(this.internalProps.columns);
+      }
+
+      this.fireListeners(TABLE_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {
+        col,
+        row,
+        hierarchyState,
+        originData: headerTreeNode,
+        cellLocation: this.getCellLocation(col, row)
+      });
+      return;
+    }
+
     if (hierarchyState === HierarchyState.expand) {
       this._refreshHierarchyState(col, row, recalculateColWidths);
       this.fireListeners(TABLE_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {

packages/vtable/src/layout/simple-header-layout.ts

@@ -2,15 +2,15 @@
 import { isValid, merge } from '@visactor/vutils';
 import type { ListTable } from '../ListTable';
 import { DefaultSparklineSpec } from '../tools/global';
-import type {
-  CellAddress,
-  CellRange,
-  CellLocation,
-  IListTableCellHeaderPaths,
-  LayoutObjectId,
-  AggregationType,
-  Aggregation,
-  IRowSeriesNumber
+import {
+  type CellAddress,
+  type CellRange,
+  type CellLocation,
+  type IListTableCellHeaderPaths,
+  type LayoutObjectId,
+  type Aggregation,
+  type IRowSeriesNumber,
+  HierarchyState
 } from '../ts-types';
 import type { ChartColumnDefine, ColumnsDefine } from '../ts-types/list-table/define';
 import type {
@@ -66,6 +66,10 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
   _hasAggregationOnBottomCount: number = 0;
   /**层级维度结构显示形式 */
   rowHierarchyType?: 'grid' | 'tree';
+  /** 列表头树形展示模式 */
+  columnHierarchyType?: 'grid-tree';
+  /** 列表头默认展开层级 */
+  columnExpandLevel?: number;
   // 缓存行号列号对应的cellRange 需要注意当表头位置拖拽后 这个缓存的行列号已不准确 进行重置
   _cellRangeMap: Map<string, CellRange>; //存储单元格的行列号范围 针对解决是否为合并单元格情况
   constructor(table: ListTable, columns: ColumnsDefine, showHeader: boolean, hierarchyIndent: number) {
@@ -77,7 +81,14 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
     this._headerCellIds = [];
     this.hierarchyIndent = hierarchyIndent ?? 20;
     this.hierarchyTextStartAlignment = table.options.hierarchyTextStartAlignment;
-    this.columnTree = new DimensionTree(columns as any, { seqId: 0 }, null); //seqId这里没有利用上 所有顺便传了0
+    this.columnHierarchyType = table.options.columnHierarchyType;
+    this.columnExpandLevel = table.options.columnExpandLevel ?? 1;
+    this.columnTree = new DimensionTree(
+      columns as any,
+      { seqId: 0 },
+      this.columnHierarchyType,
+      this.columnHierarchyType === 'grid-tree' ? this.columnExpandLevel : undefined
+    ); //seqId这里没有利用上 所有顺便传了0
     this._headerObjectsIncludeHided = this._addHeaders(0, columns, []);
     // this._headerObjectMapIncludeHided = this._headerObjectsIncludeHided.reduce((o, e) => {
     //   o[e.id as number] = e;
@@ -989,6 +1000,8 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
         headerType: hd.headerType ?? 'text',
         dropDownMenu: hd.dropDownMenu,
         define: hd,
+        // 展开/折叠状态
+        hierarchyState: (hd as HeaderData).hierarchyState,
         columnWidthComputeMode: hd.columnWidthComputeMode
         // iconPositionList:[]
       };
@@ -1002,7 +1015,9 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
       } else if (this._headerCellIds[row - 1]) {
         rowCells[col] = this._headerCellIds[row - 1][col];
       }
-      if (hd.columns) {
+      // 当前节点是展开状态才需要添加子节点
+      const expand = (hd as HeaderData).hierarchyState === HierarchyState.expand;
+      if (!!hd.columns && !!expand) {
         const isAllHided = hd.columns.every((c: any) => c.hide);
         !isAllHided &&
           this._addHeaders(

packages/vtable/src/ts-types/events.ts

@@ -203,6 +203,7 @@ export interface TableEventHandlersEventArgumentMap {
     dimensionInfo?: IDimensionInfo[];
     /**整条数据-原始数据 */
     originData?: any;
+    cellLocation?: CellLocation;
   };
   vchart_event_type: {
     eventName: string;

packages/vtable/src/ts-types/table-engine.ts

@@ -239,6 +239,10 @@ export interface ListTableConstructorOptions extends BaseTableConstructorOptions
   hierarchyExpandLevel?: number;
   /** 同层级的结点是否按文字对齐 如没有收起展开图标的节点和有图标的节点文字对齐 默认false */
   hierarchyTextStartAlignment?: boolean;
+  /** 列表头树形展示模式(设置成 'grid-tree' 则支持展开和折叠) */
+  columnHierarchyType?: 'grid-tree';
+  /** 列表头默认展开层级(columnHierarchyType 为 'grid-tree' 时有效) */
+  columnExpandLevel?: number;
   /** 分页配置 */
   pagination?: IPagination;