如何使用 ag-grid 禁用行？

关键词：

【中文标题】如何使用 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 中对其进行了很好的描述。

【讨论】：

如何禁用 ag-grid 的右键单击/上下文菜单？

】如何禁用ag-grid的右键单击/上下文菜单？【英文标题】：HowcanIdisablerightclick/contextmenuforag-grid?【发布时间】：2019-05-1110:05:54【问题描述】：我正在使用ag-grid企业版，我想禁用上下文菜单或右键单击网格单元格，但我没有找到任... 查看详情

如何禁用 ag-grid 中的单元格选择？

】如何禁用ag-grid中的单元格选择？【英文标题】：Howtodisableselectionofcellsinag-grid?【发布时间】：2018-11-2411:57:34【问题描述】：我在Angular项目中有一个简单的ag-grid，并且想要禁用选择其中一列中的单元格。在选择过程中简单地删... 查看详情

如何在 ag-grid 中自动换行标题

】如何在ag-grid中自动换行标题【英文标题】：howtowordwrapaheaderinag-grid【发布时间】：2016-02-2622:12:57【问题描述】：使用ag-grid，有没有办法将长标题拆分为2行...columnDefsheaderName中的中断：\'Long<br/>Header\'让我走到了那里... 查看详情

无论 ag-Grid 中的 colDef 可编辑值如何，如何禁用整个网格？

】无论ag-Grid中的colDef可编辑值如何，如何禁用整个网格？【英文标题】：HowdisabledwholegridregardlessofcolDefeditablevalueinag-Grid?【发布时间】：2021-03-2210:51:17【问题描述】：您好，我想禁用ag网格。当然，我知道我可以通过在每个colDef... 查看详情

如何通过ag-grid中的角度材质菜单获取行数据

】如何通过ag-grid中的角度材质菜单获取行数据【英文标题】：Howtogetrowdatathroughangularmaterialmenuinsideag-grid【发布时间】：2016-06-1318:29:49【问题描述】：我有一个要求，在ag-grid中，我需要打开一个菜单来添加/编辑/删除该行数据。... 查看详情

如何在 ag-grid 中捕获行悬停事件？

】如何在ag-grid中捕获行悬停事件？【英文标题】：Howtocapturetherowhovereventinag-grid?【发布时间】：2020-09-0812:18:26【问题描述】：我正在浏览ag-grid的文档，看起来没有事件可以捕获网格的行悬停事件。我的要求是当用户悬停在行上... 查看详情

如何强制 ag-grid 滚动到选定/突出显示的行位置

】如何强制ag-grid滚动到选定/突出显示的行位置【英文标题】：howtoforcetheag-gridtoscrolltotheselected/highlightedrowposition【发布时间】：2018-12-2409:05:45【问题描述】：我们正在使用ag-grid，我需要根据ag-grid中选定的行位置在子窗口中显示... 查看详情

如何将菜单按钮添加到 ag-Grid 行？

】如何将菜单按钮添加到ag-Grid行？【英文标题】：Howaddmenubuttontoag-Gridrow?【发布时间】：2021-03-0101:17:00【问题描述】：我正在使用ag-GridEnterpriseVue。我在thedocs中看到了如何启用通过右键单击任何单个单元格可用的“上下文菜单”... 查看详情

在 Ag-grid 中禁用复选框选择

】在Ag-grid中禁用复选框选择【英文标题】：disablecheckboxselectioninAg-grid【发布时间】：2018-09-1818:10:57【问题描述】：是否可以通过保留一些带有某些约束的选定行来禁用复选框选择？我不想让用户取消选择渲染时选择的行。我找... 查看详情

如何使用 ag-grid 导出到具有 Angular 6 的大数据（50,000 行）的 excel 功能（内存不足错误）？

】如何使用ag-grid导出到具有Angular6的大数据（50,000行）的excel功能（内存不足错误）？【英文标题】：Howtouseag-gridExporttoexcelfunctionalitywithlargedata(50,000rows)withAngular6(OUTOFMEMORYerror)?【发布时间】：2019-07-1214:46:55【问题描述】：我目前... 查看详情

如何防止ag-grid内联单元格编辑自动修改行数据

】如何防止ag-grid内联单元格编辑自动修改行数据【英文标题】：Howtopreventag-gridinlinecelleditingfrommodifyingrowdataautomatically【发布时间】：2019-09-1217:40:09【问题描述】：AgGrid在默认情况下会在内联编辑完成时修改底层行数据。这打破... 查看详情

使用 AG-Grid，在更改值时禁用/启用同一行中的字段

】使用AG-Grid，在更改值时禁用/启用同一行中的字段【英文标题】：UsingAG-Grid,disable/enablefieldsinthesamerowwhenavalueischanged【发布时间】：2020-08-1211:47:29【问题描述】：我有一个AG-Grid，其中包含几个需要根据特定列中选择的值启用/禁... 查看详情

Ag-Grid：如何在不选择行的情况下单击行或该行的任何单元格突出显示特定行？

】Ag-Grid：如何在不选择行的情况下单击行或该行的任何单元格突出显示特定行？【英文标题】：Ag-Grid:Howtohighlightaspecificrowonclickontheroworanycellofthatrow,withoutselectingtherow?【发布时间】：2020-10-3023:34:51【问题描述】：我正在使用ag-grid... 查看详情

Ag-grid 表中实际行数

】Ag-grid表中实际行数【英文标题】：Ag-gridactualnumberofrowsintable【发布时间】：2021-02-0403:32:06【问题描述】：我在我的react项目中使用ag-grid，我开始创建自定义分页，因为我需要显示更多内容。现在它看起来像这样：顶部分页是ag-... 查看详情

如何在加载数据时隐藏 Ag-grid 中的所有行

】如何在加载数据时隐藏Ag-grid中的所有行【英文标题】：howtohideallrowsinAg-gridwhileloadingdata【发布时间】：2021-11-1323:51:31【问题描述】：我正在使用"ag-grid-angular":"^25.3.0"和"ag-grid-community":"^25.3.0"从服务... 查看详情

如何在 React AG-grid 中获取固定的行数据

】如何在ReactAG-grid中获取固定的行数据【英文标题】：howtogetpinnedrowdatainreactAG-grid【发布时间】：2018-12-2710:28:20【问题描述】：我在我的反应应用程序中使用ag-grid-react并在表格中固定了一行。我想更新固定行中的列值。怎么做？... 查看详情

使用 Javascript 隐藏或折叠 ag-grid 中的单个特定行

】使用Javascript隐藏或折叠ag-grid中的单个特定行【英文标题】：HideorCollapseasinglespecificrowinag-gridusingJavascript【发布时间】：2021-10-1914:32:56【问题描述】：在没有任何特定解决方案的情况下在SO中进行了大量搜索后，我不得不问这个... 查看详情

如何在 Ag-Grid 中将相同的相邻行与动态行跨度合并？ [关闭]

】如何在Ag-Grid中将相同的相邻行与动态行跨度合并？[关闭]【英文标题】：HowdoImergeidenticaladjacentrowswithdynamicrowspansinAg-Grid?[closed]【发布时间】：2020-07-1022:01:30【问题描述】：我见过的大多数跨行示例都涉及硬编码值。如何根据列... 查看详情