ui-选项卡内的网格显示时没有列

Question

我正在实施一个带有 ui 网格的选项卡，该网格不显示第 5 个列。在第一个应用程序加载中，网格显示得很好，但如果我按 F5、Ctrl-F5，网格不显示列，如图所示。

我检查了生成的 HTML 并且没有生成隐藏列的内容。 如果我将 ui-grid 放在标签外面，它总是按预期显示

首次上传

F5 或 Ctrl+F5 后

可以在菜单中看到所有列都被标记为如图所示

隐藏列刷新 ui-grid
外部选项卡始终有效

减少网络代码

    Service.prototype.getColumns = function () {
        return [
                        { field: 'branch_Name', displayName: commons.translate('branch_externalform_field_name_label'), enableCellEdit: false },
                        { field: 'productPackageProduct_Product_Name', width: '300', displayName: commons.translate('product_externalform_field_name_label'), enableCellEdit: false },
                        { field: 'productPackageProduct_ProductPackage_Name', displayName: commons.translate('productpackage_externalform_field_name_label'), enableCellEdit: false },
                        { field: 'measureUnit_Name', displayName: commons.translate('measureunit_externalform_field_name_label'), enableCellEdit: false },
                        { field: 'quantity', displayName: commons.translate('stock_selfform_field_quantity_label'), enableCellEdit: false },
                        { field: 'price', displayName: commons.translate('stock_selfform_field_price_label'), enableCellEdit: false },
                        { field: 'createdDate', cellFilter: 'date', displayName: commons.translate('stock_selfform_field_createddate_label'), enableCellEdit: false },
                        { field: 'buyerOfferCount', width: '60', displayName: commons.translate('buyeroffer_entity_name_pluralsimple'), enableCellEdit: false, enableSorting: false },
                        {
                            field: 'myCurrentBuyerOffer.unitaryPrice', width: '90', displayName: commons.translate('buyeroffer_html_fromstock_unitaryprice_label'), enableCellEdit: true, enableCellEditOnFocus: true, enableSorting: false,
                            editableCellTemplate: "<div class=\"bg-warning\"><form name=\"inputForm\"><input type=\"number\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\"  data-ng-model-options=\"{allowInvalid:true}\" data-z-float step=\"0.01\" min=\"0.01\" max=\"{{row.entity.price}}\" ng-pattern=\"/^[0-9]+(\.[0-9]{1,2})?$/\"></form></div>",
                        },
                        {
                            field: 'myCurrentBuyerOffer.quantity', width: '90', displayName: commons.translate('buyeroffer_html_fromstock_quantity_label'), enableCellEdit: true, enableCellEditOnFocus: true, enableSorting: false,
                            editableCellTemplate: "<div class=\"bg-warning\"><form name=\"inputForm\"><input type=\"number\" ng-class=\"'colt' + col.uid\" ui-grid-editor ng-model=\"MODEL_COL_FIELD\"  data-ng-model-options=\"{allowInvalid:true}\" data-z-float step=\"1\" min=\"0\" max=\"{{row.entity.quantity}}\"></form></div>",
                        },
                        { field: 'id', displayName: '', width: '100', rezisable: false, enableColumnMenu: false, enableSorting: false, enableCellEdit: false, enableCellEditOnFocus: false, enableFocus: false, cellTemplate: '<div class="text-center"><button class="btn btn-xs" ng-disabled=\"!grid.appScope.stockToOfferLogic.listConfiguration.buyerOfferReadyToSave(row.entity.myCurrentBuyerOffer)\" ng-class="{\'btn-success\': row.entity.myCurrentBuyerOffer.changed, \'btn-default\': !row.entity.myCurrentBuyerOffer.changed}" ng-click="grid.appScope.stockToOfferLogic.listConfiguration.saveNewOfferFromStock(row.entity.myCurrentBuyerOffer)"><i class="fa fa-save"></i></button><button class="btn  btn-xs" ng-if="grid.appScope.stockToOfferLogic.listConfiguration.showBuyerOfferRefreshButton(row.entity.myCurrentBuyerOffer)" ng-disabled=\"!grid.appScope.stockToOfferLogic.listConfiguration.buyerOfferCanRefresh(row.entity.myCurrentBuyerOffer)\" ng-class="{\'btn-danger\': row.entity.myCurrentBuyerOffer.changed, \'btn-default\': !row.entity.myCurrentBuyerOffer.changed}" ng-click="grid.appScope.stockToOfferLogic.listConfiguration.refreshBuyerOffer(row.entity.myCurrentBuyerOffer)"><i class="fa fa-refresh"></i></button><button class="btn btn-xs btn-success" ng-if="grid.appScope.stockToOfferLogic.listConfiguration.showBuyerOfferImplicationButton(row.entity.myCurrentBuyerOffer)" ng-click="grid.appScope.stockToOfferLogic.listConfiguration.acceptBuyerOffer(row.entity.myCurrentBuyerOffer.id)"><i class="fa fa-thumbs-o-up"></i></button></div>' },
        ];
    };

    <ul class="nav nav-tabs nav-tabs-ar">
        <li class="pointer" ng-class="{'active': filters.activeSection == 'buyer'}"><a data-target="#buyer" data-toggle="tab" ng-click="filters.activeSection = 'buyer'" translate="traderole_html_buyer_label"></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane" id="buyer" ng-class="{'active': filters.activeSection == 'buyer'}">
            <div class="panel panel-default">
                <div class="panel-heading">
                </div>
                <div class="panel-body">
                    <div ng-if="filters.activeSection == 'buyer'" class="gridStyle" external-scopes="states" ui-grid="stockToOfferLogic.listConfiguration.gridOptions" ui-grid-pagination ui-grid-edit ui-grid-cellnav custom-ui-grid-scroll></div>
                </div>
            </div>
            <h3></h3>
        </div>
     </div>

Answer 1

问题已使用 ui.grid.autoResize 解决。

我不知道为什么，但事实是网格（在选项卡内）不允许添加超过 10 个 columnDef。无论列的大小如何，如果我在第 4 个列被隐藏后添加 11 defs。所以，我的第一个想法是 ui-grid 无法计算网格的宽度，可能是因为标签包装器。在搜索为调整大小的容器刷新网格的方法时，我找到了模块 ui.grid.autoResize，它解决了地球上所有的问题。

ui-选项卡内的网格显示时没有列

ui-grid inside tab is displayed without columns

angularjs

bootstrap-tabs

twitter-bootstrap-3

angular-ui-grid