当单元格值是ag-grid-react中的数字时,如何将范围内的行分组?

时间:2018-12-30 13:21:35

标签: reactjs ag-grid

我正在尝试根据<50、50-69、70-100、100 +等数字范围对行进行分组,但是根据每行单元格中的值对行进行分组。

我对要启用rowGroup的列有一个自定义过滤器,我有一个单元格渲染器,可根据该值渲染单元格样式。单元格渲染器返回在网格单元格中渲染的值或html字符串。当您启用行组时,同一单元格渲染器将返回范围,即<50,50-69、70-100、100 +。但是组计数不是根据这些范围,而是根据单元格的值进行分组。

字段定义:

{
          headerName:"PH Index",
          field: "botScore",
          width: 120,
          cellStyle: { textAlign : 'center', padding: '0px 0px' },
          cellRenderer: this.scoreRenderer,
          filter: "scoreFilter", 
          enableRowGroup: true,
          enablePivot: true,
          menuTabs : ['filterMenuTab', 'generalMenuTab', 'columnsMenuTab'],
},`

CellRenderer:

scoreRenderer(params){
    let progress;
    if(typeof(params.value)== "number"){
      progress = Math.round((params.value/150)*100);
      if(params.value===0){
        return '<div style="font-size: 13px; font-weight: 600; background: #ffffff color: #000000">'+params.value+'</div>';
      }
      else if(params.value<50 && params.value>0){
        return  '<div style="font-size: 13px; font-weight: 600; background: linear-gradient(to right, red '+progress+'%, transparent '+progress+'%); color: #000">'+params.value+'</div>';
      }
      else if(params.value>49 && params.value<70){
        return '<div style="font-size: 13px; font-weight: 600; background: linear-gradient(to right, orange '+progress+'%, transparent '+progress+'%); color: '+(progress > 55? "#fff":"#000")+'">'+params.value+'</div>';
      }
      else if(params.value>69 && params.value<100){
        return '<div style="font-size: 13px; font-weight: 600; background: linear-gradient(to right, #53bd9c '+progress+'%, transparent '+progress+'%); color: '+(progress > 55? "#fff":"#000")+'">'+params.value+'</div>';
      }
      else if(params.value>100){
        return '<div style="background: linear-gradient(to right, green '+progress+'%, transparent '+progress+'%); font-size: 13px; font-weight: 600; color: #fff">'+params.value+'</div>';
      }
    }
    else{
      let value = parseFloat(params.value);
      if(value<50){
        return '< 50';
      }
      else if(value>49 && value<70){
        return  '50 - 69';
      }
      else if(value>69 && value<101){
        return '70 - 100';
      }
      else if(value>100)
        return '100+';
    }
  }

AgGridReact组件使用:

`

<AgGridReact
  enableFilter = { true }
  enableSorting = { true }
  enableColResize = { true }
  onGridReady = { this.onGridReady.bind(this) }
  onFilterChanged = {this.filterChanged.bind(this)}
  frameworkComponents = {this.state.frameworkComponents}
  columnDefs = { this.state.columnDefs }
  rowData    = { this.state.rowDefs }
/>`

例如。

第1行-值11 第2列-值30 第3行-值55 第4行-值110 第5行-值135

因此,如果您按照上述范围将这些行分组,则应该得到此

<50(2), 50-100(1), 100+(2)

但是我得到了这个输出

<50(1) <50(1) 50-100(1) 100+(1) 100+(1)

0 个答案:

没有答案