115 lines
3.1 KiB
TypeScript
115 lines
3.1 KiB
TypeScript
// 使用拖拽多选功能的示例
|
||
|
||
import React, { useState } from 'react';
|
||
import { Table } from './Table';
|
||
import { Mark } from '../mock/collection';
|
||
import { TableColumn, RowSelection } from './types';
|
||
|
||
const ExampleTable: React.FC = () => {
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||
|
||
// 示例数据
|
||
const data: Mark[] = [
|
||
{
|
||
id: '1',
|
||
title: '示例标记 1',
|
||
description: '这是第一个标记的描述',
|
||
data: { content: '这是第一个标记' },
|
||
createdAt: new Date(),
|
||
updatedAt: new Date()
|
||
},
|
||
{
|
||
id: '2',
|
||
title: '示例标记 2',
|
||
description: '这是第二个标记的描述',
|
||
data: { content: '这是第二个标记' },
|
||
createdAt: new Date(),
|
||
updatedAt: new Date()
|
||
},
|
||
{
|
||
id: '3',
|
||
title: '示例标记 3',
|
||
description: '这是第三个标记的描述',
|
||
data: { content: '这是第三个标记' },
|
||
createdAt: new Date(),
|
||
updatedAt: new Date()
|
||
},
|
||
// ... 更多数据
|
||
];
|
||
|
||
// 表格列配置
|
||
const columns: TableColumn<Mark>[] = [
|
||
{
|
||
key: 'title',
|
||
title: '标题',
|
||
dataIndex: 'title',
|
||
width: 200,
|
||
sortable: true,
|
||
},
|
||
{
|
||
key: 'description',
|
||
title: '描述',
|
||
dataIndex: 'description',
|
||
width: 300,
|
||
},
|
||
{
|
||
key: 'createdAt',
|
||
title: '创建时间',
|
||
dataIndex: 'createdAt',
|
||
width: 180,
|
||
render: (value: Date) => value.toLocaleString(),
|
||
},
|
||
];
|
||
|
||
// 行选择配置，启用拖拽多选
|
||
const rowSelection: RowSelection<Mark> = {
|
||
type: 'checkbox',
|
||
selectedRowKeys,
|
||
onChange: (selectedRowKeys: React.Key[], selectedRows: Mark[]) => {
|
||
console.log('选中的行键:', selectedRowKeys);
|
||
console.log('选中的行数据:', selectedRows);
|
||
setSelectedRowKeys(selectedRowKeys);
|
||
},
|
||
dragSelection: {
|
||
enabled: true, // 启用拖拽多选
|
||
multi: true, // 支持多选
|
||
onDragStart: (startRowIndex: number) => {
|
||
console.log('开始拖拽选择，起始行索引:', startRowIndex);
|
||
},
|
||
onDragEnd: (selectedRows: Mark[]) => {
|
||
console.log('拖拽选择结束，选中的行:', selectedRows);
|
||
},
|
||
},
|
||
};
|
||
|
||
return (
|
||
<div style={{ height: '600px', padding: '20px' }}>
|
||
<h2>表格拖拽多选示例</h2>
|
||
<p>
|
||
<strong>使用说明：</strong>
|
||
<br />
|
||
• 单击复选框进行单个选择
|
||
<br />
|
||
• 在表格行上拖拽可以选择多行（避开复选框和操作按钮）
|
||
<br />
|
||
• 按住 Ctrl/Cmd 键 + 拖拽可以追加选择
|
||
<br />
|
||
• 按住 Shift 键 + 点击复选框可以进行范围选择
|
||
<br />
|
||
• 按 Ctrl/Cmd + A 可以全选
|
||
<br />
|
||
• 按 Escape 键可以取消选择或取消拖拽操作
|
||
</p>
|
||
|
||
<Table
|
||
data={data}
|
||
columns={columns}
|
||
rowSelection={rowSelection}
|
||
virtualScroll={{ rowHeight: 48 }}
|
||
loading={false}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ExampleTable; |