Question

我在下面的示例中实现“逐列扩展”。

/* 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>
    );
  }
}

问题：队列1.）我想在“多列”上实现扩展行。例如：

我要在3列中做成2列来扩展行。

产品编号产品名称产品价格

我想要的行为是：

1。）当用户单击“产品ID”列时，我想显示其他一些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 } />
  );
}
}

队列2。）在BSTTable组件类中，我要“ dataFormat”“字段A”列。我正在执行以下操作：

class BSTable extends React.Component {

formatter(cell, row) {
  return cell.join("<br>");
}
  render() {
    if (this.props.data) {
      return (
        <BootstrapTable data={ this.props.data }>
          <TableHeaderColumn dataField='fieldA' isKey={ true } dataFormat={this.formatter}>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>);
    }
  }
}

但是格式化未在此处应用，我收到类似“ TypeError：cell.join不是函数的错误。（在'cell.join（“中 “）'，'cell.join'未定义）”

这是怎么了？请帮助

Answer 1

react-bootstrap-table已过时，应使用react-bootstrap-table2

如果我正确理解了要求，则希望扩展行，但扩展内容应该有所不同，具体取决于单击的列/单元格。

第一-扩展行

以'Expand Management'示例为基础，我们可以看到如何在状态下使用数组控制展开的行。很简单，但是我们不能使用onExpand处理程序，因为它不依赖列。我们可以使用expanded选项：

expanded: this.state.expanded,

此数组仅包含扩展的行索引。

2nd-点击了哪一列？

示例包含'Column Event'-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行添加条件是一项容易的任务。所有展开的行都会更改列更改时的内容-仅保存最后一次单击。如果您需要单独的行行为，则将列保存在索引数组中。

逐列扩展：按多列扩展行，并根据单击的列加载不同的组件

1 个答案:

第一-扩展行

2nd-点击了哪一列？

3rd-显示适当的组件