我很难用ag-grid react的Number Type列中的Equal选项过滤。 过滤工作正常,但是当涉及到 Gold 列上的过滤时,它不能按Equal选项进行过滤。与Gt,Lt等兼容。任何帮助将不胜感激。我还搜索了与ag-grid https://github.com/ag-grid/ag-grid/issues/2277相关的GITHUB问题,但似乎没有帮助。 我正在使用
“ ag-grid-community”:“ ^ 20.2.0”, “ ag-grid-enterprise”:“ ^ 20.2.0”, “ ag-grid-react”:“ ^ 20.2.0”,
import React, {Component} from 'react';
import ReactDOM from "react-dom";
import {AgGridReact} from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
import {LicenseManager} from "ag-grid-enterprise";
LicenseManager.setLicenseKey("LICENCE_KEY_HERE");
import PartialMatchFilter from './partial_match_filter';
class App extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{
headerName: "Athlete",
field: "athlete",
width: 180
},
{
headerName: "Age",
field: "age",
width: 90
},
{
headerName: "Country",
field: "country",
width: 120
},
{
headerName: "Year",
field: "year",
width: 90
},
{
headerName: "Date",
field: "date",
width: 110
},
{
headerName: "Sport",
field: "sport",
width: 110
},
{
headerName: "Gold",
field: "gold",
width: 100,
filter: "agNumberColumnFilter"
},
{
headerName: "Silver",
field: "silver",
width: 100
},
{
headerName: "Bronze",
field: "bronze",
width: 100
},
{
headerName: "Total",
field: "total",
width: 100
}
],
defaultColDef: {
sortable: true,
resizable: true,
filter: true
},
rowData: null,
// getRowHeight: function(params) {
// return 28 * (Math.floor(params.data.latinText.length / 60) + 1);
// },
// components: { showCellRenderer: createShowCellRenderer() },
defaultColDef: {
// resizable: true,
// width: 100
checkboxSelection: this.isFirstColumn,
headerCheckboxSelection: this.isFirstColumn,
headerCheckboxSelectionFilteredOnly: true,
}
}
}
onGridReady = params => {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
const httpRequest = new XMLHttpRequest();
const updateData = data => {
// data.forEach(function(dataItem) {
// var start = Math.floor(Math.random() * (latinText.length / 2));
// var end = Math.floor(Math.random() * (latinText.length / 2) + latinText.length / 2);
// dataItem.latinText = latinText.substring(start, end);
// });
this.setState({rowData: data});
};
httpRequest.open(
"GET",
"https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
);
httpRequest.send();
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
updateData(JSON.parse(httpRequest.responseText));
}
};
};
isFirstColumn(params) {
let displayedColumns = params.columnApi.getAllDisplayedColumns();
return displayedColumns[0] === params.column;
}
onClicked() {
this.gridApi
.getFilterInstance("name")
.getFrameworkComponentInstance()
.componentMethod("Michael");
this.gridApi
.getFilterInstance("row")
.getFrameworkComponentInstance()
.componentMethod("row 1");
}
render() {
return (
<div style={{width: "100%", height: "550px"}}>
<div
id="myGrid"
style={{
height: "100%",
width: "100%"
}}
className="ag-theme-balham"
>
<AgGridReact
columnDefs={this.state.columnDefs}
defaultColDef={this.state.defaultColDef}
rowData={this.state.rowData}
getRowHeight={this.state.getRowHeight}
onGridReady={this.onGridReady}
rowMultiSelectWithClick={true}
rowSelection='multiple'
/>
</div>
</div>
);
}
}
var latinText =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut " +
"labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
"laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit " +
"in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat " +
"cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum";
ReactDOM.render(
<App />,
document.getElementById('root2')
);
// export default Table;