如何在AngularJS UI网汽车大小的列宽 [英] How to auto size column width in AngularJS ui-grid

问题描述

在AngularJS UI电网，我怎么能设置网格，以便根据它可以自动调整列宽内容时，它呈现？

In AngularJS ui-grid , how can I configure the grid so that it can auto adjust the width of the columns according to the contents when it render?

我知道有一个教程显示自动调整大小功能，但仅当您双击单击列，祝电网启动时，它可能发生。

I know there is a tutorial showing the auto size function, but that works only when you double click the column, I wish it could happen when the grid is initiated.

推荐答案

我不觉得这个功能在这一点上存在。该uiGridColumnResizer指令在登记DBLCLICK，鼠标按下和MouseUp事件侦听器。 DblClick事件基本上将直通所有渲染单元和计算的最大宽度和其设置为列的宽度。这将是一个性能问题，如果你有很多的渲染行。

I dont think this feature exists at this point. The uiGridColumnResizer directive is registering event listeners on dblclick, mousedown and mouseup. The dblclick event is basically going thru all the rendered cells and calculating the maximum width and setting it as the column width. This will be a performance issue if you have a lot of rows rendered.

我可能只是设置基于网格将有数据的宽度最大的可能。

I would probably just set a maximum possible width based on the data the grid will have.

或者试图复制在uiGridColumnResizer的行为。

Or try to replicate the behaviour in the 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);
    });

这篇关于如何在AngularJS UI网汽车大小的列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！