Question

以下网页是一个包含三个不同标签的容器：上载数据集，购买数据集和集成数据集：

每个选项卡内容都是一个UI网格，我可以通过以下角度指令调用它：

<div class="form-top">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-uploaded" role="tab" aria-controls="nav-uploaded" aria-selected="true">
                Uploaded Datasets
            </a> 
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-bought" role="tab" aria-controls="nav-bought" aria-selected="false" >
                Bought Datasets
            </a>
            <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-integrated" role="tab" aria-controls="nav-integrated" aria-selected="false">
                Integrated Datasets
            </a>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-uploaded" role="tabpanel">
            <uploaded-grid></uploaded-grid>
            <!-- <div id="grid1" ui-grid="uploadedGridOptions" ui-grid-selection ui-grid-exporter class="grid"></div> -->
        </div>
        <div class="tab-pane fade" id="nav-bought" role="tabpanel">
            <bought-grid></bought-grid>
        </div>
        <div class="tab-pane fade" id="nav-integrated" role="tabpanel">
            <integrated-grid></integrated-grid>
        </div>
    </div>
</div>

，每个指令都包含以下HTML代码：

<div id="grid2" ui-grid="integratedGridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>

并与特定控制器链接：

var app = angular.module("integratedGridCtrl",[]);

app.controller('integratedGridCtrl', ['$http','$scope','$uibModal', function($http, $scope,$uibModal){
    var data = [
        {
            id: "Cox",
            title: "Carney",
            creationDate: "22/22/2019",
            description: "description"
        },
        {
            id: "Lorraine",
            title: "Wise",
            creationDate: "22/22/2019",
            description: "description"
        },
        {
            id: "Nancy",
            title: "Waters",
            creationDate: "22/22/2019",
            description: "description"
        }
    ];

    $scope.integratedGridOptions = {
        showGridFooter: true,
        showColumnFooter: true,
        enableFiltering: true,
        columnDefs: [
            { field: 'id', width: '*',  minWidth: 60},
            { name:  'title', field: 'title', width: '*',  minWidth: 60, displayName: 'title' },
            { field: 'creationDate', width: '*',displayName: 'creation Date',  minWidth: 60, cellFilter: 'date' },
            { field: 'description', width: '*', minWidth: 60 },             
        ],
        onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
        },
        rowTemplate: '<div ng-click=\"grid.appScope.detailPopup(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ui-grid-cell style="cursor: pointer"></div>',
        enableGridMenu: true,
        enableSelectAll: true,
        exporterCsvFilename: 'myFile.csv',
        exporterPdfDefaultStyle: {fontSize: 9},
        exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
        exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
        exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
        exporterPdfFooter: function ( currentPage, pageCount ) {
            return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
        },
        exporterPdfCustomFormatter: function ( docDefinition ) {
            docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
            docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
                return docDefinition;
            },
        exporterPdfOrientation: 'portrait',
        exporterPdfPageSize: 'LETTER',
        exporterPdfMaxGridWidth: 500,
        exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
        exporterExcelFilename: 'myFile.xlsx',
        exporterExcelSheetName: 'Sheet1'
    }   
    $scope.integratedGridOptions.data = data;
 }]);

前两个选项卡显示得很好，但是第三个选项卡从第一次单击到重新刷新之前不会显示列。

3rd Tab

Answer 1

尝试对网格执行ui-grid-auto-resize指令，如下所示：

<div id="grid2" ui-grid="integratedGridOptions" ui-grid-selection ui-grid-auto-resize 
                    ui-grid-exporter class="grid"></div>

角度Ui-Grid列未显示

1 个答案: