ag-grid - ag-grid resetRowHeights 不起作用

问题描述

我是 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 '';
         }
}

rowData: [{ project_number: '1', 申请人: [{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam',last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{名字：'山姆'，姓氏：'大坝'}，{名字：'山姆'，姓氏：'大坝'}] }]},{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam' , last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' }] }]},{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam' , last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' }] }]last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{名字：'sam'，姓氏：'dam' }] }]last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{名字：'sam'，姓氏：'dam' }] }]{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' }] }]{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' },{ first_name: 'sam', last_name: 'dam' }] }]}] }]}] }]

问题陈述：

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

ag-grid - ag-grid resetRowHeights 不起作用

问题描述

解决方案

推荐阅读