Jede bessere Ansätze bei der Erreichung multi-Spalten-Gruppierung im UI-Grid-header?

Habe ich versucht zu erreichen, der multi-Spalte Gruppierung auf die Spaltenüberschrift Ebene, für die UI-Grid mit den unten Ansatz.

Schritte, die ich verfolgt habe:

1. Gehören die unten Kopfzeile-Vorlage, UI-grid, mit einem anderen "UI-Grid-row":

   <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>

2. Fügen Sie Verweise auf Ihre Spalte definition Objekt des Gitters mit Super Spalte Daten:

   $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'
       }]
   };

3. Berechnen Sie die Breite der einzelnen header-Spalte, und fügen Sie es Ihrer Super-Spaltenbreite, um die jeweiligen Super-Zelle erstrecken sich über seinen untergeordneten Zellen. Dies kann erreicht werden, mit einer Richtlinie, die auf jedes Kind header-Zelle.

Richtlinie:

.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();
        }
    };
}]);

In den oben erwähnten Ansatz, die Lösung wurde erreicht durch die Manipulation der DOM zu Rendern eine neue Kopfzeile und einen neuen header-Zellen, die sitzen oben auf den üblichen header-Zeile, aber in der Header-Ansicht.

Jedoch, ich bin auf der Suche nach einer besseren Ansatz, kann durch die Verwendung der UI-Grid-interne Dienstleistungen oder Richtlinien. Jede Hilfe ist hier sehr willkommen!