UI-GRID可擴展網格。 按行以編程方式擴展一行

Question

1. 我不想使用默認的+圖標來擴展行。
2. 單擊該行上的任何位置都將其展開。

我嘗試了這個：

HTML

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

調節器

var app = angular.module('app',['ngTouch','ui.grid', 'ui.grid.expandable',
          'ui.grid.selection','ui.grid.pagination','ui.bootstrap']);

app.controller('MainCtrl', ['$compile','$scope', '$http', '$log', 
  function ($compile,$scope, $http, $log) {

    $scope.gridOptions = {
      enableRowSelection: true,
      enableHorizontalScrollbar:0,
      expandableRowTemplate: 'expandableRowTemplate.html',
      expandableRowHeight: 150,
      expandableRowScope: {
      subGridVariable: 'subGridScopeVariable'
    },

    onRegisterApi: function (gridApi){
      $scope.gridApi = gridApi;
    },

    rowTemplate: '<div ng-click="grid.api.expandable.toggleRowExpansion(row.entity)" ng-style="{ \’cursor\’: row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div>'
  }
}]);

注意：使用rowTemplate ，不會顯示任何內容。 但是，將其刪除后，將無法單擊這些行。

Answer 1

您可以通過覆蓋的模板嘗試expandableRowHeader 。

$templateCache.put('ui-grid/expandableRowHeader',
  "<div class=\"ui-grid-row-header-cell ui-grid-expandable-buttons-cell\" ng-click=\"grid.api.expandable.toggleRowExpansion(row.entity)\"><div class=\"ui-grid-cell-contents\"><i ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\"></i></div></div>"
);

這應該起作用，因為單擊事件現在位於行而不是圖標（“ i”標記）上。

這是對UI-GRID可擴展網格答案的修改。 以編程方式擴展一行 （在那里有不同的要求）。