Question

我想在标题中添加图片，而不是在行中添加。

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
 $scope.gridOptions = {
   enableSorting: true,
   columnDefs: [
     { field: 'name' },
     { field: 'company'  },
     { field: '<THIS NEEDS TO BE IMAGE>' displayName: 'Timer'}
   ],
   data:[
     {name:"Name1",company:"Company1",Timer:"10"},
     {name:"Name2",company:"Company2",Timer:"11"},]
};  
}]);

Answer 1

我没有要粘贴的具体示例，但我认为您可以覆盖默认的 headerCellTemplate 。我已经将cellTemplate与图像一起使用但不使用headerCellTemplate。鉴于可以在标题中显示的所有其他功能，您可能必须找到默认的headerCellTemplate然后添加您的图像。

Answer 2

与@WadeB提到的一样，您必须为该特定列使用headerCellTemplate。

我创建了a Plunkr，展示了可能的设置。

您需要将headerCellTemplate添加到columnDef：

{ field: 'company', headerCellTemplate: myHeader}

并通过创建本地变量来创建自己的模板：

var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>{{ col.displayName CUSTOM_FILTERS }}</span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>"

理解有点混乱，重要的是：

{{ col.displayName CUSTOM_FILTERS }}

用您想要的任何东西替换该部分，例如Plunkr中显示的图片

var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span><img src=\"https://angularjs.org/img/AngularJS-large.png\" alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>";

您还可以全局覆盖模板：

$templateCache.put('ui-grid/uiGridHeaderCell',
    '<div>my-own-html</div>'
);

如何在角度ui网格中添加图像作为标题？

2 个答案: