我们如何在上下文菜单操作中增加 ag-grid 数据的大小？答案

【问题标题】：How can we increase the fonsize of ag-grid data on context menu action?我们如何在上下文菜单操作中增加 ag-grid 数据的大小？
【发布时间】：2019-01-07 19:51:07
【问题描述】：

我正在使用 Angular 6 和 ag grid 版本 18。我想从上下文菜单中选择一个选项来增加和减少字体大小

我想要一个类似的功能。我尝试了行样式，单元样式不起作用

【问题讨论】：

请参阅How to Ask，向我们展示您到目前为止所做的事情——我们的想法是展示您所做的事情、您期望什么以及您遇到的错误。另请参阅如何创建minimal reproducible example
我想要一个类似于plnkr.co/edit/h9eTLUfY1oGbFnmAt3gy?p=preview的功能
单击上下文菜单项后，将 CSS 类添加/更新到网格元素。您可以在 CSS 中设置字体大小。
我正在尝试从操作函数返回相同的内容
this.fontSize += 1;常量自我=这个； this.grid.gridOptions.getRowStyle = function() { return { 'font-size':self.fontSize+'px' } } this.grid.api.redrawRows();它以这种方式工作。

标签： angular6 ag-grid ag-grid-ng2

【解决方案1】：

下面是列定义的样子。注意我使用变量a 来增加和减少字体大小 -

var a = 10;
var columnDefs = [
    {headerName: 'Athlete', field: 'athlete', width: 150,
      cellStyle: function(params) {
        return {fontSize: params.context.a + 'px', backgroundColor: 'green'};
    }
    },
    ..
];

如下设置对组件的引用，这将在上下文菜单回调中使用 -

var gridOptions = {
  context: this,
    ..
};

下面是单元格刷新和上下文菜单-

function refreshCells() {
   var params = {
        force: true
    };
    gridOptions.api.refreshCells(params);
    
}
function getContextMenuItems(params) {
    var result = [
        {
            // custom item
            name: 'Increase Font',
            action: function() {
                params.context.a = params.context.a + 5;
                params.context.refreshCells();
            },
            
        },
        {
            // custom item
            name: 'Decrease Font',
            action: function() {
                params.context.a = params.context.a - 5;
                params.context.refreshCells();
            },
            
        }
    ];

    return result;
}

请参阅 Plunkr - Increase/decrease font ag-grid plunkr

【讨论】：

这只是增加行的大小。我希望它也适用于标题