Question

我不想使用默认的+图标来扩展该行。
点击该行的任意位置即可展开它。

我试过了：

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

这应该有效，因为点击事件现在在行而不是图标（＆＃39; i＆＃39;标记）。

这是UI-GRID Expandable Grid. Programatically expand one row答案的修改（不同要求）。

UI-GRID可扩展网格。在编辑行时以编程方式展开一行

1 个答案: