Javascript 对嵌套字段进行react引导表搜索
您好,我正在使用react引导表模块在我的页面中显示一些数据,我想使用搜索功能按特定列筛选结果。下面是我的渲染函数的一个片段:Javascript 对嵌套字段进行react引导表搜索,javascript,reactjs,react-bootstrap-table,Javascript,Reactjs,React Bootstrap Table,您好,我正在使用react引导表模块在我的页面中显示一些数据,我想使用搜索功能按特定列筛选结果。下面是我的渲染函数的一个片段: render() { function showOSName(cell, row) { return cell.name; } function showBatteryCondition(cell, row) { return cell.condition; } var selectRowProp =
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>
)
}
我使用dataFormat属性在这些列中显示我需要的信息。我还希望能够通过以下列进行搜索:型号、操作系统和电池状况。当我按模型搜索时,一切都正常,但每当我尝试按嵌套字段进行筛选时,都不会产生任何结果。有人能帮我吗?谢谢大家! 我可以通过向每个列添加filterValue属性并传递用于dataFormat的相同函数来实现
function filterFunction(cell, row) {
// just return type for filtering or searching.
return cell.type;
}
// add this attribute to TableHeaderColumn: filterValue={ filterFunction }
function filterFunction(cell, row) {
// just return type for filtering or searching.
return cell.type;
}
// add this attribute to TableHeaderColumn: filterValue={ filterFunction }