4

こんにちは、react-bootstrap-table モジュールを使用してページにデータを表示しています。検索機能を使用して、特定の列で結果をフィルター処理したいと考えています。これが私のレンダー関数のスニペットです:

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>
    )
}

OS および Battery Condition フィールドは、次のようにネストされた値です。

(サンプルデータ)

id:           "ABC123"
model:        "modelName"
serialnumber: "1223334444"
os: {
     name: "Linux"
}
battery: {
     condition: "Good"
}

これらの列に必要な情報を表示するには、dataFormat 属性を使用します。また、モデル、OS、バッテリーの状態の列で検索できるようにしたいと考えています。モデルで検索するとすべて正常に動作しますが、ネストされたフィールドでフィルタリングしようとすると、結果が得られません。誰でも私を助けることができますか？ありがとうございました！

4

1 に答える 1

5

各列に filterValue 属性を追加し、dataFormat に使用したのと同じ関数を渡すことで、これを行うことができました。

function filterFunction(cell, row) {
    // just return type for filtering or searching.
    return cell.type;
}

// add this attribute to TableHeaderColumn: filterValue={ filterFunction }
于 2016-11-02T19:54:58.217 に答える