Лучше подходы в достижении нескольких столбцов группирования в заголовке пользовательского интерфейса-сетки?

Я попытался достичь группирования нескольких столбцов на уровне заголовка столбца для UI-Grid с помощью нижеприведенного подхода.

Шаги, которым я следовал:

  1. Включите приведенный ниже шаблон ячейки заголовка сетки пользовательского интерфейса с другой "строкой сетки пользовательского интерфейса": 

    <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. Добавьте ссылки на объект определения столбца таблицы с данными Суперколонны: 

    $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. Вычислите ширину каждого столбца заголовка и добавьте его к ширине Суперколонны, чтобы сделать каждый соответствующая супер-клетка, чтобы охватить ее дочерние клетки. Это может быть достигнуто с помощью директивы, которая будет помещена в каждую дочернюю ячейку заголовка.

Директива: 

.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 для отображения новой строки заголовка и новых ячеек заголовка, которые находятся поверх обычной строки заголовка, но в пределах окна просмотра заголовка.

Тем не менее, я ищу любой лучший подход, возможно, используя внутренние службы UI-Grid или директивы. Любая помощь здесь очень ценится!

2 5
angularjs ng-grid

2 ответа:

Существует гораздо более простое решение. Напишите customTreeAggregationFn , который просто вычисляет идентичность строки, которую вы хотите включить в строку группировки: 

var customTreeAggregationFn = function(aggregation, fieldValue, value, row) {
    // calculates the average of the squares of the values
    if (typeof(aggregation.count) === 'undefined') {
        aggregation.count = 0;
    }
    aggregation.count++;
    aggregation.value = value;
}

Затем используйте эту функцию и отфильтруйте строки без заголовка в cellTemplate: 

{
        name: 'EDM Id',
        displayName: 'EDM Id',
        field: 'Entity__r.EDM_ID__c',
        enableColumnMenu: false,
        customTreeAggregationFinalizerFn: function(aggregation) {
            aggregation.rendered = aggregation.value;
        },
        cellTemplate: '<div><div class="ui-grid-cell-contents" ng-if="row.groupHeader" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div></div>',
        customTreeAggregationFn: customTreeAggregationFn

    }

Введите описание изображения здесь

0

Группировка по нескольким столбцам-это не то, что в настоящее время делает сетка, одним из барьеров является взаимодействие с перемещением и изменением размера столбцов.

Сказав это, мы хотели бы иметь его, и глядя на то, что вы сделали, я думаю, что вы могли бы помочь написать эту функцию в ui-grid.

Я не совсем уверен, как группировка столбцов будет работать с перемещением столбцов - возможно, это всегда заставит двигаться всю группу, а не только отдельный столбец. С изменением размера в основном столбца группы необходимо иметь ширину, равную сумме вложенных столбцов.

Это в основном то, что вы уже сделали, единственный трюк-это вписать его в структуру объекта.

Если вы хотите когда-нибудь перейти на канал Гиттера https://gitter.im/angular-ui/ng-grid вы, вероятно, найдете людей, которые помогут вам с этим пиаром (вероятно, @c0bra будет лучше всего помочь)

2