Zaznaczenie drzewa

Artykuł opisuje, jak pobrać i ustawić zaznaczone pozycje w drzewie.

Pobieranie zaznaczonych elementów drzewa

Każdy element treeitem w drzewie może być zaznaczony indywidualnie. Dodając atrybut seltype do drzewa, ustawiamy wartość single, to zezwoli na zaznaczenia tylko jednego wiersza na raz. W przeciwnym wypadku użytkownik mógłby zaznaczać wiele wierszy na raz i to niekoniecznie sąsiednich. Drzewo zawiera kilka funkcji służących do określania, czy pozycja została zaznaczona.

Podtrzymanie zdarzenia zaznaczenia

Najpierw zobaczmy, jak możemy decydować o tym, czy element jest zaznaczony. Uchwyt zdarzenia onselect() może być dodany do drzewa. Kiedy użytkownik zaznaczy jakiś element drzewa (tree), uchwyt ten jest wywoływany. Użytkownik ma także możliwość zmiany zaznaczenia poprzez używanie klawiszy strzałek na klawiaturze. Jeśli użytkownik przytrzyma naciśnięty klawisz kursora do szybkiego przewinięcia pozycji, to uchwyt zdarzenia nie zostanie wywołany do momentu, aż użytkownik się zatrzyma. Wynikiem będzie wykonanie postępu. Znaczy to także, że podświetlenie będzie się pojawiać na kilku pozycjach nawet przez zaznaczone zdarzenia nie będące nigdy aktywne dla tych pozycji.

Składnia uchwytu zdarzenia onselect() przedstawiona jest poniżej:

<tree id="treeset" onselect="alert('Zaznaczyłeś cokolwiek!');">

Zaznaczenie drzewa

Drzewo ma własność currentIndex, która może być użyta, by uzyskać aktualnie zaznaczenie pozycji, gdzie pierwszym wierszem jest 0.

Pozycje pochodnych wiersza są zawarte w sumie zaraz po głównych. To znaczy, że jeżeli są tam 3 pozycje najwyższego poziomu i każda ma po dwie pochodne, będzie to w sumie 9 pozycji. Pierwsza pozycja (przy indeksie 0) będzie pierwszą pozycją najwyższego poziomu. Następna pozycja przy indeksie 0 będzie od niego pierwszą pochodną. Druga pochodna pozycja będzie się znajdowała pod indeksem 2, a druga główna pozycja będzie miała indeks 3 itd.

Na obrazku z prawej strony pokazanych jest osiem wierszy, z których to dwa są zaznaczone. Pierwszy zaznaczony wiersz jest o indeksie 4, a drugi ma indeks 7. Rzędy, które są ukryte, nie zaliczają się do sumy indeksu.

Wielokrotne zaznaczenie

Dla drzew umożliwiających wielokrotne zaznaczenie, otrzymanie listy zaznaczonych wierszy jest bardziej skomplikowane. Widok drzewa ma własność zaznaczenia, która przetrzymuje informacje o zaznaczonych wierszach. Bieżące zaznaczenie będzie obiektem TreeSelection. Widok nie musi wdrażać tego obiektu samodzielnie, drzewo określi obiekt zaznaczenia dla własności widoku zaznaczenia, kiedy widok będzie dołączony do drzewa. Informacje o zaznaczeniu możemy uzyskać od drzewa, używając własności widoku drzewa (view). Możemy użyć metod obiektu zaznaczenia (selection) w celu uzyskania informacji o zaznaczonych pozycjach lub w celu modyfikacji zaznaczenia.

Ponieważ zaznaczone pozycje w drzewie wielokrotnego zaznaczenia niekoniecznie mogą być kolejnymi, możemy uzyskać każdy blok przylegający używając funkcji getRangeCount() i getRangeAt(). Pierwsza funkcja zwraca liczbę znajdujących się tam obszarów. W przypadku, gdy zaznaczona jest tylko jedna, wartość będzie wynosiła 1. Wtedy możesz napisać pętlę dla obszarów, wywołując getRangeAt(), żeby pobrać aktualne indeksy początku i końca obszaru.

