ng-grid cellTemplate and grouping:我可以更改“分组”行的模板

时间:2013-12-10 15:31:09

标签: angularjs ng-grid celltemplate

我一直在检查ng-grid,并更改了columnDefs以对某些列使用不同的cellTemplate。此模板不会显示实际值,而是在另一个对象中查找,以使其对最终用户更具可读性(基本上是转换为人类可以理解的外键ID)。

当我在gridOptions中启用showGroupPanel:true时,您可以将一列拖动到“分组”栏,结果将被分组。

当我使用我编辑模板的其中一列时,它不使用我的cellTemplate,并再次显示id。

有没有办法确保,在组的标题中,我可以使用自己的模板,而不是简单地显示值的ng-grid?

[UPDATE] 一些代码(简化为1列只显示本质)可能使它更容易理解(任何代码错误都是拼写错误,这不是我真实代码的复制粘贴):

HTML:

<div ng-grid="gridOptions" class="gridStyle"></div>

JS:

$scope.gridOptions = { 
    data: 'data', enableSorting: true, showFilter: true, multiSelect: false,
    showGroupPanel: true,
    columnDefs: 'colDefs',
};

$scope.colDefs = [];
$scope.topicid_fkvalues = { 1: "Languages", 2: "Mathematics" };

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

$scope.colDefs.push( colDef1 );

$scope.data = [ { topicid: 1 }, { topicid: 2 }, { topicid: 1 } ]

因此,当我将此列拖到分组栏中时,我希望在goup标题中看到描述,而不仅仅是id ...

[更新2]解决方案

我认为我找到了一个很好的解决方案。

事实证明我不需要cellTemplate,只需要一个过滤器。

因此,如果您在模块上定义一个新的过滤器,就像这样:

app.filter( 
    'translateForeignKey', 
    function() {
        return  function( fk, fkValues ) {
                    return fkValues[ fk ];
                }
        ;
    }

);

您可以替换它:

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

通过以下

var colDef1 = { 'field': 'Topic' };
colDef1.cellFilter = 'translateForeignKey: topicid_fkvalues';

将使用$ scope.topicid_fkvalues参数作为第二个参数添加过滤器(此过滤器也将在'aggregate'视图中使用)。因此,如果您有不同的列具有不同的翻译,您仍然可以使用相同的过滤器,但使用多个范围变量进行翻译。

希望这是有道理的,并帮助一些可能有同样问题的人......

1 个答案:

答案 0 :(得分:0)

<强>解

我认为我找到了一个很好的解决方案。

事实证明我不需要cellTemplate,只需要一个过滤器。

因此,如果您在模块上定义一个新的过滤器,就像这样:

app.filter( 
    'translateForeignKey', 
    function() {
        return  function( fk, fkValues ) {
                    return fkValues[ fk ];
                }
        ;
    }

);

您可以替换它:

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

通过以下

var colDef1 = { 'field': 'Topic' };
colDef1.cellFilter = 'translateForeignKey: topicid_fkvalues';

将使用$ scope.topicid_fkvalues参数作为第二个参数添加过滤器(此过滤器也将在'aggregate'视图中使用)。因此,如果您有不同的列具有不同的翻译,您仍然可以使用相同的过滤器,但使用多个范围变量进行翻译。