模型列表增加选中

src/view/Manage/Model/Component/ModelTable.jsx

@@ -579,6 +579,7 @@ const ModelTable = (props) => {
     <div className={classes}>
       <DataGrid 
         style={{ blockSize: modelId?'95px':'calc(100vh - 94px - 37px - 57px - 24px)' }}
+        checkable
         columns={columns}
         rows={modelId?(subData||[]):(data||[])}
         rowExpandable={(row) => {
@@ -588,6 +589,8 @@ const ModelTable = (props) => {
           menu: onMenuRender
         }}
         expandRow={expandRow}
+        selectedRows={modelId?subSelectedRowKeys:selectedRowKeys}
+        onSelectedRowsChange={onSelectChange}
         getComparator={getComparator}
       />
       { contextHolder }

src/view/Manage/VirtualTable/test-table.tsx

 import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ContextMenu, ContextMenuTrigger } from 'react-contextmenu';
-import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SelectCellFormatter, SortColumn, SortIconProps } from 'react-data-grid';
+import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SelectCellFormatter, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid';
 import type { RowRendererProps, DataGridHandle } from 'react-data-grid';
 import classNames from 'classnames';
 
@@ -33,18 +33,17 @@ interface Props<Row> {
     id: string
     menu: (row: Row | undefined) => ReactElement
   }
+  checkable: Boolean
   gridRef?: React.RefObject<DataGridHandle>
-  ctxRef?: React.RefObject<{
-    getSelected?: () => string[]
-  }>
   // setRows?: (rows: any) => void
   expandRow?: (pid: string, row: Row) => React.ReactElement
   rowExpandable?: (row: Row) => Boolean
   getComparator?: (sortColumn: string) => (a: Row, b: Row) => number
   loadMoreRows?: (length: number) => Promise<Row[]> | undefined
+  selectedRows?: Array<any>
+  onSelectedRowsChange?: (selectedRows: Array<any>) => void
 }
 
-
 function RowRenderer<Row, SR>(id: string) {
   return (props: RowRendererProps<Row, SR>) => (
     <ContextMenuTrigger id={id} collect={() => ({ rowIdx: props.rowIdx })}>
@@ -102,52 +101,15 @@ export function getExpandingCol<Row extends RowData, SR>({ colSpan, expand, expa
   return col
 }
 
-export function getSelectCol<Row extends RowData, SR>(selectAll: () => void, checkAll: boolean) {
-  const col: Column<Row, SR> = {
-    key: 'select',
-    name: '',
-    headerRenderer({ isCellSelected }) {
-
-      return (
-        <SelectCellFormatter
-          value={checkAll}
-          onChange={selectAll}
-          isCellSelected={isCellSelected}
-        />
-      )
-    },
-    width: 80,
-    formatter({ row, onRowChange, isCellSelected }) {
-      // debug
-      // return <b>{JSON.stringify({ isCellSelected, selected: !!row.__selected__ })}</b>
-      // 选中
-      return (
-        <SelectCellFormatter
-          value={!!row.__selected__}
-          onChange={() => {
-            onRowChange({
-              ...row,
-              __selected__: !row.__selected__,
-              __action__: RowAction.Select
-            });
-          }}
-          isCellSelected={isCellSelected}
-        />
-      );
-    },
-  }
-  return col
-}
-
-
 function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: DataGridProps<Row, SR, K> & Props<Row>) {
   const {
-    gridRef, ctxRef,
+    gridRef,
     expandRow,
     rowExpandable,
     getComparator,
     loadMoreRows,
-    contextMenu, columns, rows, ...rest } = props
+    onSelectedRowsChange,
+    contextMenu, columns, rows, checkable, selectedRows, ...rest } = props
 
   const rowKeyGetter = (row: Row): K => {
     return row.id as K;
@@ -200,28 +162,35 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
 
   // 组装功能s列
   const cols = useMemo(() => {
-    if (expandRow) {
+    if (expandRow && checkable) {
+      const cols: readonly Column<Row, SR>[] = [
+        getExpandingCol<Row, SR>({
+          colSpan: () => cols.length, expand: expandRow, expandable: rowExpandable
+        }),
+        { ...SelectColumn, key: 'select', frozen: false },
+        ...columns,
+
+      ]
+      return cols
+    } else if (expandRow) {
       const cols: readonly Column<Row, SR>[] = [
         getExpandingCol<Row, SR>({
           colSpan: () => cols.length, expand: expandRow, expandable: rowExpandable
         }),
-        getSelectCol(() => { // 全选
-          const rows = []
-          for (const row of _rows) {
-            const _row = { ...row, __selected__: !checkAll }
-            rows.push(_row)
-          }
-          _setRows(rows)
-          setCheckAll(!checkAll)
-        }, checkAll),
         ...columns,
 
       ]
       return cols
+    } else if (checkable) {
+      const cols: readonly Column<Row, SR>[] = [
+        { ...SelectColumn, key: 'select', frozen: false },
+        ...columns,
+      ]
+      return cols
     }
 
     return columns
-  }, [columns, expandRow, _rows, checkAll, setCheckAll])
+  }, [columns, expandRow, _rows, checkable, checkAll, setCheckAll])
 
 
   // 取得选中
@@ -231,12 +200,6 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
     return selected
   }, [_rows])
 
-  if (ctxRef?.current) {
-    ctxRef.current.getSelected = getSelected
-  }
-
-
-
   // 处理滚动
   const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
     if (!isAtBottom(event)) return;
@@ -284,6 +247,11 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         sortColumns={sortColumns}
         onSortColumnsChange={setSortColumns}
 
+        selectedRows={new Set(selectedRows||[])}
+        onSelectedRowsChange={(values: Set<any>) => {
+          console.log('values', values);
+          onSelectedRowsChange && onSelectedRowsChange(Array.from(values));
+        }}
         // 滚动
         onScroll={loadMoreRows ? handleScroll : undefined}
       />