如何使用 ag-grid 禁用行？

Posted 2023-03-28

【中文标题】如何使用 ag-grid 禁用行？

【英文标题】：how to make row disabled with ag-grid?

【发布时间】：2021-01-08 11:47:48

【问题描述】：

我与 ag-grid 合作，我发现如何在文档中禁用列 (https://www.ag-grid.com/documentation-main/documentation.php) 但在阅读文档后，我从来没有发现我怎样才能让一行被禁用。

我已经尝试过editable: params => params.data.active === true. 也许我没看错或者那不存在。有人在这里有一些解决方案吗？

【问题讨论】：

editable: params => params.data.active 有效。您的代码还有其他问题。请添加minimal reproducible sample，以便其他人能够帮助您。

【参考方案1】：

TL;DR

库中没有选项可以禁用单行（基于视觉和键盘事件），我们可以禁用单行的唯一方法是对标题和后续单元格复选框使用 customCellRenderer，这允许完全控制复选框。 除此之外，还有其他三种方法可以根据值禁用 ag-grid 复选框，

1）这是使用 checkBoxSelection 参数，它会根据条件清空单元格。

checkboxSelection = function(params) 

   if (params.data.yourProperty) 
      return true;
   
   return false;

这只会禁用点击事件并相应地设置样式，

cellStyle: params => return params.data.status? 'pointer-events': 'none', opacity: '0.4'  : '';

3）这将完全禁用它，因为您可以控制输入，但您可能必须使用字符串文字，

cellRenderer: (params) => 
       if (params.value) 
          return `<input type="checkbox" checked/>`;
       
       else 
          return `<input type="checkbox" />`;
       
 

你可以使用customCellRenderer(customCellRendererParams for props)，headerCellRenderer(headerCellRendererParams for props)，它接受一个完整的 JSX 组件。

我认为这是最有帮助的，它允许您根据该列的行值选择 cellRenderer 组件。在ag-grid documentation 中对其进行了很好的描述。