ng-grid cellTemplate и группировка: можно ли изменить шаблон для строки "группировки"
Я проверил ng-grid и изменил columnDefs для использования другого cellTemplate для определенных столбцов. Этот шаблон не показывает фактическое значение, но ищет его в другом объекте, чтобы сделать его более читаемым для конечного пользователя (в основном идентификатор внешнего ключа, который переводится в нечто, что может понять человек).
Когда я включаю showGroupPanel: true в gridOptions, вы можете перетащить один столбец на панель "Группировка", и результаты будут сгруппированы.
Когда я делаю это с одним из столбцов, для которых я отредактировал шаблон, он не использует мой cellTemplate и снова показывает идентификатор.
Есть ли способ убедиться, что в заголовке группы я также могу использовать свой собственный шаблон вместо 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 } ]
Поэтому, когда я перетаскиваю этот столбец в панель группировки, я хотел бы видеть описание также в заголовке группы, а не только идентификатор...
[ОБНОВЛЕНИЕ 2] РЕШЕНИЕ
Я думаю, что нашел хорошее решение для этого.
Оказывается, мне не нужен шаблон ячейки, просто фильтр.
Итак, если вы определяете новый фильтр в вашем модуле, что-то вроде этого:
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 (и этот фильтр также будет использоваться в представлении "агрегат"). Поэтому, если у вас есть разные столбцы с разными переводами, вы все равно можете использовать один и тот же фильтр, но использовать несколько переменных области видимости для перевода.
Надеюсь, что это имеет смысл, и помогает некоторым людям, которые могут иметь тот же вопрос...
1 ответ
РЕШЕНИЕ
Я думаю, что нашел хорошее решение для этого.
Оказывается, мне не нужен шаблон ячейки, просто фильтр.
Итак, если вы определяете новый фильтр в вашем модуле, что-то вроде этого:
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 (и этот фильтр также будет использоваться в представлении "агрегат"). Поэтому, если у вас есть разные столбцы с разными переводами, вы все равно можете использовать один и тот же фильтр, но использовать несколько переменных области видимости для перевода.