mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
docs: Table sorting with handle using react-sortable-hoc
This commit is contained in:
Martin Cermak
afc163
parent
4347eda0fe
commit
638a37832b
@ -1549,6 +1549,204 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/drag-sorting-handler.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<table
|
||||
style="table-layout:auto"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:30px;min-width:30px"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell drag-visible"
|
||||
>
|
||||
Sort
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell drag-visible"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Age
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Address
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
data-row-key="0"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell drag-visible"
|
||||
>
|
||||
<span
|
||||
aria-label="menu"
|
||||
class="anticon anticon-menu"
|
||||
role="img"
|
||||
style="cursor:pointer;color:#999"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="menu"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell drag-visible"
|
||||
>
|
||||
John Brown
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell drag-visible"
|
||||
>
|
||||
<span
|
||||
aria-label="menu"
|
||||
class="anticon anticon-menu"
|
||||
role="img"
|
||||
style="cursor:pointer;color:#999"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="menu"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell drag-visible"
|
||||
>
|
||||
Jim Green
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
42
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
London No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell drag-visible"
|
||||
>
|
||||
<span
|
||||
aria-label="menu"
|
||||
class="anticon anticon-menu"
|
||||
role="img"
|
||||
style="cursor:pointer;color:#999"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="menu"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell drag-visible"
|
||||
>
|
||||
Joe Black
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
Sidney No. 1 Lake Park
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
<div>
|
||||
<form
|
||||
|
||||
137
components/table/demo/drag-sorting-handler.md
Normal file
137
components/table/demo/drag-sorting-handler.md
Normal file
@ -0,0 +1,137 @@
|
||||
---
|
||||
order: 27
|
||||
title:
|
||||
en-US: Drag sorting with handler
|
||||
zh-CN: 拖拽手柄列
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
也可以使用 [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) 来实现一个拖拽操作列。
|
||||
|
||||
## en-US
|
||||
|
||||
Alternatively you can implement drag sorting with handler using [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc).
|
||||
|
||||
```jsx
|
||||
import { Table } from 'antd';
|
||||
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
|
||||
import { MenuOutlined } from '@ant-design/icons';
|
||||
import arrayMove from 'array-move';
|
||||
|
||||
const DragHandle = sortableHandle(() => (
|
||||
<MenuOutlined style={{ cursor: 'pointer', color: '#999' }} />
|
||||
));
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Sort',
|
||||
dataIndex: 'sort',
|
||||
width: 30,
|
||||
className: 'drag-visible',
|
||||
render: () => <DragHandle />,
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
className: 'drag-visible',
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
index: 0,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
index: 1,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
index: 2,
|
||||
},
|
||||
];
|
||||
|
||||
const SortableItem = sortableElement(props => <tr {...props} />);
|
||||
const SortableContainer = sortableContainer(props => <tbody {...props} />);
|
||||
const DragableBodyRow = ({ index, className, style, ...restProps }) => (
|
||||
<SortableItem index={restProps['data-row-key']} {...restProps} />
|
||||
);
|
||||
|
||||
class SortableTable extends React.Component {
|
||||
state = {
|
||||
dataSource: data,
|
||||
};
|
||||
|
||||
onSortEnd = ({ oldIndex, newIndex }) => {
|
||||
const { dataSource } = this.state;
|
||||
if (oldIndex !== newIndex) {
|
||||
const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
|
||||
console.log('Sorted items: ', newData);
|
||||
this.setState({ dataSource: newData });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const DraggableContainer = props => (
|
||||
<SortableContainer
|
||||
useDragHandle
|
||||
helperClass="row-dragging"
|
||||
onSortEnd={this.onSortEnd}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<Table
|
||||
pagination={false}
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
rowKey="index"
|
||||
components={{
|
||||
body: {
|
||||
wrapper: DraggableContainer,
|
||||
row: DragableBodyRow,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<SortableTable />, mountNode);
|
||||
```
|
||||
|
||||
```css
|
||||
.row-dragging {
|
||||
background: #fafafa;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.row-dragging td {
|
||||
padding: 16px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.row-dragging .drag-visible {
|
||||
visibility: visible;
|
||||
}
|
||||
```
|
||||
@ -171,6 +171,7 @@
|
||||
"antd-img-crop": "^3.1.1",
|
||||
"antd-pro-merge-less": "^3.0.9",
|
||||
"antd-theme-generator": "^1.2.3",
|
||||
"array-move": "^2.2.1",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"bisheng": "^1.5.3",
|
||||
@ -249,6 +250,7 @@
|
||||
"react-intl": "^4.1.1",
|
||||
"react-resizable": "^1.8.0",
|
||||
"react-router-dom": "^5.0.1",
|
||||
"react-sortable-hoc": "^1.11.0",
|
||||
"react-sticky": "^6.0.3",
|
||||
"react-test-renderer": "^16.8.6",
|
||||
"react-text-loop": "^2.3.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user