feat(DataGrid): 统一表格右键菜单交互体验

- 彻底移除功能较少的行级右键菜单 ContextMenuRow,统一使用功能更丰富的单元格右键菜单
- 优化虚拟滚动模式和只读模式下的渲染,支持触发单元格右键菜单
- 菜单展示自适应:在只读或不可修改数据的场景下自动隐藏「设置为 NULL」与「填充到选中行」等编辑项
- refs #209
This commit is contained in:
Syngnat
2026-03-10 10:58:27 +08:00
parent d61d7ec39b
commit c8c0c5f20a

View File

@@ -2175,6 +2175,11 @@ const DataGrid: React.FC<DataGridProps> = ({
'data-row-key': rowKey === undefined || rowKey === null ? undefined : String(rowKey),
'data-col-name': dataIndex,
onDoubleClick: () => handleVirtualCellActivate(record, dataIndex, dataIndex),
onContextMenu: (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
showCellContextMenu(e, record, dataIndex, dataIndex);
},
};
}
return {
@@ -2204,10 +2209,24 @@ const DataGrid: React.FC<DataGridProps> = ({
</EditableCell>
);
}
if (enableVirtual) {
return (
<div
style={{ margin: -8, padding: '8px 8px 8px 8px' }}
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();
showCellContextMenu(e, record, dataIndex, dataIndex);
}}
>
{originalRenderContent}
</div>
);
}
return originalRenderContent;
}
};
}), [columns, enableInlineEditableCell, enableVirtual, handleCellSave, openCellEditor, handleVirtualCellActivate]);
}), [columns, enableInlineEditableCell, enableVirtual, handleCellSave, openCellEditor, handleVirtualCellActivate, showCellContextMenu]);
const handleAddRow = () => {
const newKey = `new-${Date.now()}`;
@@ -2746,9 +2765,9 @@ const DataGrid: React.FC<DataGridProps> = ({
handleExportSelected,
copyToClipboard,
tableName,
enableRowContextMenu: !canModifyData || enableLargeResultOptimizedEditing,
enableRowContextMenu: false,
supportsCopyInsert,
}), [handleCopyCsv, handleCopyInsert, handleCopyJson, handleExportSelected, copyToClipboard, tableName, canModifyData, enableLargeResultOptimizedEditing, supportsCopyInsert]);
}), [handleCopyCsv, handleCopyInsert, handleCopyJson, handleExportSelected, copyToClipboard, tableName, canModifyData, supportsCopyInsert]);
const cellContextMenuValue = useMemo(() => ({
showMenu: showCellContextMenu,
@@ -2764,7 +2783,7 @@ const DataGrid: React.FC<DataGridProps> = ({
const rowPropsFactory = useCallback((record: any) => ({ record } as any), []);
const totalWidth = columns.reduce((sum, col) => sum + (Number(col.width) || 200), 0) + selectionColumnWidth;
const useContextMenuRow = !canModifyData || enableLargeResultOptimizedEditing;
const useContextMenuRow = false;
const tableScrollX = useMemo(() => {
const baseWidth = Math.max(totalWidth, 1000);
if (!isMacLike || tableViewportWidth <= 0) return baseWidth;
@@ -3756,6 +3775,8 @@ const DataGrid: React.FC<DataGridProps> = ({
}}
onClick={(e) => e.stopPropagation()}
>
{canModifyData && (
<>
<div
style={{
padding: '8px 12px',
@@ -3789,6 +3810,8 @@ const DataGrid: React.FC<DataGridProps> = ({
({selectedRowKeys.length})
</div>
<div style={{ height: 1, background: darkMode ? '#303030' : '#f0f0f0', margin: '4px 0' }} />
</>
)}
{supportsCopyInsert && (
<div
style={{