SlickGrid 100% высота родителя?

Я пытаюсь использовать SlickGrid С jQuery Layout UI, и я хочу, чтобы SlickGrid занимал 100% высоту родительской панели.

проблема в том, что при создании экземпляра SlickGrid у него нет строк (часть моего интерфейса ajax загружается в данные позже, а не при загрузке страницы), поэтому высота по умолчанию устанавливается примерно в 1px (плюс высота заголовков). Когда я загружаю данные позже, я не вижу ни одной из строк.

Я попытался установить Элемент SlickGrid DOM в height: 100%;, но это ничего не даст. Как я могу заставить холст SlickGrid занимать 100% высоту панели, в которой он живет, даже если у него меньше строк данных?

13
jquery layout slickgrid

5 ответов

Я закончил работу вокруг этого, используя комбинацию jQuery PubSub, методы доступа к макету пользовательского интерфейса и SlickGrid resizeCanvas() метод. Кажется, работает довольно хорошо.

Примечание: мой проект уже использовал pubsub, и я загружаю в свои модули, используя RequireJS.

Итак, в моем файле модуля сетки я подписываюсь на метод получения новой внутренней высоты панели, в которой он живет, что сохраняет его в локальной переменной, а затем вызывает my resize(); функция:

$.subscribe("units/set_grid_height", function (new_height) {
  grid_opts.height = new_height;
  resize();
});

// ...

// grid = the jQuery element that represents the SlickGrid
// slick = the instantiated slickgrid
function resize() {
  grid.css('height', grid_opts.height);
  slick.resizeCanvas();
}

затем в моем файле init js (где определен макет) я настраиваю правильную публикацию для начального состояния и каждый раз, когда центральная панель изменяется:

layout = $('body').layout({
  center: { 
    onresize: function (name, el, state, opts, layout_name) { 
      $.publish("units/set_grid_height", [state.innerHeight]);
    }
  }
});

$.publish("units/set_grid_height", [layout.state.center.innerHeight]);

это, кажется, делает именно то, что я хочу. Я знаю, что это не общее решение, но не похоже, что SlickGrid может сделать все это самостоятельно.

16

Я собираюсь дать ответ, который даже мне не нравится, но мои навыки javascript ограничены, и это решение, которое я использую, пока не найду что-то лучше.

в основном, я беру высоту документа и вычитаю высоту любых других элементов за пределами slickgrid, например:

  $("#id-of-slickgrid-container").height(
      $(document).height() -
      $("#header").outerHeight() -
      $("#nav").outerHeight() -
      $("#footer").outerHeight() - 44
  );

"44" - это фальсифицированное число, которое достаточно близко к высоте дополнительного пространства, используемого внутри slickgrid, и т. д.

4

для таких, как я, кто получил аналогичную ошибку, но разные обстоятельства:

с wiki - "явные ширина и высота на контейнере slickgrid требуются в разметке, в противном случае тело сетки не отображается (высота:1px), и сетка получает ширину заголовка сетки (ширина:100000px)."

поэтому не забудьте дать основной сетке div ширину и высоту !

PS: Не думаю, что это относится к этому вопросу, но это было единственный вопрос, который выскочил при поиске "slick grid 1px bug": -/

4

магия чисел, но, по крайней мере, вам не нужно знать о конкретных контейнерах.

HTML:

<div id="myGridSizer"></div>
<div id="myGrid"></div>

CSS:

#myGrid {
    width: 100%;
}

#myGridSizer {
    top: 73px;
    bottom: 73px;
    width: 0;
    position: absolute;
}

JavaScript:

$("#myGrid").height($('#myGridSizer').outerHeight());
grid = new Slick.Grid("#myGrid", dto.data, dto.columns, options);
0

Я надеюсь, что этот ответ по-прежнему полезен, я наткнулся на него в другом ответе:https://stackoverflow.com/a/10878955/4606828

в опции Slickgrid добавить autoHeight:

options = {
       ...
       autoHeight: true
       };

Slickgrid всегда будет расти с его содержанием, и вы можете установить высоту родителя на что угодно.

0