angularjs - 在 UI-Grid 标题中实现多列分组的任何更好的方法？

Question

我尝试使用以下方法在 UI-Grid 的列标题级别实现多列分组。

我遵循的步骤:

包括 UI 网格的以下标题单元格模板，以及另一个“UI 网格行”:

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

计算每个标题列的宽度，并将其添加到其 super 列的宽度，以使每个相关的 super 单元格跨越其子单元格。这可以通过将放置在每个子标题单元格上的指令来实现。

指示:

.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 视口(viewport)内。

但是，我正在寻找更好的方法，可能是使用 UI-Grid 的内部服务或指令。非常感谢这里的任何帮助!

Answer 1

多列分组不是网格当前所做的事情，障碍之一是与列移动和调整大小的交互。

话虽如此，我们希望拥有它，并且看看您所做的，我认为您可以帮助在 ui-grid 中编写该功能。

我不完全确定列分组如何与列移动一起工作 - 也许它总是会迫使整个组移动，而不仅仅是单个列。基本上调整大小后，组列的宽度需要等于子列的总和。

这基本上就是您已经完成的工作，唯一的技巧就是将其放入特征结构中。

如果你想在某个时候进入 gitter channel https://gitter.im/angular-ui/ng-grid您可能会发现人们会帮助您处理 PR(可能@c0bra 最适合提供帮助)