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

Question

我想更改 ui-grid 中 expandableRow 列的 header，但我似乎不知道如何更改。

为了清楚起见，header 我指的是上图中带圆圈的加号。我希望使用这个 header 单元格放置一个不同的按钮，其功能与目前的功能完全不同。

我试图用 field: "expandableRow" 和 headerCellTemplate 添加我自己的 columnDef，但我得到一个错误，我不能有重复的字段（它破坏了我的网格）。我似乎无法在文档中找到这方面的信息，但也许我错过了。任何人都知道如何添加模板文件来替换上面单元格中显示的内容？

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

Answer 1

看看下面的插件：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，如您在以下插件中所见：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!');
  }

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

AngularJS ui-grid change header template for expandableRows column

javascript

angularjs

angular-ui-grid