Ten post został ostatnio edytowany przez szxiaxiaojun 11.07.2019 o 11:20
W codziennym tworzeniu projektów internetowych często spotykamy się z wyświetlaniem danych o strukturze drzewa, które są pobierane z bazy danych i wyświetlane w kształcie drzewa. Dla wygody możemy napisać drzewo sterowania dla JavaScriptu obejmujące wszystkie przeglądarki, które będzie można ponownie wykorzystać w przyszłości. Ta sekcja udostępnia własnoręcznie opracowaną wtyczkę drzewa JS, którą można pobrać i używać bezpośrednio dla potrzebujących znajomych. Wtyczka drzewa musi zostać zaimplementowana (1) Automatycznie organizować dane w relacje podporządkowane, tak aby nie musieć organizować relacji między przełożonymi a podwładnymi poprzez ręczne dodawanie danych lub pobieranie danych z bazy danych na froncie (2) Obsługa niestandardowego drzewa katalogów ładowania i obsługa ładowania danych w formatach XML i JSON (3) Realizować funkcję wyboru węzłów drzewa (pojedynczy selekcja, wielokrotny wybór [kaskadowy selekcja]). (4) Obsługa jednorazowego ładowania big data 。。。。。。 Zacznijmy dzielić się wtyczką Tree, którą napisałem: Ta wtyczka opiera się na Jquery i potrzebuje referencji
Po pierwsze: Obiekt parametrów JSON każdego węzła drzewa w wtyczce przedstawiono poniżej nodeItem: funkcja () {
return {
nodecode: "", // nodecode
Nodetext: "", // tekst węzła [tekst wyświetlania węzła]
nodetitle: "", // node title [tekst węzła dla przestarzałego wyświetlania ruchu myszy]
supnodecode: "", // Kod węzła wyższego [zdefiniuj kod węzła nadrzędnego, do którego należy ten węzeł, i utworz relację podrzędną poprzez ten kod]
nodeurl: "", // URL węzła reprezentuje adres URL linku dostosowany przez bieżący węzeł
ikonrozszerzaj: "", // Ikona rozwinięcia węzła [Ikona wyświetlana w węźle drzewa katalogów w niestandardowym stanie rozszerzonym, jeśli pusta, używana jest domyślna ikona]
iconcollapse: "" // Ikona zmniejszania węzła [Ikona wyświetlana w węźle drzewa katalogów w niestandardowym stanie kurczenia się, jeśli pusta, używana jest domyślna ikona]
}
} Po drugie: Trzy sposoby ładowania drzewa katalogowego 1. loadJson(Json) tablica węzłów drzewa katalogu obiektów JSON (ukończona jednorazowo) Format JSON to tablica argumentów dla każdego elementu obiektu nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) format tekstu XML dla węzła (jednorazowe wypełnienie)
Uwaga: Użyj formatu tekstów XML Należy zauważyć, że tag nodeName:nodecode nodetext itp. nie mogą być zmieniane, ponieważ program jest bezpośrednio uzyskiwany przez użycie tej nazwy
<root>
<item> // Każdy węzeł zawiera wiele wartości danych
<nodecode><![CDATA[wartość kodowania węzła]]></nodecode>
<nodetext><![CDATA[nazwa węzła tekst]]]></nodetext>
<nodetitle><![CDATA[ruch myszy węzła w tekstie promptu display]]></nodetitle>
<supnodecode><![CDATA[Kodowanie rodzica węzła]]></supnodecode>
<nodeurl><![CDATA[Adres powiązanego łącza węzła]]></nodeurl>
<iconexpand><![CDATA[Pokaż ścieżkę ikony po rozwinięciu węzła]]></iconexpand>
<iconcollapse><![CDATA[Pokaż ścieżkę ikony, gdy węzeł się kurczy]]></iconcollapse>
</item> ... ...
</root>
3. Dodawanie elementów węzłów ręcznie pojedynczo (dwa kroki do ukończenia) metodą addNodeItem(nodeItem) oraz metodą obiektów wtyczek
Możesz stworzyć drzewo, wywołując tę metodę ręcznie przez wtyczkę obiekt makeTree().
Po trzecie: Metoda zdarzeń do reorganizacji relacji między podwładnymi a podwładnymi w drzewie katalogów Dzięki tej metodzie możemy rozwiązać problem, że nasz front-end nie musi już rozróżniać według relacji między podwładnymi a podwładnymi. Po czwarte: Powyższe to tylko krótkie wprowadzenie do głównych metod obciążania i reorganizacji w Tree. Poniżej zamieścimy pełny kod wtyczki JS wraz z szczegółowymi komentarzami w kodzie Funkcje wtyczek: check, single, expand, fold, display/hide connection node, support insert node, usuwanie node, personalizacja ikon node, ustawianie wyboru node'ów, pozyskiwanie węzłów wyboru drzewa katalogów (obsługa XML, JSON itd.) Menu klikania prawym przyciskiem myszy (obecnie nieobsługiwane, ponieważ trzeba użyć warstwy wyskakujących okienek, funkcja ta jest zablokowana i usunięta) Wsparcie dla klikania węzłów, podwójnych klikania, zmian wyboru węzłów itd Efekt końcowy wyświetlacza Załącznik do pobrania:
Tree_Demo.rar
(54.71 KB, Liczba pobranych plików: 1)
| 
Opublikowano 11.07.2019 11:20:12
|
|
|
|
