UI Grid Angular的标题分组

Question

I want to change my header rendering of UI-Grid AngularJS. I know it is easy to implement by just make headerTemplate but i have a situation where i need to make the grouping of headers like this

{
        name: 'Mapped By',
        enableColumnMenu: false,
        field: 'Mappedby',
        cellClass: 'intrighttextcell',
        width: 102,
        enableCellEdit: false,
        allowCellFocus: false
    },

I don't know how can i achieve this functionality in ui-grid. Here is the plunkr of ui-grid.

Answer 1

We have same kind of requirement but did'nt find any proper solution for it, so I achieved it by using some hacky way using headerCellTemplate .

See jsfiddler below or here .

 var app = angular.module('app', ['ngTouch', 'ui.grid']); app.controller('MainCtrl', ['$scope', function ($scope) { $scope.gridOptions = { columnDefs: [ { name:'firstCol', headerCellTemplate: "<div class='ui-grid-spilt-header-main'><div class='ui-grid-split-merge-header' style='width:500%'><table class='ui-grid-header-table'><tbody><tr><td colspan='2'>Grand Parent Header</td></tr><tr><td width='60%''>Parent Header</td><td>Parent Header</td></tr</tbody></table></div>Child header1</div>" }, { name:'secondCol', headerCellTemplate: "<div class='ui-grid-spilt-header-main'>Child header2</div>" }, {name:'thirdCol', headerCellTemplate: "<div class='ui-grid-spilt-header-main'>Child header1</div>", }, {name:'fourthCol', headerCellTemplate: "<div class='ui-grid-spilt-header-main'>Child header2</div>" }, {name:'fifthCol', headerCellTemplate: "<div class='ui-grid-spilt-header-main'>Child header3</div>" } ], data: [ { "firstCol": "Cox", "secondCol": "Carney", "thirdCol": "Enormo", "fourthCol": 'Radha', "fifthCol": true }, { "firstCol": "Lorraine", "secondCol": "Wise", "thirdCol": "Comveyer", "fourthCol": 'Jassi', "fifthCol": false }, { "firstCol": "Nancy", "secondCol": "Waters", "thirdCol": "Fuelton", "fourthCol": 'Lusi', "fifthCol": false } ] } }]); 

 </style> <!-- remove this, it is just for jsfiddle --> <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style>http://jsfiddle.net/user/dashboard/ .grid { width: 500px; /* height: 250px;*/ } /* CSS to define autoHeight */ .autoHeightUIGrid, .autoHeightUIGrid .ui-grid-viewport{ height: auto !important; } .ui-grid-spilt-header-main{ /* padding-top: 75px; */ /* added top padding dynamically by Js */ line-height: 30px; text-align: center; } .ui-grid-split-merge-header{ border-left: 2px solid transparent; position: absolute; background: #f3f3f3; text-align: center; line-height: 30px; z-index: 1; top: 0px; left:0px; } .ui-grid-header-table{ width:100%; padding:0px; border:none; border-spacing: 0px; border-collapse: collapse; } .ui-grid-header-table tr td{ border-bottom:1px solid #ccc; border-right:1px solid #ccc; } .ui-grid-header-table tr td:last-child{ border-right:none; } 

 <div ng-app="app"> <div ng-controller="MainCtrl"> <div id="grid1" ui-grid="gridOptions" class="grid autoHeightUIGrid"></div> </div> </div> <script> $(document).ready(function(){ $(".ui-grid-spilt-header-main").css('padding-top', $(".ui-grid-header-table").height()); }); </script> 

Answer 2

This is a open issue in GitHub #963 https://github.com/angular-ui/ui-grid/issues/963 . Its been pending since Aug 2013. Check this issue #644 https://github.com/angular-ui/ui-grid/issues/644 . They have mentioned some alternative ways.

Answer 3

 // Code goes here angular.module("temp2", ["ui.grid"]).controller("Temp2Controller", [ "uiGridConstants", Temp2Controller ]); function Temp2Controller(uiGridConstants) { "use strict"; var $scope = this; $scope.gridOptions = { headerTemplate: '<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" style=""><div class="ui-grid-header-cell-wrapper" style="display: block;" ng-style="colContainer.headerCellWrapperStyle()"><div class="ui-grid-header-cell-row abc" style="display: block; border-bottom: 1px solid;border-bottom-color: #d4d4d4;"><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 col="col" super-col-width-update render-index="$index"></div></div></div></div></div></div></div>', 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' }] }; } (function() { "use strict"; angular.module("temp2").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(); if (_parentWidth + 1 >= _width) { _parentWidth = _parentWidth + _width; } else { _parentWidth = _width; } _parentCol.css({ 'min-width': _parentWidth + 'px', 'max-width': _parentWidth + 'px', 'text-align': "center" }); }, 0); }; _updateSuperColWidth(); } }; }]); })(); 

 <!DOCTYPE html> <html ng-app="temp2" ng-controller="Temp2Controller as temp2"> <head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css"> <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://code.angularjs.org/1.4.0/angular.js"></script> <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.js"></script> <script src="script.js"></script> <script src="super-col-with-update.js"></script> <style> /* Styles go here */ .grid { width: 700px; } </style> </head> <body> <div id="grid" ui-grid="temp2.gridOptions" class="grid"></div> </body> </html> 

See jsfiddler here .. It will help you in header grouping.