单元格背景颜色在选择特定行时不可见于ag-grid。

huangapple go评论159阅读模式
英文:

cell background color is not visible while selecting particular row on ag-grid

问题

I am currently working on agGrid.

在 ag-grid 上选择特定行时,无法看到单元格的背景颜色。

(这里行颜色会覆盖)。

请参考下面的屏幕截图:

查看图片描述

AgGrid 版本 27.2.1

如果你们找到解决方案,对我非常有帮助。

提前感谢。

在选择行时,应该能看到单元格的颜色。

英文:

I am currently working on agGrid

Unable to see cell background color when i select particular row in ag-grid

(Here row color overrides).

check below screen shot for reference

enter image description here

enter image description here

AgGrid version 27.2.1

It's very helpful for me if you guys find the solution

Thanks in advance

Here cell color should be visible when we select row

答案1

得分: 1

根据您提供的图像,看起来您需要使用cellClass来向特定列的单元格添加类名。然后,您可以使用自定义样式表文件来操作该类的背景颜色。

示例:

// 演示: https://plnkr.co/edit/1NeMKcO0m2bqjI19?open=index.jsx&preview

import 'ag-grid-community/styles/ag-theme-alpine.css'; // 如果使用 alpine 主题
import 'ag-grid-community/styles/ag-grid.css';
import './styles.css';

... 
// 提供单元格类

const columnDefs = [
    // 为每一行返回相同的类
    {
        headerName: '静态类',
        field: 'static',
        cellClass: 'my-class'
    },
    // 为每一行返回相同的类数组
    {
        headerName: '静态类数组',
        field: 'staticArray',
        cellClass: ['my-class','my-class1'],
    },
];

<AgGridReact columnDefs={columnDefs}></AgGridReact>
.ag-theme-alpine {
  --ag-selected-row-background-color: green;
}

.my-class {
  background-color: orange;
}

英文:

Based on the image you provided, it looks like you need cellClass to add a class name to cells in a specific column. Then, you can manipulate the background color of that class using a custom stylesheet file.

Example:

javascript

// Demo: https://plnkr.co/edit/1NeMKcO0m2bqjI19?open=index.jsx&amp;preview

import &#39;ag-grid-community/styles/ag-theme-alpine.css&#39;; // if using alpine theme
import &#39;ag-grid-community/styles/ag-grid.css&#39;;
import &#39;./styles.css&#39;;

... 
// Provides cell class

const columnDefs = [
    // return same class for each row
    {
        headerName: &#39;Static Class&#39;,
        field: &#39;static&#39;,
        cellClass: &#39;my-class&#39;
    },
    // return same array of classes for each row
    {
        headerName: &#39;Static Array of Classes&#39;,
        field: &#39;staticArray&#39;,
        cellClass: [&#39;my-class&#39;,&#39;my-class1&#39;],
    },
];

&lt;AgGridReact columnDefs={columnDefs}&gt;&lt;/AgGridReact&gt;

css

.ag-theme-alpine {
  --ag-selected-row-background-color: green;
}

.my-class {
  background-color: orange;
}

huangapple
  • 本文由 发表于 2023年5月6日 15:26:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76187641.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定