Feat/parent child selected sync

docs/assets/demo/en/table-type/list-table-tree-lazy-load.md

@@ -17,6 +17,8 @@ Basic table tree display, turn on the tree mode of a certain column, if the chil
 - children: true Set to enable tree display on a certain row of data and lazily load child node data
 - setRecordChildren(children: any[], col: number, row: number) Call this method after lazily loading child node data in a row of data and return it to the table component
 - TREE_HIERARCHY_STATE_CHANGE tree display state change events
+- cellType: 'checkbox' Turns on the checkbox. Use it with tree:true to display the checkbox in a tree format.
+- enableCheckboxCascade: true It is used globally to turn on the checkbox cascade. It must be used with cellType: 'checkbox' and tree:true to synchronize the parent and child element selections.
 
 ## Code Demo
 
@@ -184,6 +186,9 @@ const option = {
   columns: [
     {
       field: 'category',
+      // Supports checkbox tree display.
+      // To synchronize parent and child element checkboxes, be sure to configure enableCheckboxCascade: true in the option global configuration.
+      // cellType: 'checkbox',
       tree: true,
       title: 'category',
       width: 'auto',
@@ -203,6 +208,7 @@ const option = {
       sort: true
     }
   ],
+  // enableCheckboxCascade:true,
   showPin: true, //显示VTable内置冻结列图标
   widthMode: 'standard',
   allowFrozenColCount: 2,

docs/assets/demo/zh/table-type/list-table-tree-lazy-load.md

@@ -17,6 +17,8 @@ option: ListTable-columns-text#tree
 - children: true 在某一行数据上设置开启树形展示 并懒加载子节点数据
 - setRecordChildren(children: any[], col: number, row: number) 在某一行数据懒加载子节点数据后调用此方法回传到表格组件中
 - TREE_HIERARCHY_STATE_CHANGE 树形展示状态改变事件
+- cellType: 'checkbox' 开启复选框，与 tree:true 配合使用可进行复选框树形展示
+- enableCheckboxCascade: true 在全局使用，用于开启复选框级联，必须与 cellType: 'checkbox'和 tree:true 配合使用，可实现父子元素勾选同步
 
 ## 代码演示
 
@@ -184,6 +186,9 @@ const option = {
   columns: [
     {
       field: '类别',
+      // 支持checkbox复选框树形展示。
+      // 欲使父子级元素勾选同步时务必在option全局配置 enableCheckboxCascade: true。
+      // cellType: 'checkbox',
       tree: true,
       title: '类别',
       width: 'auto',
@@ -203,6 +208,7 @@ const option = {
       sort: true
     }
   ],
+  // enableCheckboxCascade:true,
   showPin: true, //显示VTable内置冻结列图标
   widthMode: 'standard',
   allowFrozenColCount: 2,

packages/vtable/examples/list/list-checkbox-tree.ts

@@ -148,7 +148,7 @@ export function createTable() {
         field: '类别',
         tree: true,
         cellType: 'checkbox',
-        enableTreeCheckbox: true,
+        // headerType: 'checkbox',
         title: '类别',
         width: 'auto',
         sort: true
@@ -185,7 +185,8 @@ export function createTable() {
     defaultRowHeight: 32,
     select: {
       disableDragSelect: true
-    }
+    },
+    enableCheckboxCascade: true
   };
 
   const instance = new ListTable(option);

packages/vtable/examples/list/list-tree-checkbox.ts

@@ -122,6 +122,7 @@ export function createTable() {
 
   const data = [
     {
+      // _vtable_rowSeries_number:{text: 'checked', checked: true,  disable: true },
       类别: '办公用品',
       销售额: '129.696',
       数量: '2',

packages/vtable/src/core/BaseTable.ts

@@ -281,6 +281,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
       keyboardOptions,
       eventOptions,
       rowSeriesNumber,
+      enableCheckboxCascade,
       // columnSeriesNumber,
       // disableRowHeaderColumnResize,
       columnResizeMode,
@@ -393,6 +394,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     internalProps.keyboardOptions = keyboardOptions;
     internalProps.eventOptions = eventOptions;
     internalProps.rowSeriesNumber = rowSeriesNumber;
+    internalProps.enableCheckboxCascade = enableCheckboxCascade;
     // internalProps.columnSeriesNumber = columnSeriesNumber;
 
     internalProps.columnResizeMode = resize?.columnResizeMode ?? columnResizeMode;
@@ -2390,6 +2392,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
       keyboardOptions,
       eventOptions,
       rowSeriesNumber,
+      enableCheckboxCascade,
       // columnSeriesNumber,
       // disableRowHeaderColumnResize,
       columnResizeMode,
@@ -2471,6 +2474,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
     internalProps.keyboardOptions = keyboardOptions;
     internalProps.eventOptions = eventOptions;
     internalProps.rowSeriesNumber = rowSeriesNumber;
+    internalProps.enableCheckboxCascade = enableCheckboxCascade;
     // internalProps.columnSeriesNumber = columnSeriesNumber;
 
     internalProps.columnResizeMode = resize?.columnResizeMode ?? columnResizeMode;

packages/vtable/src/event/self-event-listener/list-table/checkbox.ts

@@ -1,5 +1,5 @@
 import { isArray, isNumber } from '@visactor/vutils';
-import type { BaseTableAPI, ListTableProtected } from '../../../ts-types/base-table';
+import type { BaseTableAPI } from '../../../ts-types/base-table';
 import { setCellCheckboxStateByAttribute } from '../../../state/checkbox/checkbox';
 import type { ListTableAPI } from '../../../ts-types';
 import { HierarchyState } from '../../../ts-types';
@@ -9,7 +9,10 @@ export function bindGroupTitleCheckboxChange(table: BaseTableAPI) {
   table.on('checkbox_state_change', args => {
     const { col, row, checked, field } = args;
 
-    if (field !== '_vtable_rowSeries_number' || table.internalProps.rowSeriesNumber?.enableTreeCheckbox !== true) {
+    if (
+      !table.internalProps.layoutMap.isSeriesNumber(col, row) ||
+      table.internalProps.rowSeriesNumber?.enableTreeCheckbox !== true
+    ) {
       return;
     }
 
@@ -30,7 +33,7 @@ export function bindGroupTitleCheckboxChange(table: BaseTableAPI) {
         // 1.1 group title check
         // 1.1.1 check all children
         if (getHierarchyState(table, col, row) === HierarchyState.collapse) {
-          updateChildrenCheckboxState(true, titleIndex, table, field);
+          updateChildrenCheckboxState(true, titleIndex, table, field as string);
         } else {
           setAllChildrenCheckboxState(true, titleShowIndex, titleIndex, indexedData, table, col);
         }
@@ -40,7 +43,7 @@ export function bindGroupTitleCheckboxChange(table: BaseTableAPI) {
         // 1.2 group title uncheck
         // 1.2.1 uncheck all children
         if (getHierarchyState(table, col, row) === HierarchyState.collapse) {
-          updateChildrenCheckboxState(false, titleIndex, table, field);
+          updateChildrenCheckboxState(false, titleIndex, table, field as string);
         } else {
           setAllChildrenCheckboxState(false, titleShowIndex, titleIndex, indexedData, table, col);
         }
@@ -66,9 +69,8 @@ export function bindGroupCheckboxTreeChange(table: ListTableAPI) {
   table.on('checkbox_state_change', args => {
     const { col, row, checked, field } = args;
 
-    const isCheckboxAndTree =
-      table.internalProps.columns.some(column => column.tree && (column as any).enableTreeCheckbox) &&
-      field !== '_vtable_rowSeries_number';
+    const isCheckboxAndTree = table.internalProps.columns.some(column => column.tree);
+    table.internalProps.enableCheckboxCascade && field !== '_vtable_rowSeries_number';
 
     if (!isCheckboxAndTree) {
       return;
@@ -200,12 +202,16 @@ function updateParentCheckboxState(
   });
   const stateArr = keys.map(key => checkedState.get(key));
 
+  // currentIndex的子元素
+  const childOfCurrentIndex = (keys as string[]).filter(item => item.startsWith(key + ',') && item !== key);
+
   stateArr.forEach((state, i) => {
     const index = keys[i] as string;
     const value = state;
+    const isChildOfCurrentIndex = childOfCurrentIndex.includes(index);
+
     if (start) {
-      const indexData = index.split(',');
-      if (indexData.length === currentIndexLength) {
+      if (!isChildOfCurrentIndex) {
         start = false;
       } else {
         result.push(value[fieldName]);

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

@@ -142,7 +142,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
             style: rowSeriesNumber.style,
             width: rowSeriesNumber.width,
             format: rowSeriesNumber.format,
-            field: '_vtable_rowSeries_number', //rowSeriesNumber.field,
+            field: rowSeriesNumber.field,
             icon: rowSeriesNumber.icon,
             headerIcon: rowSeriesNumber.headerIcon,
             isChildNode: false

packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts

@@ -1,12 +1,13 @@
 import type { IThemeSpec } from '@src/vrender';
 import { Group } from '../../graphic/group';
-import type {
-  CellInfo,
-  CellRange,
-  CheckboxColumnDefine,
-  CheckboxStyleOption,
-  ColumnIconOption,
-  SparklineSpec
+import {
+  InternalIconName,
+  type CellInfo,
+  type CellRange,
+  type CheckboxColumnDefine,
+  type CheckboxStyleOption,
+  type ColumnIconOption,
+  type SparklineSpec
 } from '../../../ts-types';
 import type { BaseTableAPI } from '../../../ts-types/base-table';
 import { isObject } from '@visactor/vutils';
@@ -20,6 +21,7 @@ import { getCellBorderStrokeWidth } from '../../utils/cell-border-stroke-width';
 import { dealWithIcon, dealWithIconLayout } from '../../utils/text-icon-layout';
 import { CheckboxContent } from '../../component/checkbox-content';
 import { CUSTOM_CONTAINER_NAME } from '../../component/custom';
+import type { ListTable } from '../../..';
 
 export function createCheckboxCellGroup(
   cellGroup: Group | null,
@@ -164,7 +166,12 @@ export function createCheckboxCellGroup(
     isCheckboxTree
   );
 
-  if (cellContentLeftIcons.length !== 0 || cellContentRightIcons.length !== 0) {
+  // 目前只支持展示折叠或者展开icons
+  if (
+    cellContentLeftIcons.length === 1 &&
+    (cellContentLeftIcons[0].name === InternalIconName.expandIconName ||
+      cellContentLeftIcons[0].name === InternalIconName.collapseIconName)
+  ) {
     const checkContent = new CheckboxContent({
       x: 0,
       y: 0,
@@ -325,6 +332,15 @@ function createCheckbox(
     isChecked = value;
     text = '';
   }
+  // 处理 rowSeriesNumbe 在record设置checkbox是否勾选与是否禁用的场景
+  if (table.internalProps.layoutMap.isSeriesNumber(col, row)) {
+    const checkboxSeriesNumberStyle = (table as ListTable).getFieldData(define.field, col, row);
+    if (checkboxSeriesNumberStyle) {
+      isChecked = checkboxSeriesNumberStyle.checked;
+      isDisabled = checkboxSeriesNumberStyle.disable;
+      text = checkboxSeriesNumberStyle.text ?? '';
+    }
+  }
   isChecked = table.stateManager.syncCheckedState(col, row, define.field as string | number, isChecked);
   const hierarchyOffset = getHierarchyOffset(col, row, table);
   const cellStyle = table._getCellStyle(col, row) as CheckboxStyleOption; // to be fixed

packages/vtable/src/scenegraph/scenegraph.ts

@@ -76,6 +76,7 @@ import { updateReactContainer } from './layout/frozen-react';
 
 import * as registerIcons from '../icons';
 import { temporarilyUpdateSelectRectStyle } from './select/update-select-style';
+import type { CheckboxContent } from './component/checkbox-content';
 // import { contextModule } from './context/module';
 
 registerForVrender();
@@ -803,6 +804,28 @@ export class Scenegraph {
                 (node as CheckBox).setAttribute('checked', checked);
               }
             }
+            // 适配cellType: 'checkbox'与tree: true，并且开启enableTreeCheckbox: true的情况
+            if (node.name === 'checkbox-content') {
+              if (checked === 'indeterminate') {
+                ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                  'indeterminate',
+                  true
+                );
+                ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                  'checked',
+                  undefined
+                );
+              } else {
+                ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                  'indeterminate',
+                  undefined
+                );
+                ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                  'checked',
+                  checked
+                );
+              }
+            }
           });
       });
     } else {
@@ -818,6 +841,28 @@ export class Scenegraph {
               (node as CheckBox).setAttribute('checked', checked);
             }
           }
+          // 适配cellType: 'checkbox'与tree: true，并且开启enableTreeCheckbox: true的情况
+          if (node.name === 'checkbox-content') {
+            if (checked === 'indeterminate') {
+              ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                'indeterminate',
+                true
+              );
+              ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                'checked',
+                undefined
+              );
+            } else {
+              ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                'indeterminate',
+                undefined
+              );
+              ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                'checked',
+                checked
+              );
+            }
+          }
         });
       });
     }
@@ -838,6 +883,28 @@ export class Scenegraph {
                 (node as CheckBox).setAttribute('checked', checked);
               }
             }
+            // 适配cellType: 'checkbox'与tree: true，并且开启enableTreeCheckbox: true的情况
+            if (node.name === 'checkbox-content') {
+              if (checked === 'indeterminate') {
+                ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                  'indeterminate',
+                  true
+                );
+                ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                  'checked',
+                  undefined
+                );
+              } else {
+                ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                  'indeterminate',
+                  undefined
+                );
+                ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                  'checked',
+                  checked
+                );
+              }
+            }
           });
       });
     } else {
@@ -853,6 +920,28 @@ export class Scenegraph {
               (node as CheckBox).setAttribute('checked', checked);
             }
           }
