我想更改UI-Grid AngularJS的标题呈现。我知道只通过make headerTemplate很容易实现,但我有一种情况需要对这样的标题进行分组
{
name: 'Mapped By',
enableColumnMenu: false,
field: 'Mappedby',
cellClass: 'intrighttextcell',
width: 102,
enableCellEdit: false,
allowCellFocus: false
},
我不知道如何在ui-grid中实现此功能。 这是ui-grid的plunkr。
答案 0 :(得分:3)
我们有同样的要求,但没有为它找到任何合适的解决方案,所以我通过使用headerCellTemplate
使用一些hacky方式来实现它。
请参阅下面的jsfiddler或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
}
]
}
}]);
&#13;
</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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
这是GitHub#963 https://github.com/angular-ui/ui-grid/issues/963中的一个未解决的问题。自2013年8月以来一直悬而未决。 请查看此问题#644 https://github.com/angular-ui/ui-grid/issues/644。 他们提到了一些替代方法。
答案 2 :(得分:0)
// 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>
请参阅jsfiddler here。它将帮助您进行标题分组。