react-bootstrap-table

Question

我想修改 react-bootstrap-table multiColumnSearch 中的搜索以要求来自两列或更多列的数据，而不是匹配 table.

中的所有数据

示例：

ID   FAMILY     YEAR
---------------------
1   FAMILY-1    2010
2   FAMILY-1    2011
3   FAMILY-2    2010
4   FAMILY-2    2011

查询：FAMILY-1 2010

当前结果：

ID   FAMILY     YEAR
---------------------
1   FAMILY-1    2010
2   FAMILY-1    2011
3   FAMILY-2    2010

想要的结果：

ID   FAMILY     YEAR
---------------------
1   FAMILY-1    2010

当前代码：

options: Options = {
    defaultSortName: 'Id',
    defaultSortOrder: 'desc', 
    noDataText: 'Empty data',
    onRowClick: this.onRowClick.bind(this)
};
render() {
    return (
        <div>
            <BootstrapTable containerStyle={{ marginTop: '10px' }} data={this.state.tableCases} options={this.options} striped={true} hover={true} search multiColumnSearch>
                <TableHeaderColumn dataField='Id' isKey={true} dataSort={true}>Case ID</TableHeaderColumn>
                <TableHeaderColumn dataField='CompanyName' dataSort={true}>Company Name</TableHeaderColumn>
                <TableHeaderColumn dataField='Title' dataSort={true}>Title</TableHeaderColumn>
                <TableHeaderColumn dataField='Family' dataSort={true}>Family</TableHeaderColumn>
                <TableHeaderColumn dataField='ApplicationDate' dataSort={true}>Application Date</TableHeaderColumn>
            </BootstrapTable>
        </div>
    );
}

https://allenfang.github.io/react-bootstrap-table/docs.html#multiColumnSearch

更新：

感谢@FiriceNguyen，我得以解决它。向 DefinitelyTyped 添加了 strictSearch 的拉取请求，以便其他人将来可以使用它。代码：

<div>
    <BootstrapTable containerStyle={{ marginTop: '10px' }} data={this.state.tableCases} options={this.options} striped={true} hover={true} search multiColumnSearch strictSearch>
        <TableHeaderColumn dataField='Id' isKey={true} dataSort={true}>Case ID</TableHeaderColumn>
        <TableHeaderColumn dataField='CompanyName' dataSort={true}>Company Name</TableHeaderColumn>
        <TableHeaderColumn dataField='Title' dataSort={true}>Title</TableHeaderColumn>
        <TableHeaderColumn dataField='Family' dataSort={true}>Family</TableHeaderColumn>
        <TableHeaderColumn dataField='ApplicationDate' dataSort={true}>Application Date</TableHeaderColumn>
    </BootstrapTable>
</div>

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/19629

Answer 1

对于您的情况，我认为您需要一个 AND 运算符而不是应用 2/3 列。您的查询是搜索 FAMILY-1 OR 2010，因此您当前的结果是正确的。

总之，strictSearch 可以满足您的需要。搜索模式的详细信息可以参考here。在您的情况下，配置应为 strict && !multiColumn

react-bootstrap-table - multiColumnSearch - 需要来自两列的数据而不是全部匹配

react-bootstrap-table - multiColumnSearch - Require data from two columns instead of match all

javascript

typescript

reactjs