找到了解决这个问题的方法，即使我很确定有更好的解决方案，请告诉我。
首先，我重写了 TableBody 网格组件，还做了一个小修复，让它在 Internet Explorer 11 即 ie11 (list._tail.array) 中正常工作。我将当前过滤的数据行索引存储在 this.rowIds 中。
TableBody: (_ref) => {
var rowIds = _ref.rowIds,
Row = _ref.Row,
style = _ref.style,
className = _ref.className;
this.rowIds = rowIds._tail.array;
var list = rowIds && rowIds.map(function (r) {
return React.createElement(Row, { key: r, griddleKey: r });
});
//ie11 felsökningsfix:
//console.log(list);
//console.log(list._tail.array);
return React.createElement(
'tbody',
{ style: style, className: className }, list._tail.array //fix för ie11! orginalkoden skickade bara in list, men krachade då i ie11.
);
}
使用本文中解释的 rowDataSelector：https://griddlegriddle.github.io/Griddle/examples/getDataFromRowIntoCell/，然后使用 rowIds 字段获取所选数据，仅在第一个行索引处。
this.rowDataSelector = (state, { griddleKey }) => {
if (griddleKey === this.rowIds[0]) {
this.selectedData = this.rowIds.map(function (id) {
return state.get('data')
.find(rowMap => rowMap.get('griddleKey') === id)
.toJSON();
});
}
return state
.get('data')
.find(rowMap => rowMap.get('griddleKey') === griddleKey)
.toJSON();
}
使用它：
exportToExcel() {
if (this.selectedData.length != 0) {
var results = this.selectedData;
Api.exportToExcelPre('/product/exporttoexcelpre/', results).then(result => {
window.location = Constants.API_URL + '/product/exporttoexcel/';
});
}
}
最终代码：
import { connect } from 'react-redux';
export default class ProductList extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
loading: true
};
}
updateProductList() {
Api.getProducts().then(products => {
this.setState({ data: products, loading: false });
});
}
componentDidMount() {
this.updateProductList();
}
componentWillReceiveProps(props) {
if (props.refreshProductList) {
this.updateProductList();
}
}
render() {
if (this.state.loading) {
return (
<div>Läser in produkter...</div>
);
}
return (
<div>
<ProductResultList products={this.state.data} />
</div>
);
}
}
class Filter extends Component {
constructor(props) {
super(props);
}
onChange(e) {
this.props.setFilter(e.target.value);
}
render() {
var imgExcelLogo = <img src={PathHelper.getCurrentPathAppend("img/excel_logo.png")} className="export-symbol" onClick={this.props.export} style={{ float: "right" }} />;
return (
<div>
<div className="row">
<div className="form-group col-md-6 label-floating is-empty">
<label class="control-label" htmlFor="search-product">Sök på valfritt fält, exempelvis produktnamn/produktkategori osv.</label>
<input className="form-control" type="text" name="search-product" id="search-product" onChange={this.onChange.bind(this)} />
</div>
<div className="col-md-6 form-group" style={{ minHeight: "35px" }}>
{imgExcelLogo}
</div>
</div>
</div>
);
}
}
export class ProductResultList extends Component {
constructor(props) {
super(props);
this.rowIds = [];
this.selectedData = [];
this.styleConfig = {
classNames: {
Row: 'row-class',
Cell: "col-md-2",
TableHeadingCell: "col-md-2 cursor",
Table: "table table-striped table-hover",
Filter: "form-control"
},
}
this.sortMethod = {
data: this.props.products,
column: "generatedId"
}
this.settings = {
// The height of the table
tableHeight: 100,
// The width of the table
tableWidth: null,
// The minimum row height
rowHeight: 10,
// The minimum column width
defaultColumnWidth: null,
// Whether or not the header should be fixed
fixedHeader: false,
// Disable pointer events while scrolling to improve performance
disablePointerEvents: false
};
this.pageProps = {
currentPage: 1,
pageSize: 1000
}
this.rowDataSelector = (state, { griddleKey }) => {
if (griddleKey === 0) {
this.selectedData = this.rowIds.map(function (id) {
return state.get('data')
.find(rowMap => rowMap.get('griddleKey') === id)
.toJSON();
});
}
return state
.get('data')
.find(rowMap => rowMap.get('griddleKey') === griddleKey)
.toJSON();
}
this.exportToExcel = this.exportToExcel.bind(this);
this.enhancedWithRowData = connect((state, props) => {
return {
// rowData will be available into MyCustomComponent
rowData: this.rowDataSelector(state, props)
};
});
}
exportToExcel() {
if (this.selectedData.length != 0) {
var results = this.selectedData;
Api.exportToExcelPre('/product/exporttoexcelpre/', results).then(result => {
window.location = Constants.API_URL + '/product/exporttoexcel/';
});
}
}
LinkComponent({ value, griddleKey, rowData }) {
return (
<Link to={PathHelper.getCurrentPath() + "product/edit/" + rowData.id}>{rowData.name}</Link>
);
}
render() {
return (
<Griddle
ref='Griddle'
styleConfig={this.styleConfig}
data={this.props.products}
pageProperties={this.pageProps}
sortProperties={this.sortProperties}
components={{
Layout: ({ Table, Filter }) => <div><Filter /><div className="table-responsive"><Table /></div></div>,
Settings: () => <span />,
SettingsContainer: () => <span />,
SettingsToggle: () => <span />,
PageDropdown: () => <span />,
NextButton: () => <span />,
Filter: (filter) => {
return <Filter products={this.props.products} export={this.exportToExcel} setFilter={filter.setFilter} />
},
TableBody: (_ref) => {
var rowIds = _ref.rowIds,
Row = _ref.Row,
style = _ref.style,
className = _ref.className;
this.rowIds = rowIds._tail.array;
var list = rowIds && rowIds.map(function (r) {
return React.createElement(Row, { key: r, griddleKey: r });
});
//ie11 felsökningsfix:
//console.log(list);
//console.log(list._tail.array);
return React.createElement(
'tbody',
{ style: style, className: className }, list._tail.array //fix för ie11! orginalkoden skickade bara in list, men krachade då i ie11.
);
}
}}
plugins={[plugins.LocalPlugin]}>
<RowDefinition>
<ColumnDefinition id="generatedId" title="Produkt-Id" />
<ColumnDefinition id="name" title="Namn" customComponent={this.enhancedWithRowData(this.LinkComponent)} />
<ColumnDefinition id="productCategoryName" title="Produktkategori" />
<ColumnDefinition id="productTypeName" title="Produkttyp" />
<ColumnDefinition id="supplierName" title="Leverantör" />
<ColumnDefinition id="toBeInspectedString" title="Besiktigas" />
</RowDefinition>
</Griddle>
);
};
}