Question

我正在使用角度ui-grid来显示节目。我有一个产品只有7个记录，另一个产品有200个记录。默认情况下，当记录大于20时，最大行选择为20，当记录小于20时，网格将根据记录计数自动调整大小。

问题在于;当我在网格中加载7条记录时，网格的高度是根据7条记录保存而没有刷新页面，当我在搜索框中输入另外200条条目并提交时，它将所有记录分配给网格但是网格的大小与7条记录保持一致。

我需要根据记录使网格自动调整大小，使记录中页面中的20条记录大于或等于20。

这是来自grid指令的一些代码;

scope.configuration = {
            data: scope.data,
            exporterCsvFilename: 'testfile' + '.csv',
            exporterMenuPdf: true,
            enableSelectAll: true,
            // enablePaging: true,
            enablePaginationControls: true,
            paginationPageSizes: [10, 20, 30, 40, 50, 100],
            enableGridMenu: true,
            enableFiltering: true,
            paginationPageSize: (scope.largeGrid) ? 20 : 10,
            enableHorizontalScrollbar: 1,
            enableVerticalScrollbar: 0,

高度

scope.getGridHeight = function (data) {
                var length = (scope.configuration.paginationPageSize > data.length) ? data.length : scope.configuration.paginationPageSize;
                var rowHeight = (scope.autoHeightColumn) ? scope.getAutoHeight(data, scope.autoHeightColumn) : 30; // your row height
                var headerHeight = 50; // your header height
                var filterHeight = 62; // your filter height
                if (scope.autoHeightColumn) {
                    return rowHeight + headerHeight + filterHeight + 'px';
                }
                return length * rowHeight + headerHeight + filterHeight + 'px';
            };

            scope.$watch('configuration.paginationPageSize', function () {
                scope.gridHeight = scope.getGridHeight(scope.data);
                //kind of hack: as minification does not setting interpolated variable.
                $('#grid').css('height', scope.gridHeight);
            });

            scope.getAutoHeight = function (data, colum) {
                //Todo: Get pagination and data height separately
                var totalHeight = 0;
                for (var i = 0; i < data.length; i++) {
                    var columnHeight = data[i][colum].length;
                    if (columnHeight) {
                        columnHeight = (columnHeight / 12) * 23;
                    } else {
                        columnHeight = 23;
                    }
                    totalHeight += columnHeight;
                }
                return totalHeight;
            };

Answer 1

我们可以使用一些css覆盖来实现ui-grid自动高度。

    .ui-grid-viewport
    {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .ui-grid, .ui-grid-viewport
    {
        height: auto !important;
    }
    .ui-grid-viewport, .ui-grid-canvas
    {
        height: auto !important;
    }

    .ui-grid-row, .ui-grid-cell
    {
        height: auto !important;
    }
    .ui-grid-row div[role=row]
    {
        display: flex;
        align-content: stretch;
    }
    .ui-grid, .ui-grid-viewport
    {
        height: auto !important;
    }
    .ui-grid-viewport, .ui-grid-canvas
    {
        height: auto !important;
    }

角度ui网格自动高度不起作用

1 个答案: