如何在 ag-grid 中的单元格中使用和添加图标以指示该单元格是可编辑的

Posted 2023-03-28

【中文标题】如何在 ag-grid 中的单元格中使用和添加图标以指示该单元格是可编辑的

【英文标题】：How to use and add icon to a cell in ag-grid to indicate the cell is editable

【发布时间】：2019-02-27 07:48:01

【问题描述】：

我正在使用角度为 6 的 ag-grid。对于特定列，单元格应该是可编辑的。请找到下面的图片。

如何添加此图标，单击该图标可编辑单元格。

【参考方案1】：

您需要在 columnDefs 数组中的对象中使用 cellRenderer 字段。基本上，您将通常显示的内容和要显示的图标放在一个<span> 中。

something.component.ts

columnDefs = [
   /* ... */
    headerName: 'Notes', field: 'notes', editable: true, 
     cellRenderer: function(params) 
          return '<span><i class="material-icons">edit</i>' + params.value + '</span>'
      
];

【讨论】：

无法将 cellRender 指定为 html 文件而不是 component.ts？。我正在使用标记方式来定义列

【参考方案2】：

你也可以通过css类来实现

/* ---- conditional : only some cell are editable based on cell data type/field -----*/
 cellClass: function(params)  return (params.data && params.data.sale ? 'editable-grid-cell':''); ,

/* ------ if all are editable ----------*/
 cellClass: 'editable-grid-cell',

然后添加css

.editable-grid-cell::after 
    content: "\F303";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 15px;
    font-weight: 900;
    z-index: -1; /* this will set it in background so when user click onit you will get cell-click event as if user would normally click on cell */

如果您在 Angular 中使用它，那么您可能需要使用 ::ng-deep 来防止样式隔离并将样式应用于类，而不管组件级别如何。喜欢

::ng-deep ..editable-grid-cell::after  .... 

【参考方案3】：

为你的 agggrid 单元格的 cellRenderer 方法试试这个

 cellRenderer: params => 
          let eIconGui = document.createElement('span');         
            return  eIconGui.innerHTML = '<em class="material-icons">edit</em>'  + ' ' + params.data.value;          
        

【参考方案4】：

查看official demo

修改plnkr sample

代替getRenderer() function，您可以创建自定义cellRenderer 组件并将其注入gridOptions components 或frameworkComponents