[英]react-bootstrap-table search on nested fields
Hello I'm using the react-bootstrap-table module to display some data in my page and I want to use the search function to filter the results by specific columns. 您好,我正在使用react-bootstrap-table模块在页面中显示一些数据,并且我想使用搜索功能按特定列过滤结果。 Here's a snippet of my render function:
这是我的渲染函数的代码片段:
render() {
function showOSName(cell, row) {
return cell.name;
}
function showBatteryCondition(cell, row) {
return cell.condition;
}
var selectRowProp = {
mode: "checkbox",
bgColor: "rgb(204, 230, 255)"
};
var tableOptions = {
sizePerPage: 5,
deleteText: "✗ Delete Selected",
paginationSize: 3,
clearSearch: true
};
return (
<BootstrapTable
data={this.state.data.systems}
striped={true}
hover={true}
pagination={true}
selectRow={selectRowProp}
deleteRow={true}
multiColumnSearch={true}
search={true}
ignoreSinglePage={true}
options={tableOptions}
>
<TableHeaderColumn dataField="_id" isKey={true} dataAlign="center"
dataSort={true} searchable={false}>ID</TableHeaderColumn>
<TableHeaderColumn dataField="model" dataAlign="center"
dataSort={true}>Model</TableHeaderColumn>
<TableHeaderColumn dataField="serialnumber" dataAlign="center"
searchable={false}>Serial Number</TableHeaderColumn>
<TableHeaderColumn dataField="os" dataAlign="center" dataSort={true}
dataFormat={showOSName}>OS</TableHeaderColumn>
<TableHeaderColumn dataField="battery" dataAlign="center" dataSort={true}
dataFormat={showBatteryCondition}>Battery Condition</TableHeaderColumn>
</BootstrapTable>
)
}
The OS and Battery Condition fields are nested values as in: OS和Battery Condition字段是嵌套值,如下所示:
(example data) (示例数据)
id: "ABC123"
model: "modelName"
serialnumber: "1223334444"
os: {
name: "Linux"
}
battery: {
condition: "Good"
}
I use the dataFormat attribute to show the info I need in these columns. 我使用dataFormat属性在这些列中显示所需的信息。 I also want to be able to make searches by the following columns: model, os & battery condition.
我还希望能够按以下列进行搜索:型号,操作系统和电池状态。 Everything works fine when I search by model, but whenever I try to filter by the nested fields it yields no results.
当我按模型搜索时,一切正常,但每当尝试按嵌套字段进行过滤时,都不会产生任何结果。 Can anyone help me out?
谁能帮我吗? Thank you!
谢谢!
I was able to do it by adding a filterValue attribute to each column and passing the same function I used for the dataFormat. 通过向每列添加filterValue属性并传递与dataFormat相同的函数,我能够做到这一点。
function filterFunction(cell, row) {
// just return type for filtering or searching.
return cell.type;
}
// add this attribute to TableHeaderColumn: filterValue={ filterFunction }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.