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)


相关推荐

  • spring 注解验证@NotNull等使用方法

    spring 注解验证@NotNull等使用方法常用标签@Null被注释的元素必须为null@NotNull被注释的元素不能为null@AssertTrue被注释的元素必须为true@AssertFalse被注释的元素必须为false@Min(value)被注释的元素必须是一个数字,其值必须大于等于指定的最小值@Max(value)被注释的元素必须是一个数字,其值必须小于等于指定的最大值@DecimalMin(

  • 【HDU】4888 Redraw Beautiful Drawings 网络流【推断解是否唯一】

    【HDU】4888 Redraw Beautiful Drawings 网络流【推断解是否唯一】

  • SharDingJDBC-5.1.1+Druid+Mybaits-P按月水平分表+读写分离,自动创表、自动刷新节点表

    SharDingJDBC-5.1.1+Druid+Mybaits-P按月水平分表+读写分离,自动创表、自动刷新节点表5.1.0的可以直接升级,此次代码比较完整,可以正常使用!SpringBoot、Mybaits-Plus、Druid解决druid启动报错的问题中文社区——————————官方网站YML自定义策略类缓存工具类,项目启动就会加载项目启动就执行…………………………………

  • Linux下的双网卡绑定bond0 em1 em2

    一、什么是bonding Linuxbonding驱动提供了一个把多个网络接口设备捆绑为单个的网络接口设置来使用,用于网络负载均衡及网络冗余 二、bonding应用方向1、网络负载均衡 对于bonding的网络负载均衡是我们在文件服务器中常用到的,比如把三块网卡,当做一块来用,解决一个IP地址,流量过大,服务器网络压力过大的问题。对于文件服务器来说,比如NFS或SAMBA文件服

  • combox数据绑定_props父子传值

    combox数据绑定_props父子传值combox可以接受dataset对象作为其数据源。所以,combox.datasource=dataset1;是可以的。 但是在WPF中,combox不支持DataSource方法。可以通过下面的方法添加数据。foreach(datarowdrindataset1.tables[0].rows){combox1.items.add(dr.items[0

    2022年10月30日
  • 数据挖掘十大算法之Apriori算法「建议收藏」

    数据挖掘十大算法之Apriori算法「建议收藏」文章目录1.“啤酒与尿布”的案例2.Aprior算法核心术语事物集记录(事务)项目(项)项目集(项集)K项集支持度(Support)置信度(Confidence)最小支持度(min_support)最小置信度(min_confidence)提升度频繁K项(目)集候选K项(目)集3.Aprior算法的三大性质(关联规则的三大性质)4.Aprior算法实现过程5.数据挖掘5.1寻找关联属性5.2生成关联规则5.3更加严谨的栗子6.Aprior算法的优缺点6.1改进Aprior算法6.2F

发表回复

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

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