Question

我正在学习农业网格以将数据显示到网格中。我刚刚从一个简单的示例开始，使用cellRenderer将简单的数据显示到单元格中。您可以检查代码here：
index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        var __basePath = '';
    </script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        span.cell1 {
            position: relative;
            float: left;
            top: 50%;
            left: 10%;
            transform: translate(50%, -50%);
        }
    </style>
    <script src="https://unpkg.com/ag-grid-community@20.2.0/dist/ag-grid-community.min.js">

    </script>
</head>

<body>

    <div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
    <script src="main.js">

    </script>
</body>

</html>

main.js：

var columnDefs = [
    {
        field: 'gold',
        cellRenderer: params => {
            return '<span class="cell1">' + params.data.gold + '</span>';
        },
        editable: true,
    },
];

var gridOptions = {
    rowHeight: 60,
    columnDefs: columnDefs,
};

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

    agGrid
        .simpleHttpRequest({
            url:
                'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json',
        })
        .then(function(data) {
            gridOptions.api.setRowData(data);
        });
});

请注意我使用的CSS：

span.cell1 {
                position: relative;
                float: left;
                top: 50%;
                left: 10%;
                transform: translate(50%, -50%);
            }

我想在单元格的中间显示数据（css：top: 50%;），所以我尝试使用上述CSS。但是在编辑后，该单元格未按预期显示。请帮忙！开始渲染：

编辑时渲染：

编辑后渲染：

Answer 1

您需要更新CSS。为height的{{1}}和line-height属性赋予您提供给span.cell1的相同数字。

rowHeight

看看更新的插件： https://next.plnkr.co/edit/4HHSANMjCpRkTdmm

编辑后Ag-grid单元显示错误的CSS格式

1 个答案: