Przejdź do głównej zawartości

Droptables : Stół do stylizacji

1. Formatuj w tabeli

Na pasku narzędzi możesz ustawić styl komórki, taki jak: czcionka, rozmiar czcionki, styl tekstu, kolor tła komórki, kolor tekstu, wyrównanie komórki w poziomie i pionie,... Można go zastosować do pojedynczej komórki lub wielu komórek.

 

format tabeli

 

Wysokość wiersza i szerokość kolumny można określić w pikselach. Przejdź do Menu Format > Zastosuj rozmiar kolumny/linii , a następnie wybierz Zmień rozmiar kolumny / Zmień rozmiar wiersza . W wyskakującym okienku możesz wybrać zakres i ustawić piksele dla kolumn lub wierszy. Kliknij Gotowe , aby zakończyć.

 

rozmiar wiersza-kolumny

 

 

2. Opcje motywu i sortowania

W każdej tabeli można znaleźć opcję wyboru motywu w menu Motyw . Wystarczy kliknąć motyw, aby go zastosować.

 

wybór motywu

 

Jeśli masz już dane w tabeli i zastosujesz motyw, wszystkie dane zostaną usunięte. Jeśli zastosujesz motyw do nowej tabeli, przykładowe dane i styl zostaną dodane i można je edytować.

W tym samym motywie menu > Alternatywne kolory funkcja „Automatyczne stylizowanie” pomaga pokolorować linię w tabeli za pomocą stylów nagłówka i stopki . Możesz wybrać style szablonów lub stworzyć własne w ustawieniach wtyczki.

 

alternatywny kolor

 

Parametr sortable pozwala na sortowanie danych AJAX w interfejsie użytkownika. Możesz zobaczyć w menu Format > Sortuj .

 

sortable-and-filter-table

 

Wyrównanie tabeli polega na wyrównaniu elementu div zawierającego całą tabelę, na przykład wyśrodkowanie całej tabeli. Możesz znaleźć w Menu Format > Wyrównanie tabeli .

 

wyrównanie tabeli

 

Opcjonalnie dostępne jest również podświetlenie komórki. W konfiguracji można włączyć opcję Linia, Kolumna lub Obie opcje . Domyślnie jest wyłączona. Możesz dostosować kolor i krycie podświetlenia.

 

podświetlanie tabeli

 

3. Dodaj podpowiedź do komórek

Dostępna jest również podpowiedź po najechaniu myszą na komórkę (należy aktywować w opcjach komponentów). W każdej komórce w tabeli możesz zobaczyć opcję Tooltip po kliknięciu prawym przyciskiem myszy.

 

etykietka tabeli komórek

 

Możesz ustawić szerokość podpowiedzi w pikselach. Spowoduje to wyświetlenie podpowiedzi z edytorem do edycji.

 

edytor podpowiedzi

 

Dodaj treść i zapisz, gotowe! Etykietka wyświetli się po stronie publicznej po najechaniu myszką.

 

przeciągnij etykietkę

 

4. Administracja ACL i Frontend

Możliwe jest zarządzanie tabelami z interfejsu Joomla. Z menedżera menu Joomla dodaj element Nowe menu i wybierz jako typ Zarządzaj tabelami i wybierz Droptables - Domyślny jako szablon.

 

menu - droptables

 

Oto, co możesz zobaczyć Droptables Manager z frontendu.

 

Droptables -frontend

 

Uwaga: Aby wyświetlić interfejs menedżera tabel z pełnym ekranem na interfejsie, wybierz Styl szablonu> Droptables .

 

Możesz użyć listy ACL grupy użytkowników Joomla, aby kontrolować działania związane z edycją tabeli. Po pierwsze, aby ustawić, kto może przeglądać tabele, należy przejść do User Roles w Droptables .

 

edycja frontend-table

 

Właściciela tabeli można ustawić w menu Tabela > Dostęp do tabeli.

 

user-group-acl

 

5. Zamrażanie rzędów i kolumn

Zamrażanie kolumny

Zamrażanie kolumn jest dostępne w menu Format > Opcje responsywne . Możesz zamrozić do 5 kolumn. Liczy się od pierwszego płk.

 

kolumna zamrażająca

 

Aby zamrozić kolor/wiersz istnieje dodatkowa opcja, która pozwala ustalić wysokość stołu (ponieważ kontener stołu może mieć nieskończoną wysokość).

 

wysokość stołu

 

Po wybraniu kolumny do zamrożenia będziesz mógł przewijać tabelę i zawsze wyświetlać ustaloną kolumnę.

 

naprawianie wyświetlania linii

 

Zamrażanie rzędów

Możesz go znaleźć w Menu Format > Nagłówek tabeli , stąd możesz włączyć opcję i ustawić wiersze do zamrożenia (do 5 wierszy).

 

wiersz-zamrożenie-nagłówka-tabeli

 

