如何使用和添加图标到 ag-grid 中的单元格以指示该单元格是可编辑的 [英] How to use and add icon to a cell in ag-grid to indicate the cell is editable

问题描述

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

I am using ag-grid with angular 6. For a particular column the cell is supposed to be editable. Please find the below image.

我如何添加这个图标，点击它可以编辑单元格.

How can i add this icon, on click of which the cell is made editable.

推荐答案

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

You need to use the cellRenderer field in the objects that are in the columnDefs array. Basically, you take what would normally be displayed, and the icon you want to display and place them both in one <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>'
     } }
];

这篇关于如何使用和添加图标到 ag-grid 中的单元格以指示该单元格是可编辑的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！