AngularJS ui-grid更改expandableRows列的头模板

Question

我想在ui-grid中更改expandableRow列的标题，但我似乎无法弄清楚如何。

要清楚标题，我的意思是上图中带圆圈的加号。 我希望使用这个标题单元格在其中放置一个不同的按钮，其功能与目前不同。

我尝试使用field: "expandableRow"和headerCellTemplate添加我自己的columnDef，但是我收到一个错误，我无法复制字段（并且它打破了我的网格）。 我似乎无法在文档中找到相关信息，但也许我错过了它。任何人都知道我如何添加模板文件来替换上面单元格中显示的内容？

编辑：为了澄清，我不想完全删除该列，就像建议重复的另一个问题一样。我想保留列和扩展行的功能。我只想更改我在上图中圈出的全部展开按钮

Answer 1

请看下面的plunker：http://plnkr.co/edit/QOqIxoArHgBCyP3iDVfa?p=preview

我使用$ timeout隐藏展开全部按钮：

$timeout(function(){
    var x = document.getElementsByClassName('ui-grid-header-cell')[0];
                if (x != null) {
                  var y = x.getElementsByClassName('ui-grid-icon-plus-squared')[0];
                  if (y != null) {
                      x.style.backgroundColor = "white"; // "#009933";
                      y.style.visibility = "hidden";
                  }
                }
  });

另一种选择是更改默认的expandableTopRowHeader，如下面的plunker所示：http://plnkr.co/edit/4ChfeZ4cjc8RC9ARdTde?p=preview

$templateCache.put('ui-grid/expandableTopRowHeader',
    '<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell" ng-if="grid.options.showExpandAllInHeader"><div class="ui-grid-cell-contents"><i ng-class="{ "ui-grid-icon-plus-squared" : !grid.expandable.expandedAll, "ui-grid-icon-minus-squared" : grid.expandable.expandedAll }" ng-click="grid.api.expandable.toggleAllRows()">'
);

并向gridOptions添加以下选项：showExpandAllInHeader : false

如果您想更改按钮的功能，请更改按钮的ng-click，如下图所示：http://plnkr.co/edit/zzYI9Sn1qJNxgub6dpxQ?p=preview

$templateCache.put('ui-grid/expandableTopRowHeader',
    '<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell" ><div class="ui-grid-cell-contents"><i class="icon-cog" ng-click="grid.appScope.main.test()">'
); 

vm.test = function(){
    alert('Hey!');
  }