Ag-Grid编号过滤器不适用于等于选项

时间:2019-06-25 12:32:46

标签: reactjs ag-grid ag-grid-react

我很难用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;

0 个答案:

没有答案