如何在手动调整一列宽度后调整angular ui-网格剩余列的大小？

Question

将列的大小调整得更小后，我希望剩余的列调整它们的宽度以占据整个 space 网格。永远不应该有任何白色space。我如何实现这种行为？

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

目前，当我调整列大小时，所有列都保持其大小，并且网格右侧为白色 space。

Answer 1

这可能是因为您在 columnDef 中为每一列设置了宽度。

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

在同一个示例中，如果您删除最后一列的宽度，它会提供不错的行为。但是如果你调整最后一列的大小，你仍然会得到白色的 space.

如何在手动调整一列宽度后调整angular ui-网格剩余列的大小？

How to get angular ui-grid remaining columns to resize after one column width is resized manually?

javascript

angularjs

angular-ui-grid