时间戳

首页 > 解决方案 > 如何跳过应用到 ag-grid 组件的具体化 css 文件

javascript - 如何跳过应用到 ag-grid 组件的具体化 css 文件

问题描述

我有一个.cshtml文件，其中包含用于设置这些按钮样式的搜索/上传/下载/保存按钮，并且在同一页面中有一个用于在网格中显示上传的文件数据的文件。因此，该页面同时引用了ag-grids javascript社区版文件，即.materialize.min.cssag-gridmaterialize.min.cssag-grid-community.min.js

我想选择 ag-grid 的每一行，然后将其发送到后端进行处理。所以我启用了 ag-grids 列属性checkboxselection。但不幸的是checkbox， in ag-grid 不起作用（即无法选中复选框），因为CSS它materialize.min.css被应用于checkboxelement 而不是 ag-grids checkbox CSS。

我尝试了以下方法来解决这个问题，但没有任何帮助，

  1. 更改了我页面中 CSS 文件的顺序。
  2. 编写了一个单独的 CSS 文件并复制了与 ag-grids 复选框相关的 CSS，并!important为其每个属性添加了标签。
  3. 尝试使用 ag-gridscellclass属性。

根据我的项目结构，我不能为搜索/上传/下载/保存CSS按钮提供单独的文件，因为它是作为单独的框架编写的。

有没有办法绕过materialize.min.css文件被应用ag-grid？

标签： javascripthtmlcssmaterializeag-grid

解决方案

我最近遇到了同样的问题，受此答案的启发，以下内容对我有用。

根据上面的链接添加以下 CSS 以撤消 Materialize 格式：

[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
  opacity: 1 !important;
  position: relative !important;
  pointer-events: inherit !important;
}

[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
  display: none !important;
}

[type="checkbox"].reset-checkbox+span:not(.lever) {
  padding-left: 10px !important;
}

将以下内容添加到您的 ag-grid。这会将类添加到所有复选框。它需要在滚动事件上动态调用，因为 ag-grid 使用 DOM 虚拟化。

gridOptions.onBodyScroll = function(){
  var inputs = document.querySelectorAll(".ag-checkbox-input");
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].classList.add('reset-checkbox');   
  }
}

推荐阅读