web-dev-qa-db-ja.com

AngularJS UI-Gridで列幅を自動サイズ設定する方法

AngularJS i-grid で、レンダリング時にコンテンツに応じて列の幅を自動調整できるようにグリッドを構成するにはどうすればよいですか？

tutorial が自動サイズ機能を表示していることは知っていますが、列をダブルクリックしたときにのみ機能します。グリッドが開始されたときに発生する可能性があります。

javascriptangularjsangularjs-directiveangular-ui-grid
13
Tony

この時点でこの機能が存在するとは思わない。 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);
    });
4
Kathir

これを行うプラグインがあります：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'])
2
Leonel Thiesen

列定義でアスタリスクを使用します。

width:"*";
2
cramroop

そのため、1つを除くすべての列を縮小する必要があるときに、これはうまくいきました。グリッドの読み込みが完了した後、すべての列を反復処理し、リサイザーでダブルクリックイベントをトリガーします。最もきれいではないので、他の誰かがより良い解決策を持っているなら、私はそれを聞いてとてもうれしいです！

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);
    }
}
2
SnailCoil

width : "*"を使用すると、使用可能なビューポート内のすべての列が調整され、列が圧縮されます。

minWidth: "somevalue"とwidth: "*"を指定すると、UIグリッドの外観が良くなります

1
rtvalluri

widthプロパティと同様に*を使用できます-autoと見なすことができます here

1
yanai edri

私が思いつくことができる最善の解決策は次のとおりです。

  1. グリッド幅を100％に設定します
  2. サイズを小さくしたくないcolumnDefsにmaxWidth：属性を設定します
  3. グリッドのサイズをそのままにします

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'},
            ],

私はこれがすべての場合に機能するわけではないことを知っていますが、多くの場合、ほとんどの列はほぼ固定されており、事前に知っている変数はサイズを変更することができます。

0
Rob Sedgwick

gridoptionsに以下を追加します

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

各列の定義に任意の乱数の幅があることを確認してください

width: 100

結構です。

0
lazell

私はこれの実装を見つけられなかったので、これは私がやったことです

  1. 最初の10レコードを反復処理しました。

  2. 各列のデータの最大サイズを見つけました。

  3. 次に、spanタグをその場で作成し、そのデータでラップしました。

  4. タグの幅を測定しました。これは、列に必要なおおよその幅になります（CSS効果などにより、一定の幅を追加する必要がある場合があります）。

  5. 最初の10レコードがnullの場合、同じプロセスを実行しますが、今回は列ヘッダーを使用します。

0
Python Boy

幅ソリューションにいくつかの問題が見つかりました。このクラスを有効にするには、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's回答の詳細な説明を参照できます。 https://github.com/angular-ui/ui-grid/issues/391

0
level