Есть ли лучшие подходы в достижении многоколоночной группировки в заголовке UI-Grid?
Я попытался добиться группирования нескольких столбцов на уровне заголовка столбца для UI-Grid с помощью подхода, представленного ниже.
Шаги, за которыми я следовал:
Включите приведенный ниже шаблон ячейки заголовка сетки пользовательского интерфейса с другой «строкой сетки пользовательского интерфейса»:
<div class="ui-grid-header custom-ui-grid-header">
<div class="ui-grid-top-panel">
<div class="ui-grid-header-viewport">
<div class="ui-grid-header-canvas">
<div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()">
<div class="ui-grid-header-cell-row">
<div class="ui-grid-header-cell" ng-repeat="superCol in grid.options.superColDefs track by $index" col-name="{{superCol.name}}">
<div class="ui-grid-cell-contents" data-ng-bind="superCol.displayName">
</div>
</div>
</div>
<div class="ui-grid-header-cell-row">
<div class="ui-grid-header-cell ui-grid-clearfix" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell super-col-width-update col="col" render-index="$index">
</div>
</div>
</div>
</div>
</div>
<div ui-grid-menu></div>
</div>
</div>
Добавьте ссылки на ваш объект определения столбца сетки с данными Super Column:
$scope.gridOptions = {
headerTemplate: 'views/header-template.html',
superColDefs: [{
name: 'group1',
displayName: 'Group 1'
}, {
name: 'group2',
displayName: 'Group 2'
}],
columnDefs: [{
name: 'name',
displayName: 'Name',
superCol: 'group1'
}, {
name: 'title',
displayName: 'Title',
superCol: 'group1'
}, {
name: 'age',
displayName: 'Age',
superCol: 'group2'
}],
data: [{
name: 'Bob',
title: 'CEO',
age: '31'
}, {
name: 'Frank',
title: 'Lowly Developer',
age: '33'
}]
};
Вычислите ширину каждого столбца заголовка и добавьте его к ширине его суперколонки, чтобы каждая соответствующая суперячейка охватывала все дочерние ячейки. Это может быть достигнуто с помощью директивы, которая будет размещена в каждой дочерней ячейке заголовка.
Директива:
.directive('superColWidthUpdate', ['$timeout', function ($timeout) {
return {
'restrict': 'A',
'link': function (scope, element) {
var _colId = scope.col.colDef.superCol,
_el = jQuery(element);
_el.on('resize', function () {
_updateSuperColWidth();
});
var _updateSuperColWidth = function () {
$timeout(function () {
var _parentCol = jQuery('.ui-grid-header-cell[col-name="' + _colId + '"]');
var _parentWidth = _parentCol.outerWidth(),
_width = _el.outerWidth();
_parentWidth = ((_parentWidth === 1) ? 0 : _parentWidth) + _width + 'px';
_parentCol.css({
'min-width': _parentWidth,
'max-width': _parentWidth
});
}, 0);
};
_updateSuperColWidth();
}
};
}]);
В вышеупомянутом подходе решение было достигнуто путем манипулирования DOM для рендеринга новой строки заголовка и новых ячеек заголовка, которые располагаются поверх обычной строки заголовка, но в области просмотра Header.
Тем не менее, я ищу любой лучший подход, возможно, с использованием внутренних служб или директив UI-Grid. Любая помощь здесь высоко ценится!