更改 'expand row' 图标及其在可扩展 angular ui 网格中的位置

Question

我想更改按钮/图标的图标和位置以展开 angular ui-grid 中的任何行。默认情况下，图标为正方形，位置位于最左侧的列。对此的任何指示将不胜感激。

而不是：

我要：

Answer 1

您需要进行以下设置：

enableExpandableRowHeader: false

那么您需要使用自定义单元格模板来使用其他图标。我在下面的 plunker 中使用了一个 Font awesome 图标。不要忘记在控制器中注入 $templateCache。

app.controller('MainCtrl', ['$scope', '$http', '$log', "$templateCache",function ($scope, $http, $log,$templateCache) 

  $scope.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'age'},
    { name: 'address.city'},
       {
    // Add a new column with your icon
    name: 'Expandable',
    displayName: '',
    enableSorting: false,
    headerCellClass: 'header-cell',
    cellClass: 'center-align',
    enableCellEdit: false,
    enableFiltering: false,
    width: '14%',
    cellTemplate: $templateCache.put('ui-grid/expandableRowHeader',
     "<div class=\'ui-grid-cell-contents expand-row\'>" +
"<i class=\'icon-margin fa fa-pencil-square-o\' " +    
    "ng-click=\'grid.api.expandable.toggleRowExpansion(row.entity)\'></i>" +
    "</div>"
)
}

笨蛋：http://plnkr.co/edit/7M8ZIAhHHjURkb9nSbBn?p=preview

Answer 2

我在 Vijay 的帮助下找到了解决方案。已更新 plunk here

使用单元格模板定义自定义单元格并捕获ui-grid

的expandable事件

cellTemaplte 示例：

{
     name: 'Actions',
     displayName: '',
     enableFiltering: false,
     enableColumnMenu: false,
     cellTemplate: ' <div \
    class="ui-grid-cell-contents"> \
    <i \
      ng-class="{ \'ui-grid-icon-right-dir\' : !row.isExpanded, \'ui-grid-icon-down-dir\' : row.isExpanded }" \
      ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"> \
    </i> \
  </div>',
     enableSorting: false
 }

更改 'expand row' 图标及其在可扩展 angular ui 网格中的位置

Changing 'expand row' icon and its location in expandable angular ui-grid

angularjs

angular-ui-grid