2014-02-05 26 views
1

我想要在ng-grid中獲得多行列標題。我使用AngularJS 1.2.11,ng-grid 2.0.8和JQuery 2.1.0。這是我最近的嘗試。標題仍顯示爲「某些
數據」。ng-grid - 創建多行列標題

var app = angular.module('myApp', ['ngGrid']); 

app.controller('myCtrl', function($scope, $sce) { 

var head4 = 'Some<br>Data' 
var trustHead4 = $sce.trustAsHtml(head4); 

var colDefs = [{field: 'name', displayName: 'Name'}, 
       {field: 'age', displayName: 'Age in Years'}, 
       {field: 'datums', displayName: trustHead4, width:100}, 
       ]; 

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" ng-bind-html="col.displayName"></div>' + 
          '<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>' + 
          '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>' + 
          '<div class="ngSortPriority">{{col.sortPriority}}</div>'+ 
          '</div>' + 
          '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>'; 

$scope.myData = [{name: "Thomas", age: 27, datums: 'adfkjrg'}, 
       {name: "Frances", age: 43, datums: 'adfkjrg'}, 
       {name: "Leila", age: 27, datums: 'adfkjrg'}, 
       {name: "Cute", age: 29, datums: 'adfkjrg'}, 
       {name: "John", age: 34, datums: 'adfkjrg'} 
       ]; 

$scope.myGrid = { 
    data: 'myData', 
    showGroupPanel: false, 
    columnDefs: colDefs, 
    showFooter: false, 
    headerCellTemplate: myHeaderCellTemplate 
}; 
}); 

回答

0

我會說headerCellTemplate屬於columnDefs選項。相反,您將其定義爲網格選項。