+          // 适配cellType: 'checkbox'与tree: true，并且开启enableTreeCheckbox: true的情况
+          if (node.name === 'checkbox-content') {
+            if (checked === 'indeterminate') {
+              ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                'indeterminate',
+                true
+              );
+              ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                'checked',
+                undefined
+              );
+            } else {
+              ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                'indeterminate',
+                undefined
+              );
+              ((node as CheckboxContent)._checkboxGroup.getChildByName('checkbox') as CheckBox).setAttribute(
+                'checked',
+                checked
+              );
+            }
+          }
         });
       });
     }

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

@@ -132,6 +132,8 @@ export interface IBaseTableProtected {
   keyboardOptions?: TableKeyboardOptions;
   eventOptions?: TableEventOptions;
   rowSeriesNumber?: IRowSeriesNumber;
+  /** 启动复选框级联 */
+  enableCheckboxCascade?: boolean;
   columnSeriesNumber?: ColumnSeriesNumber[];
   // disableRowHeaderColumnResize?: boolean;
 
@@ -537,6 +539,8 @@ export interface BaseTableConstructorOptions {
   beforeRender?: (stage: any) => void;
   afterRender?: (stage: any) => void;
   rowSeriesNumber?: IRowSeriesNumber;
+  /** 启用复选框级联 */
+  enableCheckboxCascade?: boolean;
   // columnSeriesNumber?: ColumnSeriesNumber[];
   customCellStyle?: CustomCellStyle[];
   customCellStyleArrangement?: CustomCellStyleArrangement[];