如何在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.

< img src = https://i.stack.imgur.com/oZO1X.png alt =在此处输入图片描述>

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

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

推荐答案

您需要在以下对象中使用 cellRenderer 字段在columnDefs数组中。基本上，您采用通常会显示的内容以及要显示的图标，然后将它们都放在一个< span> 中。

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屋！