Развернуть строку за столбцом: Развернуть строку за несколько столбцов и загрузить различные компоненты в соответствии с выбранным столбцом - PullRequest
Новая
       16

Развернуть строку за столбцом: Развернуть строку за несколько столбцов и загрузить различные компоненты в соответствии с выбранным столбцом

4 голосов
/ 27 апреля 2019

Я придерживаюсь приведенного ниже примера для реализации "развернуть строку за столбцом". 

/* eslint max-len: 0 */
import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

const products = [];

function addProducts(quantity) {
  const startId = products.length;
  for (let i = 0; i < quantity; i++) {
    const id = startId + i;
    if (i < 3) {
      products.push({
        id: id,
        name: 'Item name ' + id,
        price: 2100 + i,
        expand: [ {
          fieldA: 'test1',
          fieldB: (i + 1) * 99,
          fieldC: (i + 1) * Math.random() * 100,
          fieldD: '123eedd' + i
        }, {
          fieldA: 'test2',
          fieldB: i * 99,
          fieldC: i * Math.random() * 100,
          fieldD: '123eedd' + i
        } ]
      });
    } else {
      products.push({
        id: id,
        name: 'Item name ' + id,
        price: 2100 + i
      });
    }
  }
}
addProducts(5);

class BSTable extends React.Component {
  render() {
    if (this.props.data) {
      return (
        <BootstrapTable data={ this.props.data }>
          <TableHeaderColumn dataField='fieldA' isKey={ true }>Field A</TableHeaderColumn>
          <TableHeaderColumn dataField='fieldB'>Field B</TableHeaderColumn>
          <TableHeaderColumn dataField='fieldC'>Field C</TableHeaderColumn>
          <TableHeaderColumn dataField='fieldD'>Field D</TableHeaderColumn>
        </BootstrapTable>);
    } else {
      return (<p>?</p>);
    }
  }
}

export default class ExpandRow extends React.Component {
  constructor(props) {
    super(props);
  }

  isExpandableRow(row) {
    if (row.id < 3) return true;
    else return false;
  }

  expandComponent(row) {
    return (
      <BSTable data={ row.expand } />
    );
  }

  render() {
    const options = {
      expandRowBgColor: 'rgb(242, 255, 163)',
      expandBy: 'column'  // Currently, available value is row and column, default is row
    };
    return (
      <BootstrapTable data={ products }
        options={ options }
        expandableRow={ this.isExpandableRow }
        expandComponent={ this.expandComponent }
        search>
        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name' expandable={ false }>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='price' expandable={ false }>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

Вопросы: Я хочу реализовать расширение строки для "нескольких столбцов".Например:

Я бы сделал 2 столбца из 3 для расширения строк.

Код продукта Название продукта Цена продукта

Поведение, которое я хочу:

1.) Когда пользователь нажимает на столбец «идентификатор продукта», я хочу показать другой компонент BSTTableNew, как выше (в раскрывающейся строке), но со столбцами «поле A» и «поле B» и некоторыми другими функциями.

2.) Когда пользователь нажимает на столбец «название продукта», я хочу отобразить BSTTable (в раскрывающейся строке) примерно так же, как указано выше.

Какие изменения необходимо внести в код ниже, чтобы загрузить соответствующий класс компонентов на основев столбце, который я нажимаю, чтобы развернуть строку с дополнительными сведениями?

Мне кажется, что для загрузки других компонентов необходимо внести некоторые изменения в приведенный ниже код: 

expandComponent(row) {

if( column === "productID") { //something of this sort I want
  return (
    <BSTableNew data={ row.expand } />
  );
}

if( column === "productName") {  //something of this sort I want
  return (
    <BSTable data={ row.expand } />
  );
}
}

Как добиться выше?

1 Ответ

2 голосов
/ 11 июня 2019

react-bootstrap-table устарело, вы должны использовать react-bootstrap-table2

Если я правильно понял требования, вы хотите расширить строку, но расширенное содержимое должно отличаться, в зависимости от щелчка столбца / ячейки.

1-й - расширенные строки

На примере 'Expand Management' в качестве основы мы можем увидеть, как управлять расширенными строками, используя массив в состоянии.Это просто, но мы не можем использовать обработчик onExpand как не зависящий от столбца.Мы можем использовать параметр expanded: 

expanded: this.state.expanded,

Этот массив содержит только расширенные индексы строк.

2-й - в каком столбце щелкнули?

Примеры содержат 'СтолбецСобытие ' - onClick получает column необходимый нам параметр.Это событие должно быть определено в columns, например: 

const columns = [{
  dataField: 'id',
  text: 'Product ID',
  events: {
    onClick: (e, column, columnIndex, row, rowIndex) => {
      console.log(row, column);
      const isRowExpanded = this.state.expanded.includes( row );
      this.setState( {
        column: 'id',
        expanded: isRowExpanded ? 
          this.state.expanded.filter(x => x !== row)
          : [...this.state.expanded, row]
      });
    }
  }
}, {
  dataField: 'name',
  text: 'Product Name',
  events: {
    onClick: (e, column, columnIndex, row,     rowIndex) => {
      console.log(row, column);
      const isRowExpanded =     this.state.expanded.includes( row );
      this.setState( {
        column: 'name',
        expanded: isRowExpanded ? 
          this.state.expanded.filter(x => x !== row)
          : [...this.state.expanded, row]
      });
    }
  }
}, {
  dataField: 'price',
  text: 'Product Price'
}];

Таким образом, мы обрабатываем обе вещи - расширенную строку и последний нажатый столбец.

3rd - отображать соответствующий компонент

Нам нужна только расширенная параметризация рендерера: 

const expandRow = {
  renderer: row => {
    if (this.state.column==='id') {
      return (
        <ColumnIDClickedTable someParam={someData[row]} />
      )
    } else {
      return <ColumnNameClickedTable />
    }
  },

Это должно быть все.Добавление условия только для первых 3-х строк расширяемой является простой задачей.Все развернутые строки изменят содержимое при изменении столбца - сохраняется только последний клик.Сохраните столбец в индексированном массиве, если вам нужно поведение отдельной строки.

...