- 首页
- 其他开发
- 在 UI-Grid 标题中实现多列分组的任何更好的方法?
在 UI-Grid 标题中实现多列分组的任何更好的方法?
[英] Any better approaches in achieving multi-column grouping in UI-Grid header?
本文介绍了在 UI-Grid 标题中实现多列分组的任何更好的方法?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试使用以下方法在 UI-Grid 的列标题级别实现多列分组.
我遵循的步骤:
包括以下 UI 网格的标题单元格模板，以及另一个UI 网格行":
<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-更新 col="col" render-index="$index">
<div ui-grid-menu></div>
使用超级列数据添加对网格的列定义对象的引用:
$scope.gridOptions = {headerTemplate: 'views/header-template.html',superColDefs:[{名称: 'group1',显示名称:'组 1'}, {名称: 'group2',显示名称:'第 2 组'}],列定义:[{name: '名字',显示名称:'名称'，superCol: 'group1'}, {name: '标题',displayName: '标题',superCol: 'group1'}, {姓名年龄'，displayName: '年龄',superCol: 'group2'}],数据: [{姓名:'鲍勃',title: 'CEO',年龄:'31'}, {name: '弗兰克',title: '低级开发者',年龄:'33'}]};
计算每个标题列的宽度，并将其添加到其超级列的宽度，以使每个相关的超级单元格跨越其子单元格.这可以通过放置在每个子标题单元格上的指令来实现.
指令:
.directive('superColWidthUpdate', ['$timeout', function ($timeout) {返回 {'限制':'A'，链接":函数(范围，元素){var _colId = scope.col.colDef.superCol，_el = jQuery(元素);_el.on('resize', function () {_updateSuperColWidth();});var _updateSuperColWidth = 函数 () {$超时(函数(){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({'最小宽度':_parentWidth，'最大宽度':_parentWidth});}, 0);};_updateSuperColWidth();}};}]);
在上述方法中，解决方案是通过操纵 DOM 来呈现新的标题行和新的标题单元格，它们位于通常的标题行的顶部，但在标题视口内.
但是，我正在寻找任何更好的方法，可能是通过使用 UI-Grid 的内部服务或指令.非常感谢这里的任何帮助！
解决方案
有一个更简单的解决方案.编写一个 customTreeAggregationFn 来计算您希望包含在分组行中的行的标识:
var customTreeAggregationFn = function(aggregation, fieldValue, value, row) {//计算值的平方的平均值if (typeof(aggregation.count) === '未定义') {聚合.计数 = 0;}聚合计数++；聚合值 = 值；}
然后使用这个函数过滤掉cellTemplate中的非标题行:
<代码>{name: 'EDM ID',displayName: 'EDM ID',字段:'Entity__r.EDM_ID__c'，启用列菜单:假，customTreeAggregationFinalizerFn:函数(聚合){聚合.渲染 = 聚合.值;},cellTemplate: '<div><div class="ui-grid-cell-contents" ng-if="row.groupHeader" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div></div>',customTreeAggregationFn: customTreeAggregationFn}I've tried to achieve the multi column grouping at column header level for UI-Grid with the below approach.
Steps I've followed:
Include the below header cell template, of the UI grid, with another "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>
Add references to your column definition object of the grid with Super Column data:
$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'
}]
};
Calculate the width of each header column, and add it to its Super Column's width, to make each relevant Super cell to span across its child cells. This can be achieved with a directive that will be placed on every child header cell.
Directive:
.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 the above approach, the solution has been achieved by manipulating the DOM to render a new header row and new header cells, which sit on top of the usual header row, but within the Header viewport.
However, I am looking for any better approach, may be by using the UI-Grid's internal services or directives. Any help here is much appreciated!
解决方案
There is a much simpler solution. Write a customTreeAggregationFn that just calculates the identity of the row you wish to include in the grouping row:
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;
}
Then use this function and filter out non-header rows in the 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
}
这篇关于在 UI-Grid 标题中实现多列分组的任何更好的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
