Дизайн муравьев - сворачивание развернутых строк при нажатии кнопок нумерации страниц.

Я реализую функцию расширяемой строки в таблице дизайна муравьев (Expandable Row), и он отлично работает, как указано на сайте дизайна муравьев. Но я хотел бы расширить функциональные возможности таблицы, включив сворачивание строк, когда пользователь нажимает кнопки в правом нижнем углу таблицы, которые разрешают разбиение на страницы. Это довольно простой вопрос, поэтому я не буду загромождать его размещением кода. Мы будем благодарны за любую помощь или ссылки.

ИЗМЕНИТЬ фрагмент кода

import * as React from 'react';
import { Tooltip, Table } from 'antd';
import * as IAssignmentsResponse from '../../interfaces/QC/IAssignmentResponse';
import * as moment from 'moment';


     const expandedRowRender = (rowData) => {
        const columns = [
            { title: 'Row1', dataIndex: 'Row1DataIndex', key: '1'},
            { title: 'Row2', dataIndex: 'Row2DataIndex', key: '2'},
            { title: 'Row3', dataIndex: 'Row3DataIndex', key: '3'},
        ];

        return <Table
            columns={columns}
            dataSource={rowData.DataArray}
            pagination={false}>
        </Table>
    }

    const bindRows = (row) => {
        return row.Workitem.WorkflowRefID;
    }

    const columns = [
        {
            title: 'MasterRow1',
            dataIndex: 'MasterRow1DataIndex',
            key: '1',
            render(value) { return value.WorkflowRefID; },
            onFilter: (value, record) => record.Workitem.data1.indexOf(value) === 0,
            sorter: (a, b) => a.Workitem.data1 - b.Workitem.data1
        },
        {
            title: 'MasterRow2',
            dataIndex: 'MasterRow1DataIndex',
            key: '2',
            render(value, record) { return <Tooltip title={record.data2} mouseEnterDelay={.5}>{value}</Tooltip> },
            onFilter: (value, record) => record.data2.indexOf(value) === 0,
            sorter: (a, b) => a.data2- b.data2
        },
        {
            title: 'MasterRow3',
            dataIndex: 'MasterRow1DataIndex',
            key: '3',
            render(value, record) { return <Tooltip title={record.data3} mouseEnterDelay={.5}>{value}</Tooltip> },
            onFilter: (value, record) => record.data3.indexOf(value) === 0,
            sorter: (a, b) => a.data3- b.data3
        }
    ]

    return <Table rowKey={record => bindRows(record)}
        columns={columns}
        dataSource={this.props.assignmentData.AssignmentsResponse.Assignment}
        expandedRowRender={record => expandedRowRender(record)}
        onExpand={this.onTableRowExpand}
        />

reactjs collapse antd expandable
person Ikeem Wilson    schedule 01.08.2018    source источник
comment
Это довольно простой вопрос, поэтому я не буду загромождать его размещением кода. StackOverflow не является сервисом написания кода, поэтому было бы здорово, если бы вы включили код, который вы пробовали до сих пор, чтобы вам было легче помочь вам с тем, с чем вы боретесь.   -  person Tholle    schedule 01.08.2018
comment
Это практически копирование и вставка с веб-сайта и дизайн с некоторыми изменениями имен переменных, ничего особенного. Когда я вернусь к своему компьютеру, я могу опубликовать его, если это поможет.   -  person Ikeem Wilson    schedule 01.08.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете добиться этого, используя метод expandedRowKeys API Table компонента Ant Design, который представляет собой список ключей уже развернутых строк. Пустой список означает, что все строки свернуты.

Вы можете фиксировать нажатие кнопки пагинации с помощью метода onChange, который можно использовать для вызова функции, которая устанавливает состояние вашего компонента:

class MyTable extends Component {
  constructor(props) {
    super(props);
    this.state = { currentPage: 1, expandedRows: [] };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(pagination) {
    // changes the page, collapses all rows
    this.setState({ currentPage: pagination.current, expandedRows: [] });
  }

  handleRowExpand(record) {
    // if a row is expanded, collapses it, otherwise expands it
    this.setState(prevState =>
      prevState.expandedRows.includes(record.key)
        ? {
            expandedRows: prevState.expandedRows.filter(
              key => key !== record.key
            )
          }
        : { expandedRows: [...prevState.expandedRows, record.key] }
    );
  }

  render() {
    return (
      <Table
        dataSource={YOUR_DATA}
        ...OTHER_PROPS
        pagination={{ current: this.state.currentPage }}

        // pagination buttons clicked
        onChange={this.handleChange}

        // expand + icon clicked
        onExpand={(expanded, record) => this.handleRowExpand(record)}

        // tell the 'Table' component which rows are expanded
        expandedRowKeys={this.state.expandedRows}
      />
    );
  }
}
person pmsoltani    schedule 10.10.2019