Question

我是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

上面，总计列仅在关闭列组时显示，并且它显示项目的申请者数量。

对于申请人，我有“单元格渲染”，该单元格根据列显示值。对于总计，它显示一个数组的长度，即申请人数；对于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' }] }]

问题陈述：

1）如何将单元格内容居中。我可以水平居中工作，但不能垂直居中工作。

2）即使关闭列组，“总计”列的行高也很大。它的行高似乎等于列组已打开。我想要的是在打开列组时应该调整行高。

我在列组打开和关闭事件处理程序中尝试了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();
   }

请指导。

关于，阿贾伊

Answer 1

从您的图片看来，您使用了一个字符串作为高度。如果将高度设置为“ 40”，ag-grid将计算每个高度：第1行“ 40”，第2行“ 4040”，第3行“ 404040” ...

之前进行parseInt。

希望能为您提供帮助。

ag-grid resetRowHeights不起作用

1 个答案: