如何在手动调整一个列宽后调整角度ui-grid剩余列的大小?

时间:2015-05-27 19:02:46

标签: javascript angularjs angular-ui-grid

在将coulmn调整为较小之后,我希望剩余的列调整其宽度以占据网格的整个空间。永远不应该有任何空白区域。我该如何实现这种行为?

我想要的行为是来自ui-grid的这个演示: http://ui-grid.info/docs/#/api/ui.grid.resizeColumns.directive:uiGridColumnResizer

目前,当我调整列的大小时,所有列都保持其大小,并且网格的右侧有空格。

1 个答案:

答案 0 :(得分:4)

这可能是因为您在columnDefs中的每个列上设置了宽度。

var app = angular.module('app', ['ui.grid', 'ui.grid.resizeColumns']);

app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.gridOpts = {
    enableColumnResizing: true,
    columnDefs : [
       {displayName:"Name",field:"name",width:200},
       {displayName:"Gender",field:"gender",width:200},
       {displayName:"Company",field:"company",width:200}
      ],
    data: [
      { "name": "Ethel Price", "gender": "female", "company": "Enersol" },
      { "name": "Claudine Neal", "gender": "female", "company": "Sealoud" },
      { "name": "Beryl Rice", "gender": "female", "company": "Velity" },
      { "name": "Wilder Gonzales", "gender": "male", "company": "Geekko" }
    ]
  };
}]);

从同一个例子中,如果从最后一列中删除宽度,它会提供一个不错的行为。但是如果你调整最后一列的大小,那么你仍然会获得空格。