javascript - 使用 Angular 和 Bootstrap-UI 构建的 UI-Grid 在以某种方式调整窗口大小之前不会自行调整大小

Question

这里的第一部分是网格在一个部分和表格中的显示。他们能够将此表格导出到 Excel 或 Crystal Reports。我包括了帮助构建网格的 gridOptions 和作为 gridOptions 重要组成部分的 columnDef。每列都有一个定义，我使用每列中的最大数据来决定列的大小。这决定了整个网格的大小，但容器仍然适合可视区域。有一个横轴。我唯一的问题是只有在调整窗口大小时才会激活它。以任何方式最大化、最小化、调整大小、更改，网格将像预期的那样完美地适应。否则容器不会像预期的那样停在可视区域，它会一直围绕网格的宽度延伸。

有没有人遇到过这样的事情？如果我只需要用 0 通过 $interval 运行某些东西，我会很高兴，但这是非常有问题的行为。这是大量的代码，但是 Angular 、引导和引导 ui 是最新的和标准的。 UI-Grid 是 RC20 (ui-grid - v3.0.0-rc.20-746a476 - 2015-03-19)。如果您有任何问题或我可以提供更多信息，请告知。我想我可以人为地从窗口中触发一个调整大小事件，这就足够了，同时我摆脱了微调器。

<section id="gridTemplate" ng-controller="gridCtrl">
    <h1 class="g-report-title">{{pageInfo.title}}</h1>
    <form role="form">
        <grid class="masked grid" id="grid1" spinner-key="spinnerGrid" spinner-start-active="true" ui-grid="gridOptions" external-scopes="$scope">
        </grid>
        <fieldset class="buttons" ng-controller="reportController">
            <button ng-hide="bPrint" class="btn btn-small btn-default" ng-click="printReport()">Report</button>
            <button ng-hide="bExport" class="btn btn-small btn-default" ng-click="exportData()">Export</button>
        </fieldset>
    </form>
</section>

gridOptions 大多以这样的方式结束:

 $scope.gridOptions = {
        enableSorting: true,
        showHeader: true,
        enableRowSelection: true,
        multiSelect: true,
        data: $scope.data,
        columnDefs: columnDefs,
        // needs more review and may only be applicable to editable grids
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                var msg = 'row selected ' + row.isSelected;
                alert(msg);
            });
            ...
        }
    };

还有比这更多的东西，但 columnDefs 大多以这样的方式结束，以根据内容获得一些大小估计:

for (var col in finalRow) {
    var def     = {};
    def.field   = col;
    var label   = col.replace('_', ' ');
    label       = label[0].toUpperCase() + label.substr(1, label.length);
    def.title   = label;
    def.visible = true;

    switch ($rootScope.pageInfo.reportName) {
        case 'CSOpenClaimsCache':
        case 'OpenClaimsOlderThanDate':
            if (col === 'Status' || col === 'CloseDate' || col === 'Resp' || col==='DSMNameAssigned' || col==='DSMName') {
                def.visible = false;
            }
        break;
    }
    def.width = maxColumnWidth[col];
    columnDefs.push(def);
}

由@mainguy 提供的解决方案

$(window).trigger('resize');
$scope.stopSpin('spinnerGrid');

stopSpin() 的函数定义

/*
 * stopSpin - static function wrapper to attach to $scope of high
 * lvl controller
 * $param string      key   Spinner key to stop
 * $param boolean  keep Keep the spinner, just hide it
 * $return void
 */
$scope.stopSpin = function (key, keep) {
  //better have injected this. It's very configurable, globally and individually
  usSpinnerService.stop(key, keep);
}

Answer 1

由@mainguy 提供的解决方案。我将其粘贴在生成和放置网格的 Controller 中。就在我关闭微调器(即它已加载)之前，我发送了调整大小事件。似乎很有魅力。如果发现任何问题，我会反馈。

//$ is mapped to angular.element in my constants file
$(window).trigger('resize');
$scope.stopSpin('spinnerGrid');

stopSpin() 的函数定义

/*
 * stopSpin - static function wrapper to attach to $scope of high
 * lvl controller
 * $param string     key   Spinner key to stop
 * $param boolean    keep  Keep the spinner, just hide it
 * $return void
 */
$scope.stopSpin = function (key, keep) {
  //better have injected this. It's very configurable, globally and individually
  usSpinnerService.stop(key, keep);
}