ag-grid 设置单元格以及行的颜色「建议收藏」

ag-grid 设置单元格以及行的颜色「建议收藏」在使用ag-grid的时候有通过单元格的值设置不同行颜色,然后百度了网上的方法,汇总了一下,具体效果图如下:话不多说,直接上代码。<!doctypehtml><html><head><metacharset=”utf-8″><metaname=”viewport”content=”width=device-width,initial-scale=1,shrink…

大家好,又见面了,我是你们的朋友全栈君。

在使用ag-grid的时候有通过单元格的值设置不同行颜色,然后百度了网上的方法,汇总了一下,具体效果图如下:

 

                  ag-grid 设置单元格以及行的颜色「建议收藏」

话不多说,直接上代码。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ag-grid 列组</title>
    <script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>

</head>

<body>
    <div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine"></div>

    <script>

        var columnDefs = [
            {
                headerName: '基本信息',
                children: [
                    {
                        headerName: '班级',
                        field: 'class',
                        cellRenderer: changeCellColor


                    }, {
                        headerName: '姓名',
                        field: 'name',
                        cellRenderer: changeCellColor
                    }
                ]
            },
            {
                headerName: '分数',
                children: [
                    {
                        headerName: '总分',
                        field: 'total',
                        cellRenderer: changeCellColor

                    },
                    {
                        headerName: '语文',
                        field: 'chinese',
                        cellRenderer: changeCellColor

                    },
                    {
                        headerName: '数学',
                        field: 'math',
                        cellRenderer: changeCellColor

                    },
                    {
                        headerName: '英语',
                        field: 'english',
                        cellRenderer: changeCellColor,

                    }
                ]
            }
        ];

        var data = [
            {
                class: '一班',
                name: '王五',
                total: '260',
                chinese: '80',
                math: '90',
                english: '90'
            }, {
                class: '二班',
                name: '张三',
                total: '200',
                chinese: '70',
                math: '100',
                english: '30'
            }, {
                class: '二班',
                name: '李四',
                total: '270',
                chinese: '89',
                math: '91',
                english: '90'
            }, {
                class: '三班',
                name: '小明',
                total: '300',
                chinese: '100',
                math: '100',
                english: '100'
            }, {
                class: '三班',
                name: '小红',
                total: '265',
                chinese: '88',
                math: '90',
                english: '87'
            }, {
                class: '三班',
                name: '小华',
                total: '290',
                chinese: '100',
                math: '100',
                english: '90'
            }
        ];

        var gridOptions = {
            defaultColDef: {
                sortable: true,
                resizable: true,
                filter: true,
            },
            debug: true,
            columnDefs: columnDefs,
            rowData: data,
            // 对表格行的属性进行测试
            getRowStyle: ChangRowColor

        };

        document.addEventListener('DOMContentLoaded', function () {
            var gridDiv = document.querySelector('#myGrid');
            new agGrid.Grid(gridDiv, gridOptions);


        });

        // 渲染行的颜色
        function ChangRowColor(params) {
            if (parseInt(params.node.id) % 2 == 0) {
                return {
                    'background-color': 'Violet'     //颜色可以用英文、rgb以及十六进制
                }
            }
            else {
                return {
                    'background-color': '#00BFFF'
                }
            }
        }

        //渲染单元格属性
        function changeCellColor(params) {
            //颜色可以用英文、rgb以及十六进制
            if (params.data.class === '一班') {
                return ('<span style="color:#DC143C;font-weight:bold">' + params.value + '</span>');  //字体颜色为红色
            }
            else if (params.data.class === '二班') {
                return ('<span style="display:table; width:100%; background-color:rgb(119,136,153);">' + params.value + '</span>');//背景颜色为灰色
            }
            else if (params.value === '小红') {
                return ('<span style="Color:yellow">' + params.value + '</span>');  //渲染一个单元格颜色
            }
            else {
                return ('<span style="Color:black">' + params.value + '</span>');

            }

        }
    </script>
</body>

</html>

这个是分别通过这两个网页学习而来:

https://stackoverflow.com/questions/34200358/how-to-provide-a-background-color-for-an-entire-row-in-ag-grid-based-on-a-certai

https://blog.csdn.net/weixin_36706903/article/details/86747993

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157792.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 华为模拟器ensp怎么安装_模拟器下载手机版

    华为模拟器ensp怎么安装_模拟器下载手机版华为模拟器ENSP下载与安装教程【一】:安装环境1.Win10系统安装也可虚拟机安装【二】安装链接点击连接下载提取码:ob2v要是感觉下载慢的话可以开个会员(土豪随意)步骤1.下载后解压并安装,首先要先在安装这三个软件2.下面我们开始安装VirtualBox5.2.26并默认安装直接下一步就可以下面几步都是默认安装如图所示安装完成不想打开把运行勾去掉就行,点击完…

    2022年10月15日
  • A2W W2A A2T T2A _T() 含义以及用法

    A2W W2A A2T T2A _T() 含义以及用法A2W、W2A、A2T、T2A _T() 的含义及使用方法1、A2W和W2A在《Window核心编程》,多字节和宽字节之间转换比较麻烦的,MultiByteToWideChar函数和WideCharToMultiByte函数有足够多的参数的意义让我们去理解。那么使用ATL的一个很好的字符串的转换宏:A2W和W2A。char:8位字节类型,表示ASCII码WCHAR:16位字符类型,表示Un…

  • rsyslog详解

    rsyslog详解一、日志介绍日志概念日志是系统用来记录系统及应用程序运行时的一些相关信息的文本文件日志作用日志是为了保存相关程序的运行状态、错误信息等,为了对系统进行分析、保存历史记录以及在出现错误时发现、分析错误使用linux系统日志类型内核信息服务信息应用程序信息二、rsyslog1、rsyslog介绍rsyslog是linux系统中用来实现日志功能的服务。默认已经安装,并且自动启用。作用:主要用来采集日志,不生产日志其特性包括: 支持输出日志到各种数据库,如MySQ

  • java之二维数组的初始化

    java之二维数组的初始化二维数组的格式:二维数组的内存图:二维数组的例子:

  • WPF之ListView使用WrapPanel

    WPF之ListView使用WrapPanel为了在ListView中显示Wrap样式的子项,需要设置ItemsPanel为WrapPanel,如下所示。此外,还要将ScrollViewer.HorizontalScrollBarVisibility设置为"Disabled",否则是不能Wrap的。实现的代码如下所示:           &lt;ListView ItemsSource="{BindingSource…

  • Mssql常用经典SQL语句大全完整版–详解+实例

    Mssql常用经典SQL语句大全完整版–详解+实例下列语句部分是Mssql语句,不可以在access中使用。  SQL分类:  DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE)  DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT)  DCL—数据控制语言(GRANT,REVOKE,COMMIT,ROLLBACK)  首先,简要介绍基础语句:  1、说明:创建数据库C

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号