Question

我正在尝试根据<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）

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

0 个答案: