Question

在AngularJS ui-grid中，如何配置网格，以便在渲染时根据内容自动调整列的宽度？

我知道有一个显示自动调整大小功能的tutorial，但只有当您双击该列时才有效，我希望在启动网格时可能会发生这种情况。

Answer 1

我不认为此功能存在。 uiGridColumnResizer指令在dblclick，mousedown和mouseup上注册事件侦听器。 dblclick事件基本上是通过所有渲染的单元格并计算最大宽度并将其设置为列宽。如果您渲染了大量行，这将是性能问题。

我可能只是根据网格所具有的数据设置最大可能宽度。

或尝试复制uiGridColumnResizer中的行为。

 $elm.on('dblclick', function(event, args) {
      event.stopPropagation();

      var col = uiGridResizeColumnsService.findTargetCol($scope.col, $scope.position, rtlMultiplier);

      // Don't resize if it's disabled on this column
      if (col.colDef.enableColumnResizing === false) {
        return;
      }

      // Go through the rendered rows and find out the max size for the data in this column
      var maxWidth = 0;
      var xDiff = 0;

      // Get the parent render container element
      var renderContainerElm = gridUtil.closestElm($elm, '.ui-grid-render-container');

      // Get the cell contents so we measure correctly. For the header cell we have to account for the sort icon and the menu buttons, if present
      var cells = renderContainerElm.querySelectorAll('.' + uiGridConstants.COL_CLASS_PREFIX + col.uid + ' .ui-grid-cell-contents');
      Array.prototype.forEach.call(cells, function (cell) {
          // Get the cell width
          // gridUtil.logDebug('width', gridUtil.elementWidth(cell));

          // Account for the menu button if it exists
          var menuButton;
          if (angular.element(cell).parent().hasClass('ui-grid-header-cell')) {
            menuButton = angular.element(cell).parent()[0].querySelectorAll('.ui-grid-column-menu-button');
          }

          gridUtil.fakeElement(cell, {}, function(newElm) {
            // Make the element float since it's a div and can expand to fill its container
            var e = angular.element(newElm);
            e.attr('style', 'float: left');

            var width = gridUtil.elementWidth(e);

            if (menuButton) {
              var menuButtonWidth = gridUtil.elementWidth(menuButton);
              width = width + menuButtonWidth;
            }

            if (width > maxWidth) {
              maxWidth = width;
              xDiff = maxWidth - width;
            }
          });
        });

      // check we're not outside the allowable bounds for this column
      col.width = constrainWidth(col, maxWidth);

      // All other columns because fixed to their drawn width, if they aren't already
      resizeAroundColumn(col);

      buildColumnsAndRefresh(xDiff);

      uiGridResizeColumnsService.fireColumnSizeChanged(uiGridCtrl.grid, col.colDef, xDiff);
    });

Answer 2

在列定义中使用星号：

width:"*";

Answer 3

有一个插件可以执行此操作：ui-grid-auto-fit-columns

GitHub：https://github.com/Den-dp/ui-grid-auto-fit-columns

示例：http://jsbin.com/tufazaw/edit?js,output

用法：

<div ui-grid="gridOptions" ui-grid-auto-fit-columns></div>

angular.module('app', ['ui.grid', 'ui.grid.autoFitColumns'])

Answer 4

您可以在width属性中使用* - 被视为auto 你可以看到here

Answer 5

所以，当我需要缩小除一个之外的所有列时，这对我有用。在网格加载完成后迭代所有列，并在缩放器上触发双击事件。不是最漂亮的，所以如果有其他人有更好的解决方案，我会很高兴听到它！

function resizeColumn(uid) {
    // document.querySelector might not be supported; if you have jQuery
    // in your project, it might be wise to use that for selecting this
    // element instead
    var resizer = document.querySelector('.ui-grid-col' + uid + ' .ui-grid-column-resizer.right');
    angular.element(resizer).triggerHandler('dblclick');
}

var gridOptions = {
    ...
    onRegisterApi: function (gridApi) {
        // why $interval instead of $timeout? beats me, I'm not smart enough
        // to figure out why, but $timeout repeated infinitely for me
        $interval(function() {
            var columns = gridApi.grid.columns;
            for(var i = 0; i < columns.length; i++) {
                // your conditional here
                if(columns[i].field !== 'name') {
                    resizeColumn(columns[i].uid)
                }
            }
        }, 0, 1);
    }
}

Answer 6

使用width : "*"，将调整可用视图端口中的所有列，从而导致列被压缩。

指定minWidth: "somevalue"和width: "*"会让您的ui-grid看起来更好

Answer 7

将以下内容添加到gridoptions

                    init: function (gridCtrl, gridScope) {
                        gridScope.$on('ngGridEventData', function () {
                            $timeout(function () {
                                angular.forEach(gridScope.columns, function (col) {
                                    gridCtrl.resizeOnData(col);
                                });
                            });
                        });
                    }

确保每个列定义的宽度为任意随机数

width: 100

很好。

Answer 8

我没有找到任何实现，所以这就是我所做的

迭代前10条记录。
找到每列的最大数据大小。
然后动态创建了span标记，并将其与该数据包装在一起。
测量标签的宽度，这将是列所需的近似宽度（由于CSS效果，可能需要附加一些更恒定的宽度等）。
如果前10条记录为null，则执行相同的处理，但这次使用列标题。

Answer 9

我能想出的最佳解决方案是：

将网格宽度设置为100％
将您不想调整大小的columnDefs上的maxWidth：属性设置为一些小数
让网格大小本身

HTML：

ui-grid="gridOptions" class="myuigrid" ui-ui-grid-resize-columns ui-grid-ui-grid-auto-resize></div>

的CSS：

.myuigrid {
   width: 100%;
 }

JS

            columnDefs: [
              { name: 'Id', maxWidth:80 },
              { name: 'Name', maxWidth: 280 },
              { name: 'LongName'},
            ],

我知道这在每种情况下都不会起作用，但是很多时候你的大多数列都或多或少都是固定的，你提前知道的变量就是要调整大小的那些。

Answer 10

我发现宽度解决方案存在一些问题。我们应该在ui-grid columns对象中使用属性'cellClass'来启用此类。

.ui-grid-cell-contents-auto {
     /* Old Solution */
    /*min-width: max-content !important;*/

    /* New Solution */
    display: grid;
    grid-auto-columns: max-content;

    /* IE Solution */
    display: -ms-grid;
    -ms-grid-columns: max-content;
}

然后你应该使用ui-grid columns对象中的属性cellClass在你的网格上启用这个类（类似这样）：

columns: [{ field: 'search_name', displayName: '', cellClass: 'ui-grid-cell-contents-auto'}]

您可以参考 nekhaly的回答详细说明。 https://github.com/angular-ui/ui-grid/issues/3913

Answer 11

尝试使用'width: auto' ..显然使用此版本是ui-grid的早期版本中的一个问题，它应该现在可以使用，它的文档部分在这里：defining columns

编辑：参考link to closed issue #565 page

如何在AngularJS ui-grid中自动调整列宽

11 个答案: