Tabela

Powiązanie danych

Właściwości konfiguracyjne

Na karcie właściwości Konfiguracja można ustawiać i modyfikować właściwości konfiguracyjne elementu Tabela.

Właściwości konfiguracyjne wyglądu elementu Tabela znajdują się w poniższej tabeli:

Tabela 1. Właściwości konfiguracyjne wyglądu elementu Tabela

Właściwość konfiguracyjna wyglądu	Opis	Typ danych
Styl tabeli	Styl tabeli.
Styl koloru	Styl koloru elementu sterującego. Kolory odpowiadają zmiennym w podanej kompozycji.	Łańcuch
Wyróżnij wybór	Służy do zacieniania wybranych wierszy. Ta opcja nie działa, jeśli nie jest podany styl koloru.	Wartość boolowska
Szerokość	Służy do podawania szerokości tabeli. Szerokość jest wyrażana w pikselach (px), jako wartość procentowa (%) lub w firetach (em). Na przykład: 50 px, 20% lub 0,4 em. Jeśli nie jest podany typ jednostki, domyślnie używana jest jednostka px (piksele).	Łańcuch
Wysokość	Służy do podawania wysokości elementu sterującego, która jest wyrażana w pikselach (px) lub w firetach (em). Jeśli nie jest podany typ jednostki, domyślnie używana jest jednostka px (piksele). Wysokość nie uwzględnia nagłówka ani stopki. Jeśli podano wysokość, a wyświetlane wiersze nie mieszczą się w pionie w miejscu dostępnym dla treści tabeli, treść tabeli można przewijać w pionie.	Łańcuch
Zawijaj nagłówki kolumn	Zawija nagłówki kolumn w zależności od dostępnej w tabeli ilości miejsca.
Pokaż elementy wywoływane	Wywoływane menu i elementy sterujące są wyświetlane nad tabelą, jeśli nie została podana wysokość. Na przykład, jeśli ta opcja jest zaznaczona, element sterujący Okno wyboru daty i godziny jest wyświetlane nad tabelą. W przeciwnym razie element sterujący Okno wyboru daty i godziny jest osadzany w w komórce tabeli.	Wartość boolowska

Właściwości konfiguracyjne zachowania elementu Tabela znajdują się w poniższej tabeli:

Tabela 2. Właściwości konfiguracyjne zachowania elementu Tabela

Właściwość konfiguracyjna zachowania	Opis	Typ danych
Tryb wyboru	Służy do podawania liczby wierszy, które może wybrać użytkownik.	Łańcuch
Pokaż przycisk Usuń	Służy do pokazywania lub ukrywania przycisku usuwania wiersza.	Wartość boolowska
Pokaż stopkę	Służy do pokazywania lub ukrywania stopki.	Wartość boolowska
Pokaż przycisk Dodaj	Służy do pokazywania lub ukrywania przycisku dodawania wiersza. Jeśli tabela jest posortowana lub przefiltrowana, nowo dodany wiersz może nie zostać wyświetlony jako ostatni wiersz w tabeli lub może nie zostać w ogóle wyświetlony aż do momentu anulowania sortowania lub filtrowania. Uwaga: Należy także wybrać opcję Pokaż stopkę.	Wartość boolowska
Pokaż statystykę dotyczącą tabeli	Służy do wyświetlania w stopce statystyki dotyczącej tabeli. Na przykład: Wyświetlanie pozycji: 1–5 z 59. Uwaga: Należy także wybrać opcję Pokaż stopkę.	Wartość boolowska
Pokaż paginator	Służy do pokazywania lub ukrywania liczby stron. Paginator wyświetla tylko 5 stron i dlatego, w zależności od początkowej wielkości strony i liczby rekordów, strony mogą nie być kolejne (1, 2, 3...). Na przykład: Tabela ma 50 pozycji, a początkowa wielkość strony jest ustawiona na 5. Wyświetlane numery stron to 1, 3, 5, 7 i 10. Użytkownik może klikać przycisk Dalej, aby przejść kolejno przez strony, lub może użyć przycisków numerów stron, aby szybko przechodzić między stronami. Uwaga: Należy także wybrać opcję Pokaż stopkę.	Wartość boolowska
Pokaż element sterujący wielkością strony	Służy do pokazywania lub ukrywania elementu sterującego wielkością strony, który wyświetla liczbę wierszy na stronie.	Wartość boolowska
Początkowa wielkość strony	Liczba wierszy wyświetlanych na stronie.	Liczba całkowita

