Я хотел бы создать две строки заголовков с помощью Angular UI-Grid 3.0. Вот как это было сделано в ng-grid 2.0: ?p=предварительный просмотр
С более новой сеткой сначала кажется, что она работает, но если вы нажмете на любой из столбцов сортировки, размер заголовка увеличится. Есть ли обходной путь для этого? Или мой headerTemplate неправильный?
$scope.gridOptions.headerTemplate = '<div class="ui-grid-header" >' +
'<div class="ui-grid-top-panel">' + '<div class="ui-grid-header-viewport">'
+'<div class="ui-grid-header">' + 'Would like a grid header here' + '</div>'
+'<div class="ui-grid-header-canvas" >' + '<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" render-index="$index" ng-style="$index === 0 && colContainer.columnStyle($index)">' + '</div></div></div></div></div>'
Полный фрагмент кода с ошибочным заголовкомTemplate ниже:
var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', '$log', function ($scope, $log) {
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{ name: 'firstName' },
{ name: 'lastName'},
{ name: 'Hyperlink',
cellTemplate:'<div>' +
' <a href="http://stackoverflow.com">Click me</a>' +
'</div>' }
];
$scope.gridOptions.headerTemplate = '<div class="ui-grid-header" >' +
'<div class="ui-grid-top-panel">' + '<div class="ui-grid-header-viewport">'
+'<div class="ui-grid-header">' + 'Would like a grid header here' + '</div>'
+'<div class="ui-grid-header-canvas" >' + '<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" render-index="$index" ng-style="$index === 0 && colContainer.columnStyle($index)">' + '</div></div></div></div></div>'
$scope.gridOptions.data = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>