Angular Ng-Grid HeaderRowTemplate 排序和两行标题答案

【问题标题】：Angular Ng-Grid HeaderRowTemplate sorting and two rows headerAngular Ng-Grid HeaderRowTemplate 排序和两行标题
【发布时间】：2014-08-11 09:32:30
【问题描述】：

我正在开发一个 Angular 1.2.20 的应用程序并使用 ng-grid 2.0.11 和我遇到了这个问题：

当我使用 headerRowTemplate 属性时，我失去了 ng-grid 的排序功能。有没有办法保留它。

我有第二个问题，正如我在第一个问题中看到的那样，我正在使用 ng-grid 的 headerRowTemplate，我想知道是否有人成功地制作了带有或不带有 headerRowTemplate 属性的两行标题网格。

提前致谢

【问题讨论】：

标签： angularjs ng-grid header-row

【解决方案1】：

我不能确定你真正的问题。也许你可以给一个 Plunker 链接。

首先，我想您不会从默认模板进行修改。

就在这里。 headerRowTemplate.html

其次，我想您需要一个显示标题行和原始可排序标题行，我无法从 ng-grid 直接支持中找到它，但这个 hack 是可行的。

这是一个例子：

main.js

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];

    $scope.headerRowHeight = 60;

    $scope.gridOptions = { 
        data: 'myData',
        headerRowTemplate: 'myHeaderTemplate.html',
        headerRowHeight: $scope.headerRowHeight,
        columnDefs: [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}]
    };
});

myHeaderTemplate.html

<div class="ngRow ngHeaderText" ng-style="{height: headerRowHeight / 2}" style="text-align:center">I'm other header row</div>
<div ng-style="{ height: col.headerRowHeight / 2, top: col.headerRowHeight / 2 }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell">
    <div class="ngVerticalBar" ng-style="{height: col.headerRowHeight / 2}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>
    <div ng-header-cell></div>
</div>

Plunker

【讨论】：

感谢您的回答，这正是我正在寻找的，但带有多个跨度标头。