Question

我正在使用ui-grid在表格中显示数据。当我加载页面并离开几秒钟然后单击选项卡（包含ui-grid）时，ui-grid css break。它没有显示100％容器的ui-grid宽度。但是当我加载页面并且只需单击tab（包含ui-grid）时。 ui-grid显示完美，我的意思是宽度是容器的100％。我不知道是什么问题。这是代码，我正在努力：

JS：

$scope.gridOptions= {
            enableFiltering: true,
            enableGridMenu : true,
            enableRowSelection: true,
            enableSelectAll: true,

            selectionRowHeaderWidth: 50,
            // rowHeight: 35,
            // infiniteScrollRowsFromEnd: 50,
            // infiniteScrollUp: true,
            infiniteScrollDown: true,
            columnDefs : [
              { displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:'10%'},
              { displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}},
              { displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} }
            ]
}

HTML

<div class="grid m-b-20" ui-grid="gridOptions" ui-grid-move-columns ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-grouping ui-grid-infinite-scroll>
</div>

注意： ui-grid在Angular bootstrap Tab中

以下是折叠网格的快照：

enter image description here

Answer 1

您是否在页面加载时使用动画 - 可能是制表符还是模态？如果是这样，那么通常的解决方法就是我们在模态教程中使用的解决方法：http://ui-grid.info/docs/#/tutorial/110_grid_in_modal

问题是网格没有响应，它在渲染时获得了它的大小。如果您没有给定固定大小，则从容器大小中获取它。如果您的容器当时正在设置动画，则尺寸可能不是实际尺寸。

Answer 2

在间隔时间内使用 $ scope.gridApi.core.handleWindowResize（）; 此方法来解决此问题

onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
        //$scope.gridApi.grid.registerRowsProcessor($scope.singleFilter);
        gridApi.selection.on.rowSelectionChanged($scope, function(row) {
            $scope.selectedUser = row.entity.dev_id;
            console.log(row);
            console.log(row.grid.selection.lastSelectedRow.isSelected);
            /*$http.get('./api/ioni_developers/' + $scope.selectedUser).then(function(response) {
                if(row.grid.selection.lastSelectedRow.isSelected === true){
                    $scope.data.dev_id = response.data.dev_id;
                    $scope.data.dev_name = response.data.dev_name;
                    $scope.data.dev_email = response.data.dev_email;
                    $scope.selected = false;           
                }else{
                    $scope.data.dev_id = '';
                    $scope.data.dev_name = '';
                    $scope.data.dev_email = '';
                    $scope.selected = true;
                }
            })*/
        });
        $scope.selected = true;
         $interval( function() {
            $scope.gridApi.core.handleWindowResize();
          }, 500, 10);
    }

Answer 3

  $timeout(function () {
                $scope.gridApi.core.handleWindowResize();

            }, 500);
            $scope.gridApi.core.refresh();

这对我有用。

Answer 4

解决方法是添加width和rowHeight 用于行和单元格。正如我所指出的，这是一种解决方法，我确信还有其他方法可以做到这一点，但这是一个快速修复，应该让你至少得到你的东西：）

    $scope.gridOptions={
    //set the row height to a fixed length 
     rowHeight: 80,
                enableFiltering: true,
                enableGridMenu : true,
                enableRowSelection: true,
                enableSelectAll: true,
                selectionRowHeaderWidth: 50,
                infiniteScrollDown: true,
                columnDefs : [
{ displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:100},
                  { displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}, width:100},
                  { displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} , width:100}
                ]}

Answer 5

使用建议的轮询方法，在指定的等待之后调用该函数，因此每个宽度更改都会突然发生。当用户快速更改表格大小时，这会导致严重的抖动。

更好的方法是绑定resize处理程序，以在视口更改时调用resize函数

angular.element($window).bind('resize', () => {
        this.updateTableWidth();
    });

我的项目使用侧边栏，所以我考虑了边栏宽度或填充宽度（如果侧边栏是否打开），那么只需在表格包装上设置绑定到ng-style的变量

private updateTableWidth() {
    let width = this.$window.innerWidth;
    let modifier = (width >= 1280) ? this.sidebarWidth : this.paddingWidth;
    this.tableWidth = (width - modifier) + 'px';
}

<div ng-style="{'width': ctrl.tableWidth}">
    <div ui-grid></div> <!-- Whatever your grid is -->
</div>

Answer 6

这对我来说就像魅力一样有用！

在HTML模板中向ui网格标记添加.htaccess，在ng-style="windowResize"上，在范围内的$scope.windowResize函数中添加width: 100%。

因此，基本上onRegisterApi是ui-grid的默认函数，它在实际绘制网格时触发，因此基本上我们有条件地将宽度100％添加到网格并使其对所有视口都有响应。

Answer 7

从HTML ui-grid-resize-columns代码中删除div。

UI-Grid在页面加载时不会占用100％的宽度

7 个答案: