Header-templates 在 UI-Grid 3.0 中

Question

我想用 Angular UI-Grid 3.0 创建两个 header 行。这是 ng-grid 2.0 中的做法：http://plnkr.co/edit/i261iOpP2PdfGgg3C6ng?p=preview

对于较新的网格，起初它似乎可以工作，但如果您单击任何排序列，header 大小会增加。有解决办法吗？还是我的 header 模板有误？

$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>'

使用以下错误的header模板完成代码片段：

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://whosebug.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>

Answer 1

最简单的解决方案是添加：

.ui-grid-header-cell {
    height: 30px !important;
}

给你的css。这并没有解开谜团，而是：嘿，它起作用了！ :-)

看这里：Plunker

Header-templates 在 UI-Grid 3.0 中

Header-templates in UI-Grid 3.0

angularjs

angular-ui-grid