【发布时间】：2019-01-21 05:19:34
【问题描述】：
我是 ag-grid 的新手，遇到了一些我似乎无法找到解决方案的问题。我希望这里的人们能够提供帮助。所以我们开始吧。
ag-grid 版本：社区版
java脚本框架：vue js
背景：
我得到了JSON数据，其结构如下
project
project_number
applicants:
First_name
Last_name
现在一个项目可以有多个申请人。在 ag-grid 我有多个列组，这样 ag-grid 看起来像
Project Applicants
Project_Number Total | First_Name | Last_Name
如上，Total 列仅在列组关闭时显示，并显示项目的申请人数。
对于申请人，我已经渲染了单元格，它根据列显示值。总而言之，它显示数组的长度，即申请人数，对于 first_name 和 last_name，它显示数组中 full_name 的连接值，并对 last_name 执行相同的操作。
代码：
colDef= [{
headerName: 'Project_Name',
field: 'Project_Name'
},
{
headerName: 'Applicants',
marryChildren: true,
children: [{
headerName: 'Total',
columnGroupShow: 'closed',
cellRenderer: fnCellRenderer,
autoHeight: true
},{
headerName: 'First_name',
columnGroupShow: 'open',
cellRenderer: fnCellRenderer,
autoHeight: true
},
{
headerName: 'Last_Name',
columnGroupShow: 'open',
cellRenderer: fnCellRenderer,
autoHeight: true
}]
}]
fnCellRenderer = function(params){
let colDef = params.colDef;
let fieldName = colDef['field'];
let cellValue = params.value;
if(fieldName === 'Total'){
return `<span ><u>${cellValue.length}</u></span>`;
}else if (cellValue.length){
let templateString = '';
for(let value of cellValue){
let fieldValue = value[fieldName];
if(fieldValue){
templateString = templateString + fieldValue + '<br/>';
}
}
return templateString
}else{
return '';
}
}
行数据：[{ 项目编号：'1'， 申请人：[{ 名字：'山姆'， 姓氏：'大坝' },{ 名字：'山姆'， 姓氏：'大坝' },{ 名字：'山姆'， 姓氏：'大坝' },{ 名字：'山姆'， 姓氏：'大坝' },{ 名字：'山姆'， 姓氏：'大坝' },{ 名字：'山姆'， 姓氏：'大坝' },{ 名字：'山姆'， 姓氏：'大坝' },{ 名字：'山姆'， 姓氏：'大坝' },{ 名字：'山姆'， 姓氏：'大坝' },{ 名字：'山姆'， 姓氏：'大坝' },{ 名字：'山姆'， 姓氏：'大坝' }] }]
问题陈述：
1) 如何使单元格内容居中。我可以让中心水平工作，但我不能垂直工作。
2) Total 列的行高很大，即使列组很接近。它的行高似乎等于列组是打开的。我想要的是当列组打开时行高应该调整。
我在列组打开和关闭事件处理程序中尝试了 api.resetRowHeights()，但它似乎不起作用。代码和图片如下。
<ag-grid-vue class="ag-theme-material grid"
:gridOptions="gridOptions"
v-bind:rowData="rowData"
enableSorting="true"
enableFilter="true"
enableColResize="true"
:columnGroupOpened="columnGroupOpened">
</ag-grid-vue>
columnGroupOpened: function(params){
this.gridOptions.api.resetRowHeights();
}
请指导。
问候， 阿杰
【问题讨论】：
标签： ag-grid