Question

是否有任何全局表选项返回过滤的行？忽略分页。与一个或多个textFilter匹配的所有行？

我需要在标头中显示一个值，以显示过滤数据的平均值。

我在https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html上找不到任何内容

有onDataSizeChange，但仅提供道具dataSize（行数nr），仅在不使用分页时才可用。

更新为评论中的第二个问题

class App extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);

    this.state = {
      data: [...]
      filtredData: null
    };
  };

  const factory = patchFilterFactory(filterFactory, (filteredData) => {
     this.setState({filteredData}); // causes maximum update exceeded..
  });

  render() {
    return (
      <div>
         <BootstrapTable
          keyField='id'
          striped
          hover
          bootstrap4
          data={anbuds}
          filter={factory()}
          columns={columns}/>
      </div>
    );
  }
}

Answer 1

Kinda。

您可以执行此操作的一种方法是通过提供不同的filter prop实现，并在那里获取所需的数据。

import BootstrapTable from "react-bootstrap-table-next";
import filterFactory, { textFilter } from "react-bootstrap-table2-filter";

function patchFilterFactory(filterFactory, onFilteredData) {
  return (...args) => {
    const { createContext, options } = filterFactory(...args)
    return {
      createContext: (...args) => {
        const { Provider: BaseProvider, Consumer } = createContext(...args)
        const Provider = class FilterProvider extends BaseProvider {
          componentDidUpdate() {
            onFilteredData(this.data)
          }
        }
        return { Provider, Consumer } 
      },
      options
    }
  }
}

patchFilterFactory仅位于原始过滤器提供程序和您的代码之间，使您可以获取所需的数据。

如何使用它：

function Table() {
  const columns = [
    {
      dataField: "id",
      text: "Product ID"
    },
    {
      dataField: "name",
      text: "Product Name",
      filter: textFilter({
        delay: 0
      })
    },
    {
      dataField: "price",
      text: "Product Price",
      filter: textFilter({
        delay: 0
      })
    }
  ];

  const factory = patchFilterFactory(filterFactory, (filteredData) => {
    console.log('on filter data', filteredData)
  })

  return (
      <BootstrapTable
        keyField="id"
        data={props.products}
        columns={columns}
        filter={factory()}
      />
  );
}

我同意，这远非理想，但据我估计，这可能是目前的唯一方法。

如果要更改同一组件中的状态，我建议：

  const [filteredData, setFilteredData] = React.useState([])

  const factory = patchFilterFactory(filterFactory, data => {
    setFilteredData(prevData => {
      if (JSON.stringify(prevData) !== JSON.stringify(data)) {
        return data
      }

      return prevData
    })
  })

Answer 2

我的2¢：经过一番调查（有意避免实施@federkun建议的过滤器工厂包装器），我发现我可以访问呈现表的当前过滤器上下文。

为了访问表属性，我必须添加React Ref：

class MyDataTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data
    };
    this.node = React.createRef();
  }

  ...

  render() {
    return (
      <Card>
        <CardBody>
          <BootstrapTable
            ref={n => this.node = n}
            keyField="id"
            data={this.state.data}
            ...
          />
          <Button name="click-me" onClick={() => this.handleClick()}>Click me!</Button>
        </CardBody>
      </Card>
    )
  }
}

现在，当可以使用<BootstrapTable>从代码中引用this.node时，我可以获取所有过滤的数据（无需分页）：

  // member of MyDataTable component
  handleClick() {
    console.log(this.node.filterContext.data);
  }

请注意，如果您以这种方式访问数据，则不会像在表中看到的那样对条目进行排序，因此，如果您真的想疯了，可以对数据进行过滤并按以下顺序排序这样：

  // member of MyDataTable component
  handleClick() {
    const table = this.node;
    const currentDataView =
      (table.paginationContext && table.paginationContext.props.data)
      || (table.sortContext && table.sortContext.props.data) // <- .props.data (!)
      || (table.filterContext && table.filterContext.data) // <- .data (!)
      || this.state.data; // <- fallback

    console.log(currentDataView);
  }

...但是，这变得非常疯狂。重要的是从paginationContext开始-之前已经切成页面的所有内容。您可以在此处检查如何将上下文放在一起：react-bootstrap-table2/src/contexts/index.js。

尽管如此，这种方法还是 hacky -完全避免使用公共API，拦截上下文管道，读取每一层的输入。在新版本中，情况可能会发生变化，或者这种方法可能存在我尚未发现的问题-请注意这一点。

获取过滤的数据，react-bootstrap-table2

2 个答案: