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

Question

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

如何添加此图标，单击该图标可将其设置为可编辑状态。

Answer 1

检查official demo

修改后的plnkr sample

您可以创建自定义cellRenderer组件，而不是suite 1, street 1 [^,]*$并将其注入gridOptions getRenderer()或function

Answer 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 */

}

如果以斜角形式使用它，则可能需要使用:: ng-deep来防止样式隔离并将样式应用于类，而不考虑组件级别。喜欢

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

Answer 3

您需要在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>'
     } }
];

Answer 4

尝试此操作来处理聚集细胞的cellRenderer方法

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