Ag 网格按复杂对象分组 link

Question

由于某些要求，我需要在某些列的 ag 网格 link 中呈现。我可以使用 cellRenderer 来做到这一点，但是当使用分组时，我只能访问字符串而不是整个对象。目前我正在使用此代码进行渲染，但我也想以某种方式在 if 中渲染正确的 link 。现在我有：

function cellRenderer(params) {
  if (params.node.group) {
    return params.value;
  }

  return '<a href=' + params.value.code + '>' + params.value.name + '</a>';
}

但我想要类似的东西，但它不起作用:

function cellRenderer(params) {
  return '<a href=' + params.value.code + '>' + params.value.name + '</a>';
}

Example on Plunker

因此无法为单元格分组呈现正确的 link。有人对此有解决方案吗？

Answer 1

你好 grouping cell row grouping

您希望按以下方式配置您的代码

columnDefs:[
  {
  field: 'country',
  cellRenderer: 'agGroupCellRenderer', // key for group cell render
  cellRendererParams: {
    innerRenderer: 'myCellRenderer'
  },
  minWidth: 200,
},
{ field: 'year', minWidth: 200, },
  ],
  autoGroupColumnDef: {
    headerName: 'Group',
    minWidth: 200,
  },
  components: {
     myCellRenderer: myGroupCellRenderer(),
  },

...
// replace your getSimpleCellRenderer with the following to access your params and adjust your logic to your criteria and render to your needs

  function myGroupCellRenderer() {
    function MyGroupCellRenderer() {}
    MyGroupCellRenderer.prototype.init = function (params) {
      const {name, code} = countryValueGetter(params)
      const el = document.createElement("SPAN");
     

  if (params.node.group) {

// we have acccess to the whole object here, group by country and then check the logs
    console.log('params in If', params)
    el.innerHTML = '<a href=' + code + '>' + name + '</a>'
  }


 else {
        // and here
        console.log('params in Else', params)
        el.innerHTML = '<a href=' + code + '>' + name + '</a>'
      } 

   

  
this.eGui = el;
    };

    MyGroupCellRenderer.prototype.getGui = function () {
      return this.eGui;
    };

    return MyGroupCellRenderer;
  }

new plnkr link

Answer 2

function cellRenderer(params) {
  if (params.node.group) {
    var countryCode = params.value.substring(0, 2).toUpperCase();
    return '<a href=' + countryCode + '>' + params.value + '</a>';
  }

  return '<a href=' + params.value.code + '>' + params.value.name + '</a>';
}

在这里工作example

Answer 3

要在自动组列上呈现 HTML 内容，最简单的选择是向 autoGroupColumnDef:

提供 innerRenderer

autoGroupColumnDef: {
    minWidth: 200,
    cellRendererParams: {
      innerRenderer: cellRenderer,
    },
  }

我正在重用您定义的 cellRenderer，但它可以是任何东西。

在 cellRenderer 内部，我们可以通过获取其中一个子项来获取分组行的复杂对象，然后从那里提取复杂对象：

if (params.node.group) {
    const country = params.node.allLeafChildren[0].data.country;
    return '<a href=' + country.code + '>' + country.name + '</a>';
  }

我修改了示例以删除 valueGetter，而是修改了 HTTP 请求中的数据以具有国家/地区的复杂对象，这样我们就有了包含复杂对象的数据，这些对象将进入网格.

请看例子： https://plnkr.co/edit/H9P2tXJxdzHoV3KA

Ag 网格按复杂对象分组 link

Ag grid group by complex object link

javascript

grouping

ag-grid