我试图使用这个解决方案，但它对我不起作用，它正确调整列高度，但文本没有被删除。 Ag-Grid - Row with multiline text
var gridOptions = {
columnDefs: columnDefs,
rowSelection: 'multiple',
enableColResize: true,
enableSorting: true,
enableFilter: true,
enableRangeSelection: true,
suppressRowClickSelection: true,
animateRows: true,
onModelUpdated: modelUpdated,
debug: true,
autoSizeColumns:true,
getRowHeight: function(params) {
// assuming 50 characters per line, working how how many lines we need
return 18 * (Math.floor(params.data.zaglavie.length / 45) + 1);
}
};
function createRowData() {
return gon.books;
}
我特别回应你的getRowHeight中的gridOptions场。有一个更好的方法。
ag-grid可以自动计算色谱柱的正确高度。
来自the article：
自动行高
可以基于单元格的内容设置行高。为此，请在每个应计算高度的列上设置autoHeight=true。例如，如果一列显示多行的描述文本，则您可以选择仅选择该列以确定行高。
您可以尝试这样插入多行。它对我有用。
<style>.cell-wrap {
white-space: normal !important;
}
</style><html>
<body>
<script>
//inside the function, columnDefs.
(function() {
var gridOptions = {
columnDefs = [{
headerName: "Name",
field: "yourField",
cellRenderer: 'showMultiline',
cellClass: 'cell-wrap',
autoHeight: true
}]
};
})();
function showMultiline() {}
showMultiline.prototype.init = function(params) {
//check if the field has a value
var cellBlank = !params.value;
if (cellBlank) {
return null;
}
this.ui = document.createElement('div');
this.ui.innerHTML = '<div style="font-weight: bold;">' +
params.value. {
object
} +
"<br/>" +
params.value. {
anotherobject
} +
"<br/>" +
'</div>';
};
showMultiline.prototype.getGui = function() {
return this.ui;
}
</script>
</body>
</html>我测试了Jarod Moser's answer中plnkr提供的解决方案但由于长字和不幸的空格排列而出现了一些问题。
我最后用空格分解我的字符串，并实际检查需要多少行。然而，这种解决方案并不完美，因为有些charachters占用的水平空间比其他的少。
我的单元格宽200像素，一行约35个字符。码：
gridOptions = {
// Your other stuff
getRowHeight: function (params) {
let newlines = 0;
var words = params.data.LongestString.split(' ');
let current = words[0].length;
while (current > 35) {
newlines += 1;
current = current - 35;
}
for (var i = 1; i < words.length; i++) {
let test = current + words[i].length + 1;
if (test > 35) {
newlines += 1;
current = words[i].length;
while (current > 35) {
newlines += 1;
current = current - 35;
}
}
else {
current = test;
}
}
//One line needs 27px, with a line-height of 1.5, every additional line needs 17px.
return 27 + newlines * 17;
},
};
public myColumnDefs = [
{ headerName: 'Header1', field: 'SomeProperty', width: 120 },
{
headerName: 'SomeHeader',
field: 'LongestString',
width: 200,
cellStyle: { 'white-space': 'normal', 'line-height': 1.5 } //This is important!!!
}
{ headerName: 'Header3', field: 'OtherProperty', width: 120 },
];