Merge pull request #834 from VisActor/819-feature-support-edit-header

819 feature support edit header
VisActor · Jan 3, 2024 · ee7024f · ee7024f
2 parents 6458258 + 2d7f26a
commit ee7024f
Show file tree

Hide file tree

Showing 15 changed files with 113 additions and 14 deletions.
diff --git a/common/changes/@visactor/vtable/819-feature-support-edit-header_2024-01-02-07-47.json b/common/changes/@visactor/vtable/819-feature-support-edit-header_2024-01-02-07-47.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: support edit header title #819\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}
diff --git a/docs/assets/guide/en/edit/edit_cell.md b/docs/assets/guide/en/edit/edit_cell.md
@@ -228,4 +228,8 @@ Editing trigger timing support: double-click a cell to enter editing, click a ce
   completeEditCell: () => void;
 ```
 
+## Header Editing
+
+The basic table supports editing the display title in the header. You can enable this by configuring `headerEditor` globally or within a column. The usage is the same as `editor`.
+
 Through the above steps, you can create a table with editing functions, select the appropriate editor type according to business needs, customize the editor, listen to editing events, and obtain edited data. In this way, users can easily edit the data in the table, and you can process the edited data accordingly.
diff --git a/docs/assets/guide/zh/edit/edit_cell.md b/docs/assets/guide/zh/edit/edit_cell.md
@@ -234,5 +234,8 @@ tableInstance.records;
   /** 结束编辑 */
   completeEditCell: () => void;
 ```
+## 表头编辑
+
+基本表格可支持编辑表头显示标题title，在全局或者在column中配置`headerEditor`来开启，具体用法同`editor`。
 
 通过以上步骤，你可以创建一个具有编辑功能的表格，并根据业务需求选择合适的编辑器类型、自定义编辑器、监听编辑事件以及获取编辑后的数据。这样，用户就可以方便地编辑表格中的数据，并且你可以对编辑后的数据进行相应的处理。
diff --git a/docs/assets/option/en/column/base-column-type.md b/docs/assets/option/en/column/base-column-type.md
@@ -209,5 +209,13 @@ editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => s
 ```
 Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts .
 
+
+${prefix} headerEditor (string|Object|Function)
+
+Configure the display title of this column header
+```
+headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
+```
+
 ${prefix} columns (Array)
 Configure arrays with upper columns, nesting structures to describe column grouping relationships.
diff --git a/docs/assets/option/en/table/listTable.md b/docs/assets/option/en/table/listTable.md
@@ -78,6 +78,13 @@ editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => s
 ```
 Among them, IEditor is the editor interface defined in @visactor/vtable-editors. For details, please refer to the source code: https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts .
 
