我尝试使用以下方法在 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>
-
使用超级列数据添加对网格的列定义对象的引用：
$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 来呈现新的标题行和新的标题单元格来实现的，这些标题行和新的标题单元格位于通常标题行的顶部，但位于标题视口内。
但是，我正在寻找更好的方法，可能是使用 UI-Grid 的内部服务或指令。非常感谢这里的任何帮助！
多列分组不是网格当前所做的事情，障碍之一是与列移动和调整大小的交互。
话虽如此，我们希望拥有它，并且看看您所做的事情，我认为您可以帮助在 ui-grid 中编写该功能。
我不完全确定列分组如何与列移动一起工作 - 也许它总是会迫使整个组移动，而不仅仅是单个列。基本上，调整大小时，组列的宽度需要等于子列的总宽度。
这基本上就是您已经完成的操作，唯一的技巧是将其适应功能结构。
如果你想在某个时候加入 gitter 频道https://gitter.im/angular-ui/ng-grid https://gitter.im/angular-ui/ng-grid你可能会发现人们会在公关方面为你提供帮助（可能 @c0bra 最适合提供帮助）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
