Угловая UI-сетка авто высота не работает - PullRequest
Новая
       10

Угловая UI-сетка авто высота не работает

0 голосов
/ 06 мая 2018

Я использую угловой 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;
            };

1 Ответ

0 голосов
/ 07 мая 2018

мы можем достичь автоматической высоты ui-grid, используя некоторые переопределения css. 

    .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;
    }
...