首页 > 解决方案 > 使用 AG-Grid 、 Angular 和 TypeScript 如何动态设置 Column ColSpan

问题描述

给定行数据如下:

rowData = [ 
    { field_1 : value_1_1 , field_2 : value_1_2 , colSpan : 1 } , 
    { field_1 : value_2_1 , colSpan : 2} , 
    { field_1 : value_3_1 , field_2 : value_3_2 , colSpan : 1} 
];

列定义如下:

columnDefs = [ 
    {
        header  : field_1_name , 
        field   : field_1 , 
        colSpan : getColSpan(params) 
    } , 
    {   
        header : field_2_name , 
        field  : field_2  
    } 
];

对于 getColSpan 功能,可以使用什么 TypeScript 语法来实现下面的伪代码段?:

getColSpan(params) 

    return colSpan value for each row 

生成的网格应如下所示: 在这里看截图

标签: angulartypescriptag-grid

解决方案


如演示示例Simple Column Spanning中所述,您可以使用colSpan以下功能来获得您期望的结果。

{
    header  : field_1_name, 
    field   : field_1,
    colSpan : function(params) {
      var value = params.data.field_1;
      if (value === "value_2_1") {
        return 2;
      } else {
        return 1;
      }
    }
}

推荐阅读