ag-grid 右键单元格动态改变单元格样式

本文档展示了如何在ag-grid表格库中使用vue实现单元格右键菜单,并动态改变选中单元格的样式。通过监听`onCellContextMenu`事件,自定义右键菜单项并更新单元格样式。同时,文中提供了完整的代码示例,包括创建数据、定义列定义、以及单元格点击和聚焦事件处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文首发于个人站点 ag-grid 右键单元格动态改变单元格样式
笔者个人站点 秋码记录

先来看下最终实现效果:
在这里插入图片描述

你在看这篇文章的时候,那就说明你项目中已经引入了ag-grid表格库,本文是基于 vue 实现的。

<ag-grid-vue :style="{height: tableHeight,width: '100%'}" class="flex-grow-1 flex-shrink-1 ag-theme-alpine"
								 :gridOptions="gridOptions"
								 :columnDefs="columnDefs"
								 :rowData="rowData"
								 :sideBar="sideBar"
								 :animateRows="true"
								 :autoGroupColumnDef="autoGroupColumnDef"
								
								 :defaultColDef="{
									sortable: true,
									resizable: true,
									filter: true,
									minWidth: 100,
								 }"

								 
								 :groupHeaders="true"
								 :suppressRowClickSelection="true"
								 rowSelection="multiple"

								 :allowContextMenuWithControlKey="true"
								 :getContextMenuItems="getContextMenuItems"

								 @grid-ready="onReady"
								 @cell-clicked="onCellClicked"
								 @cell-context-menu="onCellContextMenu"
								 @cell-focused="onCellFocused"
					>
					</ag-grid-vue>

首先定义两个全局变量,注意放在 export default语句外边

let selectRow = null,selectColumn = null

export default {
    data(){
        return {
            gridOptions: null,
            gridapi: null,
            columnDefs: null,
            rowData: null,
            showGrid: false,
            sideBar: false,
            rowCount: null,
            autoGroupColumnDef: null,
           
        }
    },
    methods: {
        //数据是模拟   不必太在意于
         createRowData() {
                const rowData = [];

                for (let i = 0; i < 200; i++) {
                   
                    rowData.push({
                        name: '张三'+i,
                        skills: {
                            android: Math.random() < 0.4,
                            html5: Math.random() < 0.4,
                            mac: Math.random() < 0.4,
                            windows: Math.random() < 0.4,
                            css: Math.random() < 0.4
                        },
                        dob: '张三'+i,
                        address: '张三'+i,
                        years: '2020',
                        proficiency: Math.round(Math.random() * 100),
                        country: '张三'+i,
                        continent: '张三'+i,
                        language: 'zh',
                        mobile: 134884552+'i',
                        landline: '张三'+i
                    });
                }

                this.rowData = rowData;
            },
            createColumnDefs() {
                this.columnDefs = [
                    {
                        headerName: '#', minWidth: 60, width: 60, checkboxSelection: true, sortable: false,
                        suppressMenu: true, pinned: true
                    },
                    {
                        headerName: 'Employee',
                        children: [
                            {
                                headerName: "Name", field: "name", editable: true,
                                width: 150, pinned: true,
                            },
                            {
                                headerName: "Country", field: "country", width: 150,
                            },
                            {
                                headerName: "DOB",
                                field: "dob",
                                width: 120,
                                pinned: true,
                    
                                filter: 'agDateColumnFilter',
                                columnGroupShow: 'open'
                            }
                        ]
                    },
                    {
                        headerName: 'IT Skills',
                        children: [
                            {
                                headerName: "Skills",
                                width: 125,
                                sortable: false,
                            },
                            {
                                headerName: "Proficiency",
                                field: "proficiency",
                                width: 120,
                            },
                        ]
                    },
                    {
                        headerName: 'Contact',
                        children: [
                            {
                                headerName: "Mobile",
                                field: "mobile",
                                width: 150,
                                filter: 'text'
                            },
                            {
                                headerName: "Land-line",
                                field: "landline",
                                width: 150,
                                filter: 'text'
                            },
                            {headerName: "Address", field: "address", width: 500, filter: 'text'}
                        ]
                    }
                ];
            },
        onReady(params) {
            console.log('onReady');

            this.gridapi = params.api;
            this.calculateRowCount();

            this.gridapi.sizeColumnsToFit();
        },
        
        //单元格点击事件
        onCellClicked(event) {
            //selectRow = event.data
            //selectColumn = event.colDef

        },
        
        /**
        * 右键弹出菜单
        */
        onCellContextMenu(event) {

            let headerDom = document.querySelectorAll('.ag-cell')
            for (const n of headerDom) {
                n.style.backgroundColor = '#fff'
                n.style.color = '#000'
            }

            var column = event.colDef.field;


            if (event.data === selectRow && event.colDef === selectColumn) {
                //return 'col-orange'
                event.colDef.cellStyle = { 'background-color': '#f60', 'color': '#fff' };
			}

            this.gridapi.refreshCells({
                force: true,
                columns: [column],
                rowNodes: [event.node]
            });
        
        
    },
        //单元获得焦点
        onCellFocused(event) {
            let rowData = this.gridapi.getRowNode(event.rowIndex)
            selectRow = rowData.data
            selectColumn = event.column.colDef
        },
   },
    beforeMount() {
        this.gridOptions = {};
        this.gridOptions.components = {agDateInput: DateComponent};
        this.createRowData();
        this.createColumnDefs();
        this.showGrid = true;
    },
}
### 如何在 ag-GridVue 中更改单元格颜色 为了实现这一功能,可以利用 `cellClassRules` 或者通过自定义的 `cellStyle` 函数来动态设置样式。当条件满足时,这些方法会应用特定的 CSS 类或内联样式到指定的单元格上。 #### 使用 cellClassRules 方法 此方式允许基于数据值自动为某些列中的条目分配预定义好的 CSS 类名。下面是一个简单的例子: ```javascript // 定义网格选项并配置 class rules const gridOptions = { columnDefs: [ { field: 'name' }, { field: 'value', cellClassRules: { 'negative-value': function(params) { return params.value < 0; } } } ], }; ``` 在此示例中,如果某行的数据字段 `value` 小于零,则该单元格会被赋予名为 `negative-value` 的类[^1]。 #### 利用 cellStyle 实现更灵活控制 对于更加复杂的场景,比如根据多个因素决定背景色的情况,推荐采用 `cellStyle` 属性配合回调函数的方式来进行处理: ```javascript { headerName: "Value", field: "value", cellStyle: (params) => ({ backgroundColor: params.value >= 80 ? '#C6EFCE' : '#FFEB9C' }) } ``` 这段代码展示了如何根据不同范围内的数值给定不同的背景色调[^2]。 #### 结合 Vue 组件使用案例 考虑到是在 Vue 环境下工作,在组件内部初始化 Grid 并绑定事件可能看起来像这样: ```vue <template> <div id="app"> <ag-grid-vue style="width: 500px; height: 300px;" class="ag-theme-alpine" :column-defs="columnDefs" :row-data="rowData"></ag-grid-vue> </div> </template> <script> import { AgGridVue } from '@ag-grid-community/vue'; export default { name: 'App', components: { AgGridVue, }, data() { return { columnDefs: [...], // 同上面提到的一样设定 columnsDef rowData: [...] // 提供一些测试数据作为 row 数据源 }; } }; </script> ``` 上述模板片段说明了怎样在一个标准的 Vue 单文件组件里引入和配置 AG Grid[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

甄齐才

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值