ng-grid在初始加载时不显示所有列

时间:2017-04-20 08:25:49

标签: css angularjs angular-ui-grid ui-grid

在我的应用程序中,我使用的是ng-grid,我需要显示12列和大数据。但是ng-grid不会在初始加载时显示所有列。如果我通过调整列显示数据来对列进行任何细微更改。有没有办法在初始加载本身上显示数据..

网格定义

 <div ui-grid="gridOptions"
                             ui-grid-selection
                             ui-grid-resize-columns
                             ui-grid-move-columns></div>

网格数据绑定

                        $http.post('/api/search')
                        .success(function (data) {
                            $scope.gridOptions.data = data.Items;

                            if (data.Items.length == 0) {
                                $timeout(function () { notificationService.error("not found"}, 50);
                            }
                            else if (data.Items.length != 1) {
                                $alert.InlineWide('#' + $scope.modalId);
                            } else {
                                broadcast(data.Items[0]);
                            }
                            $(window).resize();                                
                        }).error(function (msg) {
                            notificationService.formattedError(msg);
                        });

示例网格列定义:

                   $scope.gridOptions = {
                    columnDefs: [
                        {
                            field: 'Number',
                            displayName: 'number',
                            minWidth: 50,
                            sort: { direction: 'asc', priority: 0 }
                        },..],
                    onRegisterApi: function (gridApi) {
                        gridApi.selection.on.rowSelectionChanged($scope, afterSelectionChange);
                    },
                    enableRowSelection: true,
                    enableRowHeaderSelection: false,
                    multiSelect: false,
                    enableColumnResize: true,
                    enableColumnMenus: false,
                    plugins: [new ngGridFlexibleHeightPlugin()]
                };

1 个答案:

答案 0 :(得分:0)

我通过设置网格的宽度,高度和填充余量最小高度来解决问题

<div ui-grid="gridOptions"
                             style="width:855px; height:300px"
                             ui-grid-selection
                             ui-grid-resize-columns
                             ui-grid-move-columns
                             fill-remainder-min-height="300"></div>