SlickGrid 100% wzrostu rodzica?

Próbuję użyć SlickGrid z jQuery Layout UI i chcę, aby SlickGrid zajmował 100% wysokości panelu nadrzędnego.

Problem polega na tym, że gdy SlickGrid jest utworzony, nie ma wierszy (część mojego interfejsu ajax ładuje dane później, a nie podczas ładowania strony), więc wysokość jest domyślnie ustawiona na coś w rodzaju 1px (plus wysokość nagłówków). Kiedy Ładuję dane później, nie widzę żadnego z wierszy.

Próbowałem ustawić element Dom SlickGrid na height: 100%;, ale to nic nie da. Jak wymusić, aby obszar roboczy SlickGrid zajmował 100% wysokości panelu, w którym się znajduje, nawet jeśli ma mniej wierszy danych?

Author: neezer, 2011-05-07
Source

5 answers

Zakończyłem pracę nad tym, używając kombinacji jQuery PubSub , metod accessor UI Layout i metody SlickGrid resizeCanvas(). Wygląda na to, że działa całkiem nieźle.

Uwaga: mój projekt korzystał już z pubsub, a ja Ładuję swoje moduły używając RequireJS .

Więc, w moim pliku modułu grid, zapisuję metodę, aby otrzymać nowy innerHeight panelu, w którym żyje, który zapisuje go do zmiennej lokalnej, a następnie wywołuje moją resize(); funkcję: 

$.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();
}

Wtedy, w moim init plik js (gdzie jest zdefiniowany układ), ustawiam poprawne publikowanie dla stanu początkowego i za każdym razem, gdy zmienia się panel środkowy: 

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]);
To chyba robi dokładnie to, czego chcę. Wiem, że to nie jest ogólne rozwiązanie, ale wygląda na to, że SlickGrid nie może tego zrobić sam.
 16
Author: neezer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-07 14:21:19

Mam zamiar dać odpowiedź, że nawet nie lubię, ale moje umiejętności javascript są ograniczone i jest to rozwiązanie używam, dopóki nie znajdę czegoś lepszego.

Zasadniczo biorę wysokość dokumentu i odejmuję wysokość innych elementów poza slickgrid, tak: 

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

"44" jest liczbą, która jest wystarczająco zbliżona do wysokości dodatkowej przestrzeni używanej wewnątrz slickgrid, itp.

 4
Author: Van Gale,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-06 22:12:24

Dla takich jak ja, którzy mają podobny błąd, ale inne okoliczności:

Z wiki- " Jawna szerokość i wysokość w kontenerze slickgrid są wymagane w znacznikach, w przeciwnym razie ciało siatki nie jest widoczne (height:1px), a siatka otrzymuje szerokość nagłówka siatki (width:100000px)."

Więc nie zapomnij dać głównej div siatki szerokość i wysokość !

Ps: nie sądzę, że dotyczy to tego pytania tutaj, ale to było jedyne pytanie, które pojawiło się up on searching "slick grid 1px bug": - /

 4
Author: Rohit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-17 12:43:32

Wzięłam odpowiedź Vana i dostosowałam ją w następujący sposób. Wciąż istnieją magiczne liczby, ale przynajmniej nie musisz wiedzieć o konkretnych pojemnikach.

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
Author: kat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-11 17:08:53

Mam nadzieję, że ta odpowiedź jest nadal przydatna, natknąłem się na nią w innej odpowiedzi: https://stackoverflow.com/a/10878955/4606828

W opcjach Slickgrid dodaj autoHeight: 

options = {
       ...
       autoHeight: true
       };

Slickgrid zawsze będzie rosnąć wraz ze swoją zawartością i możesz ustawić wysokość rodzica na dowolną.

 0
Author: Niel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:08:11