antd-table-columndragsort v1.0.2

antd-table-columndragsort

ant-design的Table组件列拖动排序

简介

此插件适用于React，前端UI框架为Ant-Design，可实现Table组件列拖动排序，并存储在浏览器localStorage里。

安装

npm install -s antd-table-columndragsort

使用方法

1. 引用插件

import moveColumn from 'antd-table-columndragsort'

2. 仿照Form组件的Form.create方法，包裹一层moveColumn({options})。例如：

export default withRouter(connect(mapStateToProps, mapDispatchToProps, undefined, {
	withRef: true
})(moveColumn({
	columns,
	listName: 'thisPage'
})(Form.create()(MyPage))));

也可使用ES7装饰器。

options设置：

经过moveColumn包裹的组件将自带this.props.moveColumn方法。

3. 仿照Form组件的getFieldDecorator使用方法，在页面的Table组件外套一层tableFieldDecorator({options})方法。例如：

{this.props.moveColumn.tableFieldDecorator({
  render: {
    edit: (text, record, index) => {
      return (<span className="control_btn">
        {this.props.permission['update'] && <span onClick={()=>this.editUser(record)}>编辑</span>}
        {this.props.permission['delete'] && <span onClick={()=>this.deleteUser(record.id)}>删除</span>}
        </span>);
    }
  }
})(<Table
  dataSource={this.props.userList.result}
  pagination={false}
  rowKey="id"
  loading={this.props.loading}
/>)}

options设置：

你无需再在Table组件里设置columns参数。

4. 此时表格列头部即可左右拖动。