我正在学习 ag-grid 以将数据显示到网格中。我刚刚开始使用 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。但编辑后，单元格没有按预期显示。请帮忙!
开始渲染:
在编辑时呈现:
编辑后渲染:
最佳答案
您需要更新您的 CSS。为 span.cell1 提供 height 和 line-height 属性，与您提供给 rowHeight 的数字相同。
span.cell1 {
height: 60px;
line-height: 60px;
text-align: center;
}
关于html - Ag-grid 单元格在编辑后显示错误的 css 格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55771915/