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

Question

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

 $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
    };

Answer 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

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

Using Angularjs UI-Grid rowTemplate to get the plus icon in the row header

angularjs

angular-ui-grid