Zręczne wyrównanie siatki komórek rzędu

Question

Używam gładkiej siatki do wyświetlania danych w siatce. Slick grid oblicza wszystkie rzeczy, takie jak wysokość, szerokość, kiedy ta konkretna siatka jest tworzona, a siatka wygląda naprawdę dobrze. Kłopoty pojawiają się, gdy siatka jest tworzona, ale jest ukryta i podczas działania czegoś innego (zaznaczenie pola wyboru/opcji wyboru) powoduje wyświetlenie siatki. tym razem obliczenia idą w niepamięć, a nagłówki i komórki wiersza (kolumna nagłówka) nie są wyrównane w pionie.

Nie jestem w stanie zrozumieć, jak to kontrolować. Jeśli ktoś jeszcze cierpiał z powodu śliskiej siatki i był w stanie się bronić, proszę odsłonić amunicję.

antycypowaną Premanshu

Answer 1

miałem podobny problem, gdy dynamiczne wyświetlanie/ukrywanie siatki jQuery .show() i .hide().

Jeśli utworzysz znacznik div z display: none (więc jest on początkowo ukryty), kolumny siatki nie zostaną poprawnie zainicjalizowane. Aby temu zaradzić, tworzę znacznik div za pomocą visibility: hidden i usuwam ten styl przed użyciem metod .hide() i .show().

Mój kod wygląda mniej więcej tak:

<div id="mygrid" style="visibility: hidden"></div> 

    $grid = $("#mygrid") 

    grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions); 

    // Hide grid by default, remembering to remove the visibility style 
    $grid.hide(); 
    $grid.css("visibility", "visible"); 

    // You can now show and hide the grid using normal jQuery methods 
    $grid.show(); 
    $grid.hide(); 

Gdy jest inicjowany i właściwość visibility: hidden; jest usuwany, używam .hide() i .show() ale podejrzewam, że to będzie działać, jeśli manipulować display: none; przypisywać bezpośrednio, czy nie używasz JQuery.

Mam nadzieję, że to pomoże.

Answer 2

Jest to obsługiwane i nie powinno mieć miejsca. W rzeczywistości większość przykładów (w tym http://mleibman.github.com/SlickGrid/examples/example1-simple.html) ma tę samą implementację, aby upewnić się, że działa poprawnie.

Czy można dołączyć replikę jsfiddle.net?

Answer 3

Miałem dokładnie ten sam problem i po przeczytaniu odpowiedzi z @Premanshu i @Tin znalazłem inną drogę do rozwiązania.

Zasadniczo należy pominąć cykl zdarzeń i pozwolić DOM nadrobić zaległości przed wyświetleniem siatki, co pozwoli jej znaleźć odpowiednie szerokości kolumn. Użyłem setTimeout, aby to zrobić.

var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>"); 
    grid = new Slick.Grid(myGrid, data, columns, options); 


    // ... later on, append the container to the DOM and initialize SlickGrid 
    setTimeout(function(){ 
    myGrid.appendTo(that.$el); 
    grid.init(); 
    },1); 

Answer 4

Miałem podobny problem podczas korzystania z niego na stronie, która zawierała na nim twitter bootstrap css. Rozwiązaniem było nadpisanie rozmiaru pudełka do zawartości-boxa:

*, *: before, *: after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

prawdopodobnie powinien dowiedzieć się, które klasy naprawdę tego potrzebują, ale to posortowane rzeczy dla mnie.

Answer 5

udało mi się uzyskać to do pracy w bootstrap 3 (środowisko, w którym box-sizing jest ustawiony na border-box) tylko przy zastosowaniu box-sizing: content-box do .slick-header-column.

.slick-header > .slick-header-columns > .slick-header-column { 
    -webkit-box-sizing: content-box;                
    -moz-box-sizing: content-box; 
    box-sizing: content-box; } 

---

Wystarczy być ostrożnym przy modyfikacji border właściwości .slick-header-column. Udało mi się usunąć obramowanie po prawej stronie przez ustawienie koloru transparent:

.slick-header > .slick-header-columns > .slick-header-column:last-child { 
    border-right-color: transparent; 
} 

Uwaga: Można bawić się ze specyfiką biegów - selektor jesteś nadpisując jest:

.slick-header-column.ui-state-default { ... } 

Answer 6

Żadne z tych rozwiązań nie zadziałało, może dlatego, że kod SlickGrid zmienił się od 2012 roku :) Znalazłem rozwiązanie w tym post, jest podobne do @ Wex, ale z niewielkimi różnicami:

.slickgrid, 
.slickgrid *, 
.slick-header-column { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
} 

Gdzie .slickgrid jest selektorem elementu siatki siatki.

Answer 7

Rozwiązałem dla mnie. To, co robiłem: 1. Siatka Uruchomienie 2. Dołączanie danych do niego 3. Obecne go przy użyciu modalnej div zawierającego siatki

Aby rozwiązać zrobiłem tak: 1. Present go przy użyciu modalnej div zawierające siatkę 2. Uruchom sieć nr 3. Dołącz dane