如何删除AngularJS ui-grid顶部的持久空行？

Question

我有一个带有以下网格选项的Angular ui-grid：

        $scope.gridOptions = {
            data: 'gridData',
            enableColumnMenus: false,
            enableRowSelection: false,
            enableFullRowSelection: false,
            enableSelectAll: false,
            enableRowHeaderSelection: false,
            multiSelect: false,
            noUnselect: false,
            columnDefs: [
                {
                    field: 'FirstName',
                    name: 'First Name',
                    width: '*'
                },
                {
                    field: 'LastName',
                    name: 'Last Name',
                    width: '*'
                },
                {
                    field: 'RoleCode',
                    name: 'Role',
                    width: '*'
                },
                {
                    field: 'Notes',
                    name: 'Notes',
                    width: '*'
                },
                {
                    name:' ',
                    enableFiltering: false,
                    enableSorting: false,
                    enableColumnMenu: false,
                    width: '*',
                    cellTemplate:'<div>' +
                    '<a><button class="btn btn-primary btn-xs l-margin" ng-click="grid.appScope.onEditClick(row.entity)">Edit</button></a>' +
                    '<a><button class="btn btn-danger btn-xs l-margin" ng-click="grid.appScope.onDeleteClick(row.entity)">Delete</button></a>' +
                    '</div>'
                }
            ],
            onRegisterApi: function(gridApi){
                $scope.$on('resize-grid',function() {
                    $timeout(function() {
                        gridApi.core.handleWindowResize();
                    });
                });
            }
        };

我注意到的一件事是我在编辑和删除按钮的网格顶部有一个空白行。我想这是因为它们在细胞模板中。有没有办法在网格顶部没有空白行？网格选项中是否有一个我不知道的属性？

由于

Answer 1

您能提供更多代码/数据/ HTML / JS吗？这里的一切看起来都不错......

＆＃13;

＆＃13;

var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.gridOptions = {
    data: 'gridData',
    enableColumnMenus: false,
    enableRowSelection: false,
    enableFullRowSelection: false,
    enableSelectAll: false,
    enableRowHeaderSelection: false,
    multiSelect: false,
    noUnselect: false,
    columnDefs: [{
        field: 'FirstName',
        name: 'First Name',
        width: '*'
      },
      {
        field: 'LastName',
        name: 'Last Name',
        width: '*'
      },
      {
        field: 'RoleCode',
        name: 'Role',
        width: '*'
      },
      {
        field: 'Notes',
        name: 'Notes',
        width: '*'
      },
      {
        name: ' ',
        enableFiltering: false,
        enableSorting: false,
        enableColumnMenu: false,
        width: '*',
        cellTemplate: '<div>' +
          '<a><button class="btn btn-primary btn-xs l-margin" ng-click="grid.appScope.onEditClick(row.entity)">Edit</button></a>' +
          '<a><button class="btn btn-danger btn-xs l-margin" ng-click="grid.appScope.onDeleteClick(row.entity)">Delete</button></a>' +
          '</div>'
      }
    ],
    onRegisterApi: function(gridApi) {
      $scope.$on('resize-grid', function() {
        $timeout(function() {
          gridApi.core.handleWindowResize();
        });
      });
    },
    data: [{"FirstName": "Matt", "LastName": "W", "RoleCode": "Stack Overflow User", "Notes": "Everything looks good."},
           {"FirstName": "Tim", "LastName": "Harker", "RoleCode": "Stack Overflow User", "Notes": "Everything looks good, again."}]
  };
}]);

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <div ui-grid="gridOptions"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

很乐意提供帮助。