Question

我想更改按钮/图标的图标和位置，以展开角度ui-grid中的任何行。默认情况下，图标加上平方，位置最左侧列。任何指针都将不胜感激。

而不是：

我想：

Answer 1

我从Vijay的帮助中找到了解决方案。更新了plunk here

使用单元格模板定义自定义单元格并捕获expandable的{{1}}事件

ui-grid示例：

cellTemaplte

Answer 2

您需要在下面进行设置：

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>"
)
}

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

改变＆＃39;扩展行＆＃39;图标及其在可扩展角度ui网格中的位置

2 个答案: