我一直在检查 ng-grid,并将 columnDefs 更改为对某些列使用不同的 cellTemplate。该模板不显示实际值,而是在另一个对象中查找它,以使其对最终用户更具可读性(基本上是一个外键 id,被翻译成人类可以理解的东西)。
当我在 gridOptions 中启用 showGroupPanel: true 时,您可以将一列拖到“分组”栏,结果将被分组。
当我使用我为其编辑模板的列之一执行此操作时,它不使用我的 cellTemplate,并再次显示 id。
有没有办法确保在组的标题中,我也可以使用自己的模板,而不是 ng-grid 简单地显示值?
[更新] 一些代码(简化为 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 参数作为第二个参数的过滤器(并且此过滤器也将在“聚合”视图中使用)。因此,如果您有具有不同翻译的不同列,您仍然可以使用相同的过滤器,但使用多个范围变量进行翻译。
希望这是有道理的,并帮助一些可能有同样问题的人......