Jeśli chcesz ustawić wysokość stołu, wróć do opcji responsywnych.

Następnie pierwszy wiersz zostanie zamrożony na interfejsie użytkownika zgodnie z ustawieniem.

 

zamrażanie wierszy

 

6. Filtrowanie danych kolumn

Opcja filtrowania jest dostępna w Menu Format > Filtry . Możesz go aktywować, klikając, aby włączyć pola filtrowania danych publicznych.

 

filtr sortujący

 

Przykład filtrów:

 

filtr danych

 

7. Wypełnienie komórki i promień obramowania

Możesz znaleźć ikonę obramowania na pasku narzędzi, która pomaga dostosować dopełnienie i promień obramowania w komórce.

 

padding-border

 

 

8. Niestandardowy CSS

Zróbmy krok dalej. Jeśli jesteś projektantem stron internetowych z umiejętnościami edycji CSS, możesz dodać CSS w menu Format > Niestandardowy CSS .

 

niestandardowe CSS

 

Komórki, wiersze, kolumny mają współrzędne do identyfikacji każdego z nich i zastosowania do niego niestandardowego kodu CSS. R to wiersz, C to kolumna. Tutaj jest wiersz 1 (r1), kolumna 4 (c4) = dtr1 dtc4

 

współrzędne css

 

Kod CSS jest kolorowany za pomocą lustrzanego odbicia kodu. Kod CSS może być mniej kodu, to też działa!

 

css-custom-table

 

9. Responsywne tabele Joomla

Czy moje tabele reagują, czy używają przewijania na małych urządzeniach?

Ukrywanie kolęd

Droptables obsługują responsywny projekt z opcjonalnym narzędziem priorytetowym. Domyślnie funkcja responsywna jest wyłączona, wystąpi przepełnienie (które działa świetnie na urządzeniach mobilnych). Aby skorzystać z Ukrywanie Cols , należy przejść do Menu Format > Opcje responsywne.

 

responsive-hiding-col

 

Tryb responsywny jest zaawansowany, możesz zdefiniować priorytet ukrywania kolumn w rozmiarach mobilnych.
Gdy kolumny są ukryte, zostanie wyświetlone menu mobilne z polem wyboru, aby wymusić wyświetlanie/ukrywanie kolumn. Rozmiar kolumny jest ustalany podczas edycji tabeli. Jeśli rozmiar wszystkich kolumn jest zbyt duży dla kontenera, wystąpi przepełnienie i będziesz mógł łatwo przewijać na urządzeniach mobilnych.

Tabela ze zwojem (lepiej dla małej ilości kolumn)

 

responsywne przewijanie tabeli

 

Tabela z ukrytą kolumną (lepiej dla dużej ilości kolumn)

 

responsive-table-cololumn-hide

 

Powtarzający się nagłówek

To kolejna opcja, jeśli chcesz wstawić tabelę na małym obszarze witryny. Powinieneś przejść do menu Format > Opcje responsywne. Następnie wybierz opcję Typ responsywny > Powtarzany nagłówek.

 

powtórzony nagłówek

 

Będą dostępne opcje dostosowania zgodnie z Twoim żądaniem:

  • Responsywny punkt przerwania ( piksele ): wybierz wartość punktu przerwania w pikselach, aby określić, kiedy tabela będzie przełączać się w ten tryb responsywny
  • Responsive max-height (px): gdy tryb responsywny jest aktywny, w zależności od wartości punktu przerwania, zdefiniuj maksymalną wysokość, aby uniknąć bardzo długiej tabeli
  • Styl responsywny : zastosuj domyślny styl dla tego trybu responsywnego lub użyj kolorów tabeli

Następnie możesz zobaczyć, jak będzie wyglądać tabela na interfejsie.

 

powtórzony nagłówek frontend

 

10. Pobierz tabelę

Aby udostępnić swój stół publicznie, przejdź do Menu Tabela i zaznacz przycisku Eksportuj Excel . Typ pliku będzie *.xlsx podczas pobierania na interfejsie użytkownika.

 

Eksport-Excel

 

11. Paginacja

Funkcję tę można znaleźć w menu Format > Paginacja w każdej edycji tabeli. Użyj przycisku przełączania, aby włączyć i wybrać liczbę wierszy do wyświetlenia na stronie.

 

paginacja-opcja

 

12. Format dla pojedynczych komórek 

Możesz ustawić format: data, godzina, waluty, liczba dla pojedynczej komórki w Droptables . Najpierw należy wybrać a/wiele komórek. Następnie przejdź do menu Format > Data i godzina.

 

data-czas-komórki

 

Następnie waluty i liczby można wykonać w ten sam sposób.

 

13. Wydrukuj tabelę na interfejsie

Czasami trzeba wydrukować tabelę. Aby więc wyświetlić przycisk Drukuj na interfejsie, najpierw należy przejść do Tabeli menu i zaznaczyć opcję przycisku Drukuj

 

przycisk drukowania