Używam sortowania interfejsu użytkownika jQuery, aby umożliwić sortowanie siatki tabeli. Wydaje się, że kod działa dobrze, ale ponieważ nie dodam szerokości do td
s, przeciąganie tr
go zmniejsza zawartość.
Na przykład; jeśli mój wiersz tabeli ma rozmiar 500 pikseli, kiedy zacznę przeciągać, zmieni się na 300 pikseli. Zakładam, że dzieje się tak, ponieważ w siatce nie określono szerokości. Dzieje się tak, ponieważ używam dwóch klas dla td
s ( fix
i liquid
).
fix
Klasa sprawia, że td
równa szerokości zawartości i liquid
sprawia, że td
szerokość 100%. To moje podejście do tabeli grid bez konieczności przypisywania szerokości do td
s.
Masz jakiś pomysł, jak zrobić sortowalną pracę z moim podejściem?
Odpowiedzi:
Tutaj znalazłem odpowiedź .
Zmodyfikowałem go nieznacznie, aby sklonować wiersz, zamiast dodawać szerokości do oryginału:
źródło
$(this).width($originals.eq(index).outerWidth());
Myślę, że to może pomóc:
źródło
Wybrana tutaj odpowiedź jest naprawdę fajnym rozwiązaniem, ale ma jeden poważny błąd, który jest widoczny w oryginalnych skrzypcach JS ( http://jsfiddle.net/bgrins/tzYbU/ ): spróbuj przeciągnąć najdłuższy wiersz ( God Bless You, Mr. . Rosewater ), a pozostałe szerokości komórek zapadają się.
Oznacza to, że ustalenie szerokości komórek w przeciągniętej komórce nie wystarczy - musisz również naprawić szerokości w tabeli.
JS Fiddle: http://jsfiddle.net/rp4fV/3/
Rozwiązuje to problem zwijania tabeli po przeciągnięciu pierwszej kolumny, ale wprowadza nową: jeśli zmienisz zawartość tabeli, rozmiary komórek są teraz ustalone.
Aby obejść ten problem podczas dodawania lub zmiany treści, musisz wyczyścić ustawione szerokości:
Następnie dodaj zawartość, a następnie ponownie popraw szerokość.
To wciąż nie jest kompletne rozwiązanie, ponieważ (szczególnie w przypadku tabeli) potrzebujesz symbolu zastępczego kropli. W tym celu musimy dodać na początku funkcję, która buduje symbol zastępczy:
JS Fiddle: http://jsfiddle.net/rp4fV/4/
źródło
$(".must-have-class").css("height", $(ui.item).outerHeight());
Wygląda na to, że klonowanie wiersza nie działa dobrze w IE8, ale oryginalne rozwiązanie tak.
Przetestowane za pomocą jsFiddle .
źródło
Wywołaj poniższy kod, gdy tabela jest gotowa do posortowania, dzięki czemu upewnisz się, że elementy td są ustalone z bez przerywania struktury tabeli.
źródło
th
równie dobrze dla jaktd
. Naprawia zwijanie się przeciągniętego wiersza i zwijanie tabeli, ale kosztem naprawy szerokości.jsFiddle
Po wielu różnych próbach po prostu wypróbowałem proste rozwiązanie, które uzupełnia rozwiązanie Dave'a Jamesa Millera, aby zapobiec kurczeniu się tabeli podczas przeciągania największego wiersza. Mam nadzieję, że to pomoże :)
źródło
Rozwiązanie Keitha jest w porządku, ale spowodowało małe spustoszenie w Firefoksie, które nie zsumowało parametrów, ale je wskazało. (Stary js typu struna ból w kolanie)
zastępując tę linię:
z:
Rozwiązuje problem. (Ponieważ js jest zmuszony traktować zmienne jako liczby zamiast łańcuchów)
źródło
Odpowiedź Dave'a Jamesa Millera zadziałała dla mnie, ale ze względu na układ kontenerów div na mojej stronie, element pomocniczy, który przeciąga kursor myszy, jest przesunięty w stosunku do pozycji mojej myszy. Aby to naprawić, do wywołania zwrotnego pomocnika dodałem następujący kod
Oto pełne wywołanie zwrotne z dodaną powyższą linią:
Dodałbym to jako komentarz do odpowiedzi Dave'a, ale nie miałem wystarczającej reputacji na tym koncie.
źródło
Wygląda na to, że
disableSelection()
metoda jest obecnie zła i przestarzała. Nie mogę już używać wprowadzania tekstu w wierszu z możliwością sortowania wMozilla Firefox 35.0
. Po prostu nie można już na nim skupić się.źródło
źródło
źródło
Zastosuj sortable do elementu tbody tabeli i po prostu ustaw helpera na 'clone', jak opisano w API jquery-ui
źródło