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

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

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

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

Ответ 1

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

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

Итак, в моем файле модуля сетки я подписываюсь на метод получения нового innerHeight на панели, в которой он живет, что сохраняет его в локальной переменной, а затем вызывает мою функцию 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 может сделать все это самостоятельно.

Ответ 2

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

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

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

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

Ответ 3

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

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

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

ps: Не думайте, что это относится к этому вопросу здесь, но это был единственный вопрос, который возник при поиске "пятнистой сетки 1px-ошибка": -/

Ответ 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);

Ответ 5

Я надеюсь, что этот ответ по-прежнему полезен, я наткнулся на него в другом ответе: fooobar.com/info/922932/...

В параметрах Slickgrid добавьте autoHeight:

options = {
       ...
       autoHeight: true
       };

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