+${prefix} headerEditor (string|Object|Function)
+
+Global configuration for the editor of the display title in the table header
+```
+headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
+```
+
 {{ use: common-option-secondary(
     prefix = '#',
     tableType = 'listTable'

diff --git a/docs/assets/option/zh/column/base-column-type.md b/docs/assets/option/zh/column/base-column-type.md
@@ -219,5 +219,12 @@ editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => s
 ```
 其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts。
 
+${prefix} headerEditor (string|Object|Function)
+
+配置该列表头显示标题title
+```
+headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
+```
+
 ${prefix} columns (Array)
 同上层的列配置数组，嵌套结构来描述列分组关系。
diff --git a/docs/assets/option/zh/table/listTable.md b/docs/assets/option/zh/table/listTable.md
@@ -77,6 +77,13 @@ editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => s
 ```
 其中IEditor是@visactor/vtable-editors中定义的编辑器接口，具体可以参看源码：https://github.com/VisActor/VTable/blob/feat/editCell/packages/vtable-editors/src/types.ts。
 
+${prefix} headerEditor (string|Object|Function)
+
+全局配置表头显示标题title的编辑器
+```
+headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
+```
+
 {{ use: common-option-secondary(
     prefix = '#',
     tableType = 'listTable'

diff --git a/packages/vtable/examples/editor/custom-date-editor.ts b/packages/vtable/examples/editor/custom-date-editor.ts
@@ -223,6 +223,7 @@ export function createTable() {
       title: 'email',
       width: 'auto',
       sort: true,
+      headerEditor: 'input',
       editor: 'input'
     },
     {
@@ -341,11 +342,36 @@ export function createTable() {
     }),
     autoWrapText: true,
     limitMaxAutoWidth: 600,
+    menu: {
+      contextMenuItems: ['向下插入数据', '向下插入空行', '向右插入空列', '修改值', '删除该行']
+    },
+    dragHeaderMode: 'all',
     heightMode: 'autoHeight'
   };
   const tableInstance = new VTable.ListTable(option);
   tableInstance.on('initialized', args => {
     console.log('initialized');
   });
+  tableInstance.on('change_cell_value', arg => {
+    console.log(arg);
+  });
   window.tableInstance = tableInstance;
+  tableInstance.on('dropdown_menu_click', args => {
+    console.log('dropdown_menu_click', args);
+    if (args.menuKey === '向下插入数据') {
+      const recordIndex = tableInstance.getRecordShowIndexByCell(args.col, args.row);
+      tableInstance.addRecords(generatePersons(1), recordIndex + 1);
+    } else if (args.menuKey === '向下插入空行') {
+      const recordIndex = tableInstance.getRecordShowIndexByCell(args.col, args.row);
+      tableInstance.addRecord({}, recordIndex + 1);
+    } else if (args.menuKey === '向右插入空列') {
+      columns.splice(args.col + 1, 0, { field: Date.now().toString(), headerEditor: 'input', editor: 'input' });
+      tableInstance.updateColumns(columns);
+    } else if (args.menuKey === '删除该行') {
+      const recordIndex = tableInstance.getRecordShowIndexByCell(args.col, args.row);
+      tableInstance.deleteRecords([recordIndex]);
+    } else if (args.menuKey === '修改值') {
+      tableInstance.startEditCell(args.col, args.row);
+    }
+  });
 }
diff --git a/packages/vtable/examples/list/list.ts b/packages/vtable/examples/list/list.ts
@@ -317,7 +317,8 @@ export function createTable() {
     rightFrozenColCount: 2,
     overscrollBehavior: 'none',
     autoWrapText: true,
-    heightMode: 'autoHeight'
+    heightMode: 'autoHeight',
+    dragHeaderMode: 'all'
     // widthMode: 'adaptive'
   };
   const tableInstance = new VTable.ListTable(option);

diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts
@@ -872,7 +872,9 @@ export class ListTable extends BaseTable implements ListTableAPI {
   /** 获取单元格对应的编辑器 */
   getEditor(col: number, row: number) {
     const define = this.getBodyColumnDefine(col, row);
-    let editorDefine = define?.editor ?? this.options.editor;
+    let editorDefine = this.isHeader(col, row)
+      ? define?.headerEditor ?? this.options.headerEditor
+      : define?.editor ?? this.options.editor;
 
     if (typeof editorDefine === 'function') {
       const arg = {
@@ -893,9 +895,19 @@ export class ListTable extends BaseTable implements ListTableAPI {
   changeCellValue(col: number, row: number, value: string | number | null) {
     const recordIndex = this.getRecordShowIndexByCell(col, row);
     const { field } = this.internalProps.layoutMap.getBody(col, row);
-    this.dataSource.changeFieldValue(value, recordIndex, field, col, row, this);
+    const beforeChangeValue = this.getCellRawValue(col, row);
+    if (this.isHeader(col, row)) {
+      this.internalProps.layoutMap.updateColumnTitle(col, row, value as string);
+    } else {
+      this.dataSource.changeFieldValue(value, recordIndex, field, col, row, this);
+    }
     // const cell_value = this.getCellValue(col, row);
-    this.scenegraph.updateCellContent(col, row);
+    const range = this.getCellRange(col, row);
+    for (let sCol = range.start.col; sCol <= range.end.col; sCol++) {
+      for (let sRow = range.start.row; sRow <= range.end.row; sRow++) {
+        this.scenegraph.updateCellContent(sCol, sRow);
+      }
+    }
     if (this.widthMode === 'adaptive' || (this.autoFillWidth && this.getAllColsWidth() <= this.tableNoFrameWidth)) {
       if (this.internalProps._widthResizedColMap.size === 0) {
         //如果没有手动调整过行高列宽 则重新计算一遍并重新分配
@@ -918,7 +930,7 @@ export class ListTable extends BaseTable implements ListTableAPI {
     this.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
       col,
       row,
-      rawValue: this.getCellRawValue(col, row),
+      rawValue: beforeChangeValue,
       changedValue: this.getCellOriginValue(col, row)
     });
     this.scenegraph.updateNextFrame();

diff --git a/packages/vtable/src/edit/edit-manager.ts b/packages/vtable/src/edit/edit-manager.ts
@@ -49,8 +49,8 @@ export class EditManeger {
     });
   }
   startEditCell(col: number, row: number) {
-    //表头不允许编辑
-    if (this.table.isHeader(col, row)) {
+    //透视表的表头不允许编辑
+    if (this.table.isPivotTable() && this.table.isHeader(col, row)) {
       return;
     }
     const editor = (this.table as ListTableAPI).getEditor(col, row);
@@ -60,19 +60,21 @@ export class EditManeger {
         console.warn("VTable Warn: cell has config custom render or layout, can't be edited");
         return;
       }
-      const range = this.table.getCellRange(col, row);
-      const isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
-      if (isMerge) {
-        console.warn("VTable Warn: this is merge cell, can't be edited");
-        return;
+      if (!this.table.isHeader(col, row)) {
+        const range = this.table.getCellRange(col, row);
+        const isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
+        if (isMerge) {
+          console.warn("VTable Warn: this is merge cell, can't be edited");
+          return;
+        }
       }
       editor.bindSuccessCallback?.(() => {
         this.completeEdit();
       });
       this.editingEditor = editor;
       this.editCell = { col, row };
       const dataValue = this.table.getCellOriginValue(col, row);
-      const rect = this.table.getCellRelativeRect(col, row);
+      const rect = this.table.getCellRangeRelativeRect(this.table.getCellRange(col, row));
       editor.beginEditing(
         this.table.getElement(),
         { rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height } },

diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts
@@ -930,4 +930,10 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
   clearCellRangeMap() {
     this._cellRangeMap.clear();
   }
+
+  updateColumnTitle(col: number, row: number, title: string) {
+    const define = this._table.internalProps.layoutMap.getHeader(col, row);
+    define.title = title;
+    define.define.title = title;
+  }
 }
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
@@ -483,7 +483,9 @@ export function updateCell(col: number, row: number, table: BaseTableAPI, addNew
       isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row;
       value = customMergeText;
       customStyle = customMergeStyle;
-      cellTheme = getStyleTheme(customStyle, table, range.start.col, range.start.row, getProp).theme;
+      if (customStyle) {
+        cellTheme = getStyleTheme(customStyle, table, range.start.col, range.start.row, getProp).theme;
+      }
     }
   }
 

diff --git a/packages/vtable/src/ts-types/list-table/define/basic-define.ts b/packages/vtable/src/ts-types/list-table/define/basic-define.ts
@@ -54,6 +54,7 @@ export interface IBasicHeaderDefine {
    *  是否禁用调整列宽,如果是转置表格或者是透视表的指标是行方向指定 那该配置不生效
    */
   disableColumnResize?: boolean;
+  headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
 }
 
 export interface IBasicColumnBodyDefine {

diff --git a/packages/vtable/src/ts-types/table-engine.ts b/packages/vtable/src/ts-types/table-engine.ts
@@ -152,6 +152,8 @@ export interface ListTableConstructorOptions extends BaseTableConstructorOptions
    * 排序状态
    */
   sortState?: SortState | SortState[];
+  /** 全局设置表头编辑器 */
+  headerEditor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
   /** 全局设置编辑器 */
   editor?: string | IEditor | ((args: BaseCellInfo & { table: BaseTableAPI }) => string | IEditor);
   /** 编辑触发时机 双击事件  单击事件 api手动开启编辑。默认为双击'doubleclick' */