ng-grid - 更改列宽时保持整体宽度相同

Question

我有一个 ng-grid，里面有 6 列，默认设置为每列 100px，所以网格本身是 600px。列是可调整大小的，但我想保持整体网格宽度相同，以确保没有水平滚动条。因此，例如，如果我将第二列的宽度更改为 150 像素，我希望整体宽度保持在 600 像素（因此相邻单元格的大小可能会更改为 50 像素）——这样我就不会得到滚动条。

有人知道是否有插件可以做到这一点/帮助我完成这个吗？

我添加了一个 plunker：http://plnkr.co/edit/4LRHQPg7w2eDMBafvy6b?p=preview

在此示例中，我希望将表格宽度保持在 600 像素，因此如果我展开“字段 2”，您将看到“字段 4”离开网格的可视区域边缘，并出现一个水平滚动条.我想要的行为是让不同的列（可能是相邻的列 - “字段 3”）自动缩小大小，以便网格保持在 600px 并且不会出现水平滚动条。

Answer 1

在网上搜索了很多时间以寻找答案后，我从 Paul Witherspoon 开始观看 isColumnResizing 属性的想法，在阅读了有关 ng-grid 插件的信息后，我想出了这个插件解决方案：

Plunker：http://plnkr.co/edit/Aoyt73oYydIB3JmnYi9O?p=preview

插件代码：

function anchorLastColumn () {
    var self = this;
    self.grid = null;
    self.scope = null;
    self.services = null;
    self.init = function (scope, grid, services) {
      self.grid = grid;
      self.scope = scope;
      self.services = services;

      self.scope.$watch('isColumnResizing', function (newValue, oldValue) {
        if (newValue === false && oldValue === true) { //on stop resizing
          var gridWidth = self.grid.rootDim.outerWidth;
          var viewportH = self.scope.viewportDimHeight();
          var maxHeight = self.grid.maxCanvasHt;
          if(maxHeight > viewportH) { // remove vertical scrollbar width
              gridWidth -= self.services.DomUtilityService.ScrollW;
          }

          var cols = self.scope.columns;
          var col = null, i = cols.length;
          while(col == null && i-- > 0) {
              if(cols[i].visible) {
                  col = cols[i]; // last column VISIBLE
              }
          }
          var sum = 0;
          for(var i = 0; i < cols.length - 1; i++) {
                if(cols[i].visible) {
                    sum += cols[i].width;
                }
          }

          if(sum + col.minWidth <= gridWidth) {
            col.width = gridWidth - sum; // the last gets the remaining
          }
        }
      });
    }
}

在控制器中

$scope.gridOptions = { 
  data: 'myData',
  enableColumnResize: true,
  plugins: [new anchorLastColumn()],
  columnDefs: $scope.columnDefs 
};

这不是一个完美的解决方案，但对我有用，我希望它可以帮助其他人。

Answer 2

我找到了一种方法来使用 isColumnResizing 属性上的手表来做到这一点：

    $scope.$watch('gridOptions.$gridScope.isColumnResizing', function (newValue, oldValue) {

        if (newValue === false && oldValue === true) { //on stop resizing
            $scope.ColResizeHandler($scope.gridOptions.$gridScope.columns);
        }
    }, true);

然后我可以在我创建的调整大小处理程序中调整列的大小：

    $scope.ColResizeHandler = function (columns) {
        var origWidth;
        var col1 = undefined;
        var col2 = undefined;
        var widthcol2;
        var found = false;
        var widthDiff = 0;
        angular.forEach(columns, function (value) {
            if (col2 == undefined && value.visible) {
                if (found) {
                    origWidth += value.width;
                    col2 = value;
                    colSizeLimits(col2, widthDiff);
                    found = false;
                }
                if (value.origWidth != undefined && value.origWidth != value.width && col2 == undefined) {
                    found = true;
                    col1 = value;
                    widthDiff = value.width - value.origWidth;
                    origWidth = value.origWidth;
                }
            }
        });

        if (col2 == undefined) {
            //this was the last visible column - don't allow resizing
            col1.width = origWidth;
        }
        else {
            //ensure limits haven't been blown to cope with reizing
            if (col1.width + col2.width != origWidth) {
                var diff = (col1.width + col2.width) - origWidth;
                colSizeLimits(col1, diff);
            }
        }

        col1.origWidth = col1.width;
        col2.origWidth = col2.width;

    }

这有两个问题。

1 - 如果您调整列大小并将其拖动到网格之外（即一直越过和离开 ng-grid 可视区域），当您停止拖动并释放调整大小时，isColumnResizing 监视不会执行。 （我认为这可能是 ng-grid 中的一个错误，因为它确实将列的大小调整到您拖动调整器的位置，即使它在网格可视区域之外，它也不会触发监视代码）。

2 - 如果你避免这个问题并且只是在可视网格区域内拖动，那么列将调整大小，但只有在你完成拖动调整器之后，所以 ui 看起来有点有趣（即，如果我展开一列然后是相邻列在我单击调整大小并停止拖动之前不会缩小）。

我将致力于解决这些问题，并将发布我发现的任何更新/修复。