angularjs - ng-grid headerRowTemplate - 誰かがこれを使用しましたか?

Question

私のチームは、ng-grid のこの機能を使用したいと考えています。ただし、どこにも文書化されていないようです。やりたいことは、ng-grid のヘッダー領域の最後の列に「プラス」アイコンを配置することです。

誰かがこれを行う良い方法を見つけましたか?

Answer 1

headerCellTemplateグリッドの最後の列の を変更するだけです ( https://github.com/angular-ui/ng-grid/wiki/Templatingを参照)。

以下に例を示します ( <img src="PLUS-ICON.png" />2 行目に注意してください)。

var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }">' +
                           '<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}} <img src="PLUS-ICON.png" /></div>' +
                           '<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>' +
                           '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>' +
                           '<div class="ngSortPriority">{{col.sortPriority}}</div>' +
                           '<div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div>' +
                           '</div>' +
                           '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';
$scope.gridOptions = {
    data: self.myData,
    columnDefs: [
        { field: 'firstField', displayName: 'First Column' },
        { field: 'secondField', displayName: 'Second Column' },
          ...
        { field: 'lastField', displayName: 'Last Column', headerCellTemplate: myHeaderCellTemplate }
    ]
};