angularjs – 在UI-Grid标题中实现多列分组的任何更好的方法?
发布时间:2020-12-17 07:13:46 所属栏目:安全 来源:网络整理
导读:我尝试使用以下方法在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
我尝试使用以下方法在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',{ 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的内部服务或指令.这里的任何帮助非常感谢! 解决方法
有一个更简单的解决方案.编写一个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 } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |