ag-grid 表头样式（颜色渲染）

最新推荐文章于 2023-10-25 15:48:22 发布

前端菜鸟来报道

最新推荐文章于 2023-10-25 15:48:22 发布

阅读量3.5k

点赞数 1

分类专栏： ag-grid 文章标签： ag-grid

本文链接：https://blog.csdn.net/WQearl/article/details/120363669

版权

ag-grid 专栏收录该内容

15 篇文章 28 订阅

订阅专栏

一整行表头渲染同一个样式：

这种比较简单，直接设置css 样式，现在还缺第二行背景颜色的设置。

具体css样式如下：

        /*  第一行表头的样式  */
        .ag-header-group-cell-with-group {
            background-color: gold;
            color: red;
        }

        /*  第二行表头的字体设置  */
        .ag-header-cell-label {
            color: blue;
            font-size: x-small;

        }

二不同字段显示不同样式：

首先来看效果图，如果是你想要的，再继续看下去：

要想达到以上图片效果，最主要是靠ag-grid 中列的一个属性：headerClass，具体实现方式如下：

1. 在定义列的时候使用headerClass属性。比如：以上表格属于多层表头的模式，所以我定义列如下：

        var columnDefs = [
            {
                headerName: "基础信息",
                headerClass: firstTitleColor,// 列头样式渲染参数
                children: [
                    { headerName: '姓名（字体更大）', field: 'name' },
                    { headerName: '性别', field: 'sex' },
                    { headerName: '年龄（字体更大）', field: 'age' },
                ]
            },
            {
                headerName: "其他信息",
                headerClass: firstTitleColor,
                children: [
                    { headerName: '籍贯', field: 'jg' },
                    { headerName: '省份', field: 'sf' },
                    { headerName: '地址', field: 'dz' },
                ]
            }
        ];

其中firstTitleColor是自己定义的一个函数，代码如下，中间的参数params用于接收列相关的属性，以便于函数内的一些判断：

        const firstTitleColor = (params) => {
            const columnName = params.colDef.headerName;

            if (columnName === "基础信息") {
                return "firstSpecialStyles"
            }
            return "firstcommonStyles"

        };

所以，如图所示，根据参数获取了列名，当列名为基础信息的时候，返回样式firstSpecialStyles，如果是其他列，则返回firstcommonStyles。

firstSpecialStyles和firstcommonStyles是自定义的css样式。样式如下：

    <style>
        /*  有两层表头时，第一层表头是基础信息时渲染的颜色  */
        .firstSpecialStyles {
            color: blueviolet;
            background-color: salmon;
        }

        /*  有两层表头时，第一层表头不是基础信息时渲染的颜色  */
        .firstcommonStyles {
            color: red;
            background-color: gold;
            font-size: larger;
        }

    </style>

利用以上代码就可以用将表头的第一行表头样式显示出来了，如图所示：

2.现在来设置第二层表头的样式，具体方法还是使用headerClass，也是根据params参数获取不同的列属性，设置不同的表头样式。只不过headerClass所放的位置，在这个页面中，我把对第二级表头的headerClass放在了defaultColDef中，这样，所有列都能调用到这个参数；

        const columnColor = (params) => {
            debugger;

            const columnName = params.colDef.headerName;

            if (columnName === "姓名（字体更大）" || columnName === "年龄（字体更大）") {
                return "secondSpecialStyles"
            }
            return "secondcommonStyles"

        };
        
        var gridOptions = {
            columnDefs: columnDefs,   
            rowData: data,   
            defaultColDef: {
                resizable: true, 
                headerClass: columnColor
            },
        };

secondSpecialStyles和secondcommonStyles同样也是css样式定义：

        /*  有两层表头时，第二层表头对应颜色的渲染  */
        .secondSpecialStyles {
            color: rgb(255, 0, 221);
            background-color: wheat;
            font-size: larger;
        }

        /*  有两层表头时，第二层表头对应颜色的渲染  */
        .secondcommonStyles {
            color: black;
            background-color: powderblue;
        }

