0

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

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

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

提前致谢

4

1 回答 1

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>

普朗克

于 2014-08-11T16:09:40.620 回答