Funkcja getRangeAt() pobiera trzy argumenty:

• Pierwszym jest indeks obszaru.
• Drugim będzie obiekt wypełniony przez funkcję z indeksem pierwszego zaznaczonego elementu.
• Trzecim argumentem jest obiektem wypełnionym indeksem ostatnio zaznaczonej pozycji.

Przykład getRangeAt

var start = new Object();
var end = new Object();
var numRanges = tree.view.selection.getRangeCount();

for (var t = 0; t < numRanges; t++){
  tree.view.selection.getRangeAt(t,start,end);
  for (var v = start.value; v <= end.value; v++){
    alert("Pozycja " + v + " jest zaznaczona.");
  }
}

Tworzymy dwa obiekty, nazwane 'start' i 'end'. Następnie powtarzamy w obszarach liczbę, która jest zwrócona przez funkcję getRangeCount(). Funkcja getRangeAt() jest wywołana przyjmując obszar indeksu obiektu na początku i na końcu. Funkcja przyporządkuje 'start' i 'end' dodając do własności 'value'. Jeżeli więc pierwszy obszar jest od trzeciej do siódmej pozycji, 'start.value' będzie 2 (pamiętaj, że indeksy zaczynają się od 0, więc odejmujemy jeden), a 'end.value' będzie równe 6. Ostrzeżenie jest pokazywane dla każdego indeksu.

Jeżeli chcesz wiedzieć, który wiersz jest zaznaczony, możesz użyć funkcji isSelected(). Pobiera indeks wiersza jako argument i zwraca true, jeżeli wiersz jest zaznaczony.

alert(tree.view.selection.isSelected(3));

Modyfikowanie zaznaczenia drzewa

Przedmiot zaznaczenia ma pewną liczbę funkcji, które mogą zostać użyte w celu zmiany zaznaczenia. Najprostszą funkcją jest funkcja select(), która znosi zaznaczenie dowolnego, aktualnie zaznaczonego wiersza i zaznacza dowolny inny. Na przykład następujący kod zaznaczy wiersz o indeksie 5:

tree.view.selection.select(5);

Zauważ, że nie powinniśmy zmienić tylko wartości currentIndex w celu zmiany zaznaczenia. Zamiast tego powinniśmy użyć funkcji zaznaczenia jak w powyższym przykładzie. Możliwe jest zaznaczenie wszystkich wierszy za pomocą funkcji selectAll(). Zauważ, że wiersze zagnieżdżały się wewnątrz kontenerów, te które nie są otwarte, nie zostaną zaznaczone. Oczywiście to będzie miało efekt tylko w przypadku drzew z wielokrotnym zaznaczeniem. Jest też funkcja clearSelection() do wyczyszczenia zaznaczenia oraz funkcja invertSelection do odwracania zaznaczenia, która odznacza zaznaczenie, a zaznacza te, które nie były zaznaczone.

W celu zaznaczenia określonych wierszy zastosuj funkcję rangedSelect(), która zaznaczy wiersze z obszaru pomiędzy dwoma indeksami. Jak w przykładzie pomiędzy indeksem 2 a 7. Zwróć uwagę na to, że indeksy 2 i 7 też zostaną zaznaczone:

tree.view.selection.rangedSelect(2,7,true);

Ostatni argument określa to, czy dodać te indeksy, czy nie. Jeżeli ma wartość true, indeksy te zostaną zaliczone do zaznaczonego obszaru. Jeżeli false, zaznaczone wcześniej wiersze będą najpierw odznaczone. W końcu funkcja clearRange() może zostać użyta do odznaczania obszaru wierszy, pozostawiając resztę niezaznaczonego obszaru nietkniętą.

tree.view.selection.clearRange(2,7);

Następnie dowiemy się, jak utworzyć własny widok dla drzewa.