我想修改 react-bootstrap-table
multiColumnSearch
中的搜索,以要求来自两列或更多列的数据,而不是匹配表中的所有数据。
示例:
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
最佳答案
就您而言,我认为您需要 AND 运算符而不是应用 2/3 列。您的查询是搜索 FAMILY-1
OR 2010
,以便您当前的结果是正确的。
无论如何,strictSearch
可以满足您的需求。您可以引用here有关搜索模式的详细信息。在您的情况下,配置应该是 strict && !multiColumn
关于javascript - react-bootstrap-table - multiColumnSearch - 需要两列中的数据而不是全部匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46098435/