Отключить прокрутку в Angular UI ng-grid?

Мы хотели бы использовать Angular UI ng-grid, но не можем найти возможность сообщить области просмотра в сетке, чтобы она не устанавливала автоматическое переполнение и не прокручивала.

Мы хотели бы сделать так, чтобы высота таблицы/сетки была динамической в ​​зависимости от размера количества строк в нашей сетке. У нас есть фиксированное максимальное количество строк, поэтому нас мало беспокоит наличие слишком большого количества строк в DOM.

Любые предложения о том, куда пойти?


angularjs angular-ui ng-grid
person RullDawg    schedule 16.08.2013    source источник

Ответы (4)


arrow_upward
8
arrow_downward

Недавно я столкнулся с теми же проблемами и нашел решение на странице https://groups.google.com/forum/#!topic/angular/KiBXP3eKCDY

Вы хотите, чтобы ng-grid инициализировался после того, как у вас есть данные.

Следующее решение требует использования angular-ui:

<div ui-if="dataForGrid.length>0" ng-grid="gridOptions" ng-style="getTableStyle()"  />

$scope.getTableStyle= function() {
   var rowHeight=30;
   var headerHeight=45;
   return {
      height: ($scope.dataForGrid.length * rowHeight + headerHeight) + "px"
   };
};
person Dharmesh    schedule 19.12.2013
comment
Попробовал, написал: ng-style=height: {{formData.watchCountData.length * 30}}px›, но не работает :( - person Dejell; 16.04.2014

arrow_upward
10
arrow_downward

Добавление этого в ваш CSS решит вашу проблему:

.ngViewport{
    height:auto !important;
}
.ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel   {
   width: 100% !important;
}
.ngRow {
   border-bottom:none !important;
}
person suf    schedule 20.05.2014
comment
Я бы исключил .ngViewport из второго списка и заменил .ngTopPanel на .ngHeaderContainer. Предполагается, что ngViewport получает свой размер от ngCanvas так же, как ngTopPanel должен работать с ngHeaderContainer. - person jwg; 28.11.2014

arrow_upward
6
arrow_downward

В вашем CSS вы можете попробовать переопределить height из div, содержащих строки, чтобы строки не переполняли контейнер:

.ngViewport {
  height: auto !important;
}

Вы также можете заполнить пустое пространство, которое ng-grid оставляет для полосы прокрутки, цветом фона строки (хотя, к сожалению, последняя ячейка данных не будет расширяться, чтобы заполнить пробел):

.ngCanvas {
   width: 100% !important;
}
.ngRow {
   width: 100% !important;
}

В зависимости от макета таблицы вам может понадобиться изменить и некоторые другие стили, но это основные. Также будьте осторожны, чтобы не установить высоту для всего ngGrid.

person jason_ruz    schedule 27.02.2014
comment
Такой подход, безусловно, работает... но он выглядит неправильно, потому что строки не расширяются на всю ширину в столбец полосы прокрутки, который больше не виден. - person CalvinDale; 28.02.2014
comment
Да, раньше я этого не замечал. Я надеялся, что CSS будет проще реализовать, но, к сожалению, это не так. :( Я обновил свой ответ, но в конце все еще есть мертвое пространство, где должна была быть полоса прокрутки - я не понял, как сделать так, чтобы последняя ячейка соответствовала оставшейся ширине. - person jason_ruz; 28.02.2014
comment
Кажется, это работает для меня. Убрано пустое пространство там, где раньше была полоса прокрутки, просто есть некоторая странность с границей ячейки в конце столбца, но я могу с этим смириться — стало лучше, чем было раньше. - person m.e.conroy; 28.03.2014
comment
Если вы также установите .ngFooterPanel и .ngTopPanel на width: 100% !important, это зафиксирует крайнюю правую границу таблицы. До этого он у меня пропадал. - person m.e.conroy; 28.03.2014
comment
Итак, какова будет высота стиля сетки? - person Dejell; 16.04.2014
comment
+1 за напоминание не устанавливать высоту для всего ngGrid, я совсем забыл об этом - person alamoot; 18.11.2014

arrow_upward
5
arrow_downward

да, есть плагин, который предлагает такую ​​возможность: ng-grid-flexible-height.js

вы можете увидеть plunker, как он используется

person Vinod Louis    schedule 17.08.2013
comment
Винод. Спасибо, но ваш плункер не соответствует тому, что я просил. Я хочу, чтобы сетка регулировала свою высоту в зависимости от количества строк. В конечном счете, мне не нужны полосы прокрутки в сетке. Вместо этого я хочу использовать всю полосу прокрутки документа. - person RullDawg; 21.08.2013
comment
Если я неправильно понимаю ваши требования, вам не нужна полоса прокрутки в сетке, но у планкера также нет полосы прокрутки в сетке, и в соответствии с количеством строк регулируется высота - person Vinod Louis; 21.08.2013
comment
Я добавил больше строк в ответвление вашего плункера Обновленный плункер. Я вижу таблицу высотой около 10 строк, но в сетке их более 50. Я вижу полосу прокрутки в сетке. - person RullDawg; 21.08.2013
comment
Я вижу то же самое, что упоминал RullDawg - person Sara; 15.05.2015