0

angular 1.2.20でアプリを開発し、ng-grid 2.0.11を使用していますが、この問題が発生しています:

headerRowTemplate 属性を使用していると、ng-grid のソート機能が失われます。それを維持する解決策はありますか。

最初の質問に見られるように、ng-grid の headerRowTemplate を使用していますが、headerRowTemplate 属性の有無にかかわらず、2 行のヘッダー グリッドの作成に成功した人がいるかどうか疑問に思っていました。

前もって感謝します

4

1 に答える 1

1

あなたの本当の問題はわかりません。たぶん、Plunker リンクを与えることができます。

まず、デフォルトのテンプレートから変更しないと仮定します。

ここです。headerRowTemplate.html

第二に、表示ヘッダー行と元のソート可能なヘッダー行が必要だと思います.ng-gridの直接サポートからは見つかりませんが、このハックはうまくいきます.

それは例です：

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 に答える