如果只需要染渲染一列，不需要对其他列进行操作，则headerClass可以直接放到列定义里面去。

        var columnDefs = [
            {
                headerName: "基础信息",
                headerClass: firstTitleColor, // 列头样式渲染参数
                children: [
                    { headerName: '姓名（字体更大）', headerClass: columnColor, field: 'name' },
                    { headerName: '性别', field: 'sex' },
                    { headerName: '年龄（字体更大）', field: 'age' },
                ]
            },
            {
                headerName: "其他信息",
                headerClass: firstTitleColor,
                children: [
                    { headerName: '籍贯', field: 'jg' },
                    { headerName: '省份', field: 'sf' },
                    { headerName: '地址', field: 'dz' },
                ]
            }
        ];

以上所有代码如下：

<!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颜色渲染</title>

    <script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>



    <style>
        /*  第一行表头的样式  */
        /* .ag-header-group-cell-with-group {
            background-color: gold;
            color: red;
        } */

        /*  第二行表头的字体设置  */
        /* .ag-header-cell-label {
            color: blue;
            font-size: x-small;

        } */

        /*  有两层表头时，第一层表头是基础信息时渲染的颜色  */
        .firstSpecialStyles {
            color: blueviolet;
            background-color: salmon;
        }

        /*  有两层表头时，第一层表头不是基础信息时渲染的颜色  */
        .firstcommonStyles {
            color: red;
            background-color: gold;
            font-size: larger;
        }


        /*  有两层表头时，第二层表头对应颜色的渲染  */
        .secondSpecialStyles {
            color: rgb(255, 0, 221);
            background-color: wheat;
            font-size: larger;
        }

        /*  有两层表头时，第二层表头对应颜色的渲染  */
        .secondcommonStyles {
            color: black;
            background-color: powderblue;
        }
    </style>


</head>

<body>

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

    <script>

        const columnColor = (params) => {
            debugger;

            const columnName = params.colDef.headerName;

            if (columnName === "姓名（字体更大）" || columnName === "年龄（字体更大）") {
                return "secondSpecialStyles"
            }
            return "secondcommonStyles"

        };



        const firstTitleColor = (params) => {
            const columnName = params.colDef.headerName;

            if (columnName === "基础信息") {
                return "firstSpecialStyles"
            }
            return "firstcommonStyles"

        };

        // var columnDefs = [
        //     { headerName: '姓名', field: 'name', 'pinned': 'left' },
        //     { headerName: '性别', field: 'sex' },
        //     { headerName: '年龄', field: 'age' },
        //     { headerName: '籍贯', field: 'jg' },
        //     { headerName: '省份', field: 'sf' },
        //     { headerName: '地址', field: 'dz' , filter: false },
        // ];

        //定义表格列
        var columnDefs = [
            {
                headerName: "基础信息",
                headerClass: firstTitleColor, // 列头样式渲染参数
                children: [
                    { headerName: '姓名（字体更大）', field: 'name', headerClass: columnColor },
                    { headerName: '性别', field: 'sex' },
                    { headerName: '年龄（字体更大）', field: 'age' },
                ]
            },
            {
                headerName: "其他信息",
                headerClass: firstTitleColor,
                children: [
                    { headerName: '籍贯', field: 'jg' },
                    { headerName: '省份', field: 'sf' },
                    { headerName: '地址', field: 'dz' },
                ]
            }
        ];

        //与列对应的数据; 属性名对应上面的field
        var data = [
            { name: '张三', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
            { name: '李四', sex: '女', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
            { name: '王五', sex: '女', age: '20', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路31号' },
        ];

        //将列和数据赋给gridOptions 
        var gridOptions = {
            columnDefs: columnDefs,
            rowData: data,
            defaultColDef: {
                resizable: true,
                headerClass: columnColor
            },
        };

        //在dom加载完成后 初始化agGrid完成
        document.addEventListener("DOMContentLoaded", function () {
            var eGridDiv = document.querySelector('#myGrid');  //myGrid 是容器div的ID
            new agGrid.Grid(eGridDiv, gridOptions);
        });
    </script>
</body>

</html>

前端菜鸟来报道

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ag-grid 表头样式（颜色渲染）

一整行表头渲染同一个样式：这种比较简单，直接设置css 样式，现在还缺第二行背景颜色的设置。具体css样式如下： /* 第一行表头的样式 */ .ag-header-group-cell-with-group { background-color: gold; color: red; } /* 第二行表头的字体设置 */ .ag-hea...
复制链接

扫一扫