使用 Angularjs UI-Grid rowTemplate 获取行标题中的加号图标答案

【问题标题】：Using Angularjs UI-Grid rowTemplate to get the plus icon in the row header使用 Angularjs UI-Grid rowTemplate 获取行标题中的加号图标
【发布时间】：2023-03-30 13:45:01
【问题描述】：

我有一个使用 ui-grid v3.0.0-rc.20-8199eb5 - 2015-04-13 的组和子组网格。我需要包含数据而不是分组标题的行中的加号和减号图标。现在任何行都没有。我一直在尝试使用 rowTemplate 并且只成功添加了另一个行标题，但没有修改现有的行标题。

 $scope.gridOptions = {
        enableFiltering: true,
        paginationPageSizes: [25, 50, 75],
        paginationPageSize: 25,
        onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
            var cellTemplate = '<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell"><div class="ui-grid-cell-contents"><i ng-class="{ \'ui-grid-icon-plus-squared\' : !row.isExpanded, \'ui-grid-icon-minus-squared\' : row.isExpanded }" ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"></i> </div></div>';
            $scope.gridApi.core.addRowHeaderColumn({ name: 'rowHeaderCol', displayName: '', cellTemplate: cellTemplate });
        },
        enableRowSelection: true,
        enableRowHeaderSelection: false,
        enableGridMenu: true,
        multiSelect: false
    };

【问题讨论】：

您能解释一下您的用例吗？你到底想通过移动图标来完成什么？

标签： angularjs angular-ui-grid

【解决方案1】：

您需要在您的模块中注入“ui.grid.expandable”并将“ui-grid-expandable”添加到您的 ui-grid 元素中，如下所示：

<div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>

使用这个：http://plnkr.co/edit/0tmCvI05oVNbpfkCquCt?p=preview

【讨论】：