Właściwości konfiguracyjne kolumny elementu Tabela znajdują się w poniższej tabeli.

Uwaga: Te właściwości określają, w jaki sposób tabela będzie wyświetlana w czasie wykonywania.

Tabela 3. Właściwości konfiguracyjne kolumn elementu Tabela

Właściwość konfiguracyjna kolumn	Opis	Typ danych
Wyświetl jako	Sposób wyświetlania zawartości komórek: Widok formatki Jednolity widok formatki Prosty kod HTML Niestandardowy Elementy sterujące, które są zagnieżdżone w komórkach tabeli (takie jak Liczba całkowita i Okno wyboru daty), zwykle mają widoczną ramkę. Tabela także ma własną ramkę. Aby usunąć ramki zagnieżdżonych elementów sterujących, należy wybrać opcję Jednolity widok formatki. Jeśli używany jest widok formatki lub jednolity widok formatki, wybierz opcję showLabel, aby wyświetlić etykietę zagnieżdżonego widoku formatki.	Łańcuch
Widoczność	Widoczność kolumny.	Łańcuch
Sortowalne	Umożliwia sortowanie danych wg tej kolumny. Domyślnie można sortować tylko te kolumny, które są powiązane z typami prostymi. Aby można było sortować dane wg kolumny typu złożonego, należy w przypadku właściwości Wyświetl jako ustawić opcję Niestandardowy i trzeba użyć zdarzenia Przy istnieniu komórki niestandardowej. Na przykład: var div = document.createElement("div"); div.innerHTML = cell.row.data["firstName"]; cell.setSortValue(cell.row.data["firstName"]); return div;	Wartość boolowska
Opcje	Opcje formatowania danych w kolumnie (w zależności od typu danych). Okno wyboru daty datePattern Jeśli na przykład wymaganym formatem daty jest „2015-06-08”, należy wprowadzić następujący łańcuch: "datePattern": "yyyy-MM-dd". Liczba dziesiętna thousandsSeparator, decimalPlaces, decimalSeparator, postfix, prefix Na przykład: "decimalPlaces": 2, "decimalSeparator": ",", "thousandSeparator": " ", "postfix": "PLN" Liczba całkowita thousandSeparator Odsyłacz href Te opcje działają tylko wtedy, gdy kolumna jest wyświetlana jako kod HTML lub widok niestandardowy. W przypadku wyświetlania widoku niestandardowego w zdarzeniu Przy istnieniu komórki niestandardowej można użyć metody cell.getFormattedValue(), aby pobrać wartość z zastosowanym formatowaniem.	Łańcuch
CSS	Styl CSS do zastosowania do kolumny. Istnieje możliwość użycia stylu CSS (np. color:#00ff00) lub klas CSS. Jeśli w tym polu znajduje się dwukropek, element sterujący Tabela zakłada, że podano styl CSS. W przeciwnym razie zakłada, że podano co najmniej jedną nazwę klasy CSS.	Łańcuch
Szerokość	Szerokość kolumny wyrażona w pikselach (px), w firetach (em) lub jako wartość procentowa (%). Jeśli nie jest podana żadna jednostka, domyślnie jest używana jednostka px (piksele). Uwaga: Zaleca się pozostawienie szerokości jednej kolumny jako niezdefiniowanej, dzięki czemu przeglądarka będzie mogła obliczyć ilość pozostałego miejsca i przypisać je do kolumny, której szerokość nie jest podana.	Łańcuch
Etykieta	Etykieta kolumny.	Łańcuch
showLabel	Jeśli komórka jest wyświetlana w widoku formatki lub jednolitym widoku formatki, wyświetla lub ukrywa etykietę widoku formatki.	Wartość boolowska

Przykład

var autoObject = [];
autoObject[0] = {};
autoObject[0].name = "Dawid";
autoObject[0].favoriteSport = "Tenis";
autoObject[0].favoritePlayer = "Federer";
autoObject[1] = {};
autoObject[1].name = "Marek";
autoObject[1].favoriteSport = "Piłka nożna";
autoObject[1].favoritePlayer = "Messi";
autoObject

Usługa personelu po stronie klienta ma zmienną prywatną profile typu Profile[].

W usłudze personelu po stronie klienta należy utworzyć kopię formatki i połączyć ją z pierwszą formatką. W drugiej formatce należy zmienić etykietę elementu sterującego Tabela na Profile – formatka 2.

Uruchomienie formatki daje następujący wynik:

Należy kliknąć przycisk Dodaj i wprowadzić tekst w nowym wierszu. Na przykład:

Po kliknięciu przycisku OK jest ładowana druga formatka i dane, w tym nowo utworzony wiersz, są wyświetlane w tabeli.

Zdarzenia

Na karcie Zdarzenia można ustawiać i modyfikować procedury obsługi zdarzeń elementu sterującego. Zdarzenia mogą być uruchamiane w sposób programowy lub w wyniku interakcji użytkownika z elementem sterującym. Informacje na temat definiowania i kodowania zdarzeń można znaleźć w sekcji Zdarzenia definiowane przez użytkownika. Element Tabela ma następujące typy procedur obsługi zdarzeń:

• Przy ładowaniu: aktywowana przy ładowaniu tabeli. Na przykład:

  me.setPageIndex(0);

• Przy istnieniu komórki niestandardowej: aktywowana przy ładowaniu komórki z niestandardowymi opcjami wyświetlania (ustawionymi w konfiguracji elementu sterującego Kolumny). Aby użyć tego zdarzenia, należy w przypadku właściwości Wyświetl jako ustawić opcję Niestandardowy w konfiguracji elementu sterującego Kolumny. Tego zdarzenia można także użyć, aby ustawić metodę cell.setSortValue(cell.value) dla typów złożonych. Na przykład:

  var div = document.createElement("div"); 
  div.innerHTML = cell.row.data[cell.varName]; 
  return div;

• Przy ładowaniu wierszy: aktywowana przy wyświetlaniu wierszy. To zdarzenie ma zastosowanie tylko w przypadku tabel z podziałem na strony. Na przykład:

  alert("Wszystkie wiersze " + (all ? "" : "NOT") + " zostały załadowane");

• Przy wybraniu wiersza przez użytkownika: aktywowana przy wybraniu wiersza przez użytkownika. Na przykład:

  alert("Indeks wybranego wiersza to " + row.index);

• Przy dodawaniu wiersza przez użytkownika: aktywowana, gdy użytkownik dodaje wiersz za pomocą przycisku Dodaj wiersz. Jeśli ta procedura zwróci obiekt JavaScript, obiekt zostanie dodany jako nowy wiersz, a w przeciwnym razie zostanie dodany pusty obiekt. Na przykład:

  alert("Indeks wybranego wiersza to " + row.index);

• Przy usuwaniu wiersza: aktywowana, gdy użytkownik próbuje usunąć rekord. Jeśli zdarzenie zwróci wartość fałsz, rekord nie zostanie usunięty. Tego zdarzenia można użyć do żądania od użytkownika potwierdzenia przed usunięciem rekordu. Na przykład:

  return confirm("Czy na pewno chcesz usunąć pozycję " + item.str1);

Metody

Szczegółowe informacje o metodach dostępnych w elemencie Tabela znajdują się w opisie interfejsu JavaScript API Tabela.

Dodatkowe zasoby

Informacje na temat tworzenia formatki zawiera sekcja Budowanie formatek.
Informacje o standardowych właściwościach (Ogólne, Konfiguracja, Pozycjonowanie, Widoczność i Atrybuty HTML) zawiera sekcja Właściwości widoku formatki.