Question

我正在开发一个项目，我使用UI-Grid来显示用户列表。我为列定义中的每一列指定了宽度：“**”。在输出中，所有列都在左侧折叠。当我调整浏览器窗口大小或检查元素时，宽度会自动快速调整。但是第一次，所有列都显示为折叠状态。这是我的代码：

$scope.columns = [
        { field: 'name', name:'Name', width: "**", cellTooltip : false,enablePinning:true,
            cellTemplate:'<div class="ui-grid-cell-contents">'+
                            '<a ng-href="#/account/profile?id={$ grid.appScope.getUserID(grid, row) $}"> {$ grid.appScope.getUserRow(grid, row,"uname") $} </a>'+
                        '</div>'
         },
        { field: 'email', name:'Email', width: "**", cellTooltip : false,enablePinning:true },
        { field: 'role', name:'Role', width: "**", enableSorting: true,
            cellTemplate:'<div class="ui-grid-cell-contents"> '+
                                '{$ grid.appScope.getUserRow(grid, row,"role") $}'+
                                '<a ng-click="grid.appScope.assignRole({$ grid.appScope.getUserID(grid, row) $})"> add </a>'+
                        '</div>'
        },
        { field: 'isInvited', name:'Invitation status', width: "**", cellTooltip : false,enablePinning:true },
    ];

$scope.gridOptions = {

    showGridFooter: true,
    enableSorting: true,
    enableGridMenu: true,
    enableSelectAll: true,
    enableFiltering: true,
    enableHorizontalScrollbar : 1,
    paginationPageSizes: [10,25, 50, 100],
    useExternalPagination: true,
    columnDefs: $scope.columns,
    enableGridMenu: true,
    enableSelectAll: true,
    exporterCsvFilename: 'myFile.csv',
    exporterPdfDefaultStyle: {fontSize: 9},
    exporterPdfTableStyle: {margin: [10, 10, 10, 10]},
    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;
    },
    exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
    onRegisterApi: function(gridApi){
            $scope.gridApi = gridApi;
        $scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
            $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
        });

        $scope.gridApi.pagination.on.paginationChanged( $scope, function( currentPage, pageSize){
            $scope.getAppDetails(currentPage, pageSize);
        });
    }

};

Answer 1

我刚刚注意到，如果你调整窗口大小，它会正确渲染网格。因此，快速而肮脏的工作并不是真正意图作为解决方案，正在观察网格何时可见并在gridApi上调用grid.handleWindowResize（）。还有一个$ timeout，用于确保在选项卡完全显示后执行渲染。这是我的观察方式：

$scope.test = {isActive: false};
$scope.$watch('test.isActive', function (active, oldActive) {
    if(active) {
        $timeout(function () {
            $scope.gridApi.grid.handleWindowResize();
        });
    }
});

当宽度：指定“**”时，ui-grid列折叠

1 个答案: