拡張可能な角度のuiグリッドで 'expand row'アイコンとその位置を変更する

Question

角度uiグリッドの任意の行を拡大するためのボタン/アイコンのアイコンと位置を変更したいと思います。デフォルトでは、アイコンはプラスの二乗であり、位置はほとんどの列のままです。これのための任意のポインタが評価されます。

の代わりに：

私がしたい：

Answer 1

私はビジェイのヘルプからソリューションを指。 は、カスタムセルを定義し、ui-grid

cellTemaplte例のexpandableイベントをキャプチャするplunk here

使用セルテンプレートを更新：

{ 
    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 
} 

Answer 2

あなたが以下に設定する必要があります。

enableExpandableRowHeader: false 

を次にカスタムセルのテンプレートを使用する必要があります他のアイコンを使用する場合私は、下のプランナーでフォントの素晴らしいアイコンを使用しました。 $ 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