Detta inlägg redigerades senast av szxiaxiaojun den 2019-7-11 11:20
Vid daglig webbprojektutveckling stöter vi ofta på visning av trädstrukturdata, som hämtas från databasen och visas i trädform. För enkelhetens skull kan vi skriva en webbläsaroberoende trädkontroll för JavaScript som kan återanvändas i framtiden. Denna sektion delar ett egenutvecklat JS-träd-plugin, som kan laddas ner och användas direkt för vänner i behov. Träd-pluginet måste implementeras (1) Automatiskt organisera data i underordnade relationer, så att vi inte behöver organisera relationen mellan överordnade och underordnade genom att manuellt lägga till data eller hämta data från databasen i front-end (2) Stöd för anpassad laddningskatalog Stöd för dataladdning i XML- och JSON-format (3) Realisera funktionen att välja trädnoder (enkel urval, flervalsselektion [kaskadval]). (4) Stöd för engångsladdning av big data 。。。。。。 Låt oss börja dela ett Tree-plugin som jag skrev: Detta plugin är baserat på Jquery och behöver referenser
För det första: Parametern JSON-objektet för varje trädnod i pluginet visas nedan nodeItem: function () {
återvända {
nodkod: "", // nodkod
nodetext: "", // nodtext [noddisplay]
nodtitel: "", // nodtitel [nodtext för musrörelse föråldrad display]
supnodecode: "", // Superior node code [definiera den föräldranodkod som denna nod tillhör, och skapa en underordnad relation genom denna kod]
nodeurl: "", // nod-URL representerar länk-URL-adressen anpassad av den aktuella noden
iconexpand: "", // Node Expand-ikon [Ikon visas i katalogträdsnoden i det anpassade expanderade tillståndet, om tomt används standardikonen]
iconcollapse: "" // Nodförminskningsikon [Ikon visas i katalogträdnoden i ett anpassat krympningsläge, om tomt används standardikonen]
}
} För det andra: Tre sätt att ladda katalogträdet 1. loadJson(Json) JSON-objektets katalogträdsnodarray (färdigställd vid ett tillfälle) JSON-formatet är en array av argument för varje objekt i ett nodeItem-objekt
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML-strängformat noddata (engångskomplettering)
Not: Använd XML-strängformat Observera att noden tagName:nodecode nodetext etc. inte får ändras eftersom programmet erhålls direkt genom att använda detta namn
<root>
<item> // Varje nod innehåller flera datavärden
<nodecode><![CDATA[nodkodningsvärde]]></nodecode>
<nodetext><![CDATA[nodnamn text]]]></nodetext>
<nodetitle><![CDATA[nod, musflytt i displayprompttext]]></nodetitle>
<supnodecode><![CDATA[Node parent encoding]]></supnodecode>
<nodeurl><![CDATA[Nodassocierad länkadress]]></nodeurl>
<iconexpand><![CDATA[Visa ikonväg när noden expanderade]]></iconexpand>
<iconcollapse><![CDATA[Visa ikonväg när noden krymper]]></iconcollapse>
</item> ... ...
</root>
3. Lägg till nodobjekt manuellt en och en (två steg för att slutföra) genom metoden addNodeItem(nodeItem) via metoden plug-in-objekt
Du kan skapa ett träd genom att anropa denna metod manuellt via plugin-objektet makeTree().
För det tredje: Händelsemetoden för att omorganisera relationen mellan underordnade och underordnade inom katalogträdet. Genom denna metod kan vi lösa problemet att vårt front-end inte längre behöver skilja på utifrån relationen mellan underordnade och underordnade. För det fjärde: Ovanstående är bara en kort introduktion till de huvudsakliga lastnings- och omorganisationsmetoderna i Tree. Nedan kommer vi att publicera hela JS-pluginkoden med detaljerade kommentarer i koden Plug-in-funktioner: kontrollera, envisa, expandera, vika, visa/dölja nodanslutning, stöd för att infoga noder, ta bort noder, anpassa nodikoner, ställa in nodval, hämta indexträdsvalnoder (stöd XML, JSON, etc.) Högerklicksmeny (stöds inte för tillfället, eftersom popup-lagret måste användas, denna funktion blockeras och tas bort) Stöd för nodklick, dubbelklick, nodvalsändringar osv Den slutliga displayeffekten Nedladdning av bilaga:
Tree_Demo.rar
(54.71 KB, Antal nedladdningar: 1)
| 
Publicerad på 2019-07-11 11:20:12
|
|
|
|
