mozilla
Wyniki wyszukiwania

    Dodatkowe możliwości drzewa

    W tym artykule poznamy więcej możliwości drzewa.

    Hierarchia drzew

    Elementy drzewa są także zastosowane do tworzenia list hierarchicznych, takich, jakie możemy znaleźć w menedżerach plików lub na liście ulubionych zakładek w przeglądarce. Widok drzewa posiada funkcję, która określa hierarchię poszczególnych pozycji w drzewie. Każda pozycja w drzewie posiada swoją pozycję, która zaczyna się od poziomu 0. Najwyżej wysunięte elementy w drzewie będą posiadały poziom 0, dziecko tej pozycji będzie posiadało poziom 1, dziecko poniżej będzie posiadało poziom 2 i tak dalej. Drzewo będzie pytało o poziom każdej pozycji według ustalonych zasad jak wyrysować wiersze.

    Drzewo wyrysuje ikony otwierania i zamykania pozycji rodzica, służące do rozwijania wierszy, jak również linie łączące wiersz rodzica z wierszami dzieci. Widok musi się upewniać, czy ścieżka wierszy jest taka, jak było wymagane. To może czasem się okazać zawodne, jednak, na szczęście, wbudowany widok treści drzewa wykona za nas najcięższą pracę.

    W celu utworzenia zestawu zagnieżdżonych wierszy, dodajemy drugi element treechildren wewnątrz rodzica treeitem. Możemy wtedy dodać pozycję wewnątrz tamtego, żeby określić wiersze potomne kolejnych pozycji. Nie umieszczaj wewnętrznego elementu treechildren wewnątrz treerow, ponieważ to nie będzie działało.

    Możemy powtarzać ten proces do utworzenia głęboko zagnieżdżonych drzew. Zasadniczo jednak element treeitem może zawierać którykolwiek z pojedynczych wierszy, które są zadeklarowane z elementem treerow lub całym kompletem wierszy, zadeklarowanych z elementem treechildren.

    Są dwie inne rzeczy, które trzeba zrobić żeby upewnić się, że hierarchia zadziała poprawnie. Po pierwsze, trzeba zaznaczyć element treeitem, który posiada 'dzieci' jako kontener. Robimy to poprzez dodanie atrybutu container w następujący sposób:

    <treeitem container="true"/>
    

    Pozwala to użytkownikowi na kliknięcie w wiersz przesłany do elementu treeitem w celu rozwinięcia i zwinięcia wewnętrznych wierszy. Można mieć rozwinięte wiersze już na samym początku, dodając atrybut open. Kiedy użytkownik rozwija i zwija główny wiersz, wywoływana jest funkcja toggleOpenState, która to właśnie przełącza te widoki. Dla widoku treści drzewa umieści atrybut open, żeby ustawić aktualny stan.

    Drugą zmianą jest to, że musisz umieścić atrybut primary w pierwszej kolumnie. To spowoduje ukazanie się małego symbolu trójkąta przed komórkami, który będzie wskazywał na to, że wiersz można rozwinąć. Dodatkowo wiersze potomne są wcięte (akapit). Zauważ, że użytkownik nie ma możliwości ukrycia pierwszej kolumny, używając przeciągania do prawych kolumn.

    Przykład drzewa hierarchicznego

    Następujący prosty przykład:

    var el = env.locale; Przykład 1 : Źródła Podgląd

    grafika:advtrees1.png
    <tree rows="6">
      <treecols>
          <treecol id="firstname" label="Imię" primary="true" flex="3"/>
          <treecol id="lastname" label="Nazwisko" flex="7"/>
      </treecols>
    
      <treechildren>
        <treeitem container="true" open="true">
          <treerow>
            <treecell label="Znajomi"/>
          </treerow>
    
          <treechildren>
            <treeitem>
              <treerow>
                <treecell label="Bob"/>
                <treecell label="Carpenter"/>
              </treerow>
            </treeitem>
            <treeitem>
              <treerow>
                <treecell label="Jerry"/>
                <treecell label="Hodge"/>
              </treerow>
            </treeitem>
          </treechildren>
        </treeitem>
      </treechildren>
    </tree>
    

    Utworzone zostało hierarchiczne drzewo. Jak widać na obrazku obok pierwszego wiersza ukazał się mały znak plusa lub minusa, wskazując, że wiersz zawiera wiersze potomne. Klikając na ten wiersz użytkownik może rozwinąć i zwinąć listę. Wiersz <tt>Znajomi</tt> potrzebuje jednej kolumny do umieszczenia jego pozycji dla elementów dzieci.

    Zewnętrzny treeitem zawiera pojedynczy element treerow i treechildren. Ten pierwszy tworzy dane dla źródłowego wiersza, a ten drugi dla późniejszych pozycji potomnych.

    Można również zagnieżdżać głębsze wiersze. Pamiętaj, że musimy użyć atrybutu container na wierszach, które zawierają wiersze potomne. Zwykła obecność pochodnych wierszy nie jest wystarczająca do wskazania, czy masz kontener, który jest pusty, ale nadal będzie traktowany jako kontener. Na przykład pusty folder powinien być cały czas traktowany jako kontener, ale plik już nie.

    Więcej o kolumnach drzewa

    Jednym z dodatkowych atrybutów, które mogą być dodane do drzewa, jest enableColumnDrag. Jeżeli ma wartość true, użytkownik może złapać za nagłówek i dowolnie przemieszczać kolumny wg uznania.

    Prawdopodobnie użytkownik będzie chciał też zmienić szerokość kolumn. Można to zrobić umieszczając rozdzielacz (splitter) pomiędzy każdym z elementów treecol. Pojawi się małe nacięcie pomiędzy kolumnami, które użytkownik może złapać i przeciągać, zmieniając szerokość kolumn. Można zastosować klasę stylu tree-splitter w celu ukrycia przerwy, ale mimo to nadal będzie możliwa zmiana szerokości kolumn.

    Można narzucić maksymalną i minimalną szerokość kolumn przy pomocy atrybutów minwidth i maxwidth.

    Jest możliwość umieszczenia atrybutu hidden w kolumnie, z wartością true, żeby domyślnie uzyskać ukrytą kolumnę. Użytkownik może wybierać, która kolumna ma być ukryta, wybierając ją z rozwijanej listy na końcu wiersza nagłówka.

    Zapamiętywanie stanu kolumn

    Grafika:XUL_rememberingStatofColumnsPL.png

    Atrybut persist może być używany do zachowywania stanu kolumn pomiędzy sesjami (więcej informacji znajduje się w jednym z kolejnych artykułów). Tak, że w przypadku, gdy użytkownik zmieni układ wg własnego uznania, ustawienia zostaną zapamiętanie na następny raz. Będzie trzeba zachować pewna liczbę atrybutów jak w przykładzie:

    var el = env.locale; Przykład 2 : Źródła Podgląd

    <tree enableColumnDrag="true" flex="1">
      <treecols>
        <treecol id="runner" label="Biegacz" flex="2" persist="width ordinal hidden"/>
        <splitter class="tree-splitter"/>
        <treecol id="city" label="Miasto rodzinne" flex="2" persist="width ordinal hidden"/>
        <splitter class="tree-splitter"/>
        <treecol id="starttime" label="Czas startu" flex="1" persist="width ordinal hidden"/>
        <splitter class="tree-splitter"/>
        <treecol id="endtime" label="Czas ukończenia" flex="1" persist="width ordinal hidden"/>
      </treecols>
    
      <treechildren>
        <treeitem>
          <treerow>
            <treecell label="Joshua Granville"/>
            <treecell label="Vancouver"/>
            <treecell label="7:06:00"/>
            <treecell label="9:10:26"/>
          </treerow>
        </treeitem>
        <treeitem>
          <treerow>
            <treecell label="Robert Valhalla"/>
            <treecell label="Seattle"/>
            <treecell label="7:08:00"/>
            <treecell label="9:15:51"/>
          </treerow>
        </treeitem>
      </treechildren>
    </tree>
    

    Trzy atrybuty kolumn są trwałe:

    • atrybut width, aby zachować szerokość,
    • atrybut ordinal, który podtrzymuje pozycję kolumny,
    • atrybut hidden, który zapamiętuje, gdzie kolumna jest widoczna, a gdzie ukryta.

    Następnie dowiemy się, jak pobrać i ustawić zaznaczenie drzew.


    Autorzy i etykiety dokumentu

    Contributors to this page: Ptak82, Witia, Takenbot, teoli, Mgjbot
    Ostatnia aktualizacja: teoli,