Question

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

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

我已经加入了一个傻瓜：http://plnkr.co/edit/4LRHQPg7w2eDMBafvy6b?p=preview

在这个例子中，我希望将表格宽度保持在600px，所以如果我展开“Field 2”，你会看到“Field 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属性上使用watch的方法：

    $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看起来有点滑稽（即如果我展开一列然后是相邻的列直到我点击缩放器并停止拖动才会收缩。

我正在处理这些问题，并会发布我发现的任何更新/修复。

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

2 个答案: