Dette innlegget ble sist redigert av szxiaxiaojun 11.07.2019 kl. 11:20
I daglig utvikling av webprosjekter møter vi ofte visning av trestrukturdata, som hentes fra databasen og vises i treform. For enkelhets skyld kan vi skrive en tverrnettleser-trekontroll for JavaScript som kan gjenbrukes i fremtiden. Denne seksjonen deler en egenutviklet JS-tre-plugin, som kan lastes ned og brukes direkte for venner i nød. Tre-pluginen må implementeres (1) Automatisk organisere data i underordnede relasjoner, slik at vi ikke trenger å organisere forholdet mellom overordnede og underordnede ved manuelt å legge til data eller hente data fra databasen på front-end (2) Støtte tilpasset lastekatalogtre Støtte datalasting i XML- og JSON-formater (3) Realiser funksjonen med å velge tre-noder (enkelt utvalg, flert utvalg [kaskadevalg]). (4) Støtte engangslasting av big data 。。。。。。 La oss begynne å dele en Tree-plugin jeg har skrevet: Denne pluginen er basert på Jquery og trenger referanser
Først: Parameter-JSON-objektet til hver tre-node i pluginen vises nedenfor nodeElement: funksjon () {
returner {
nodekode: "", // nodekode
nodetext: "", // node-tekst [node viser tekst]
nodetittel: "", // nodetittel [nodetekst for musebevegelse foreldet visning]
supnodecode: "", // Superior node-kode [definer foreldrenodekoden som denne noden tilhører, og danne et underordnet forhold gjennom denne koden]
nodeurl: "", // node-URL representerer lenke-URL-adressen tilpasset av den nåværende noden
iconexpand: "", // Node Expand Icon [Ikon vises i directory tree-noden i tilpasset utvidet tilstand, hvis tomt, brukes standardikonet]
iconcollapse: "" // Node Shrink Icon [Ikon vises i directory tree-noden i en egendefinert krympingstilstand, hvis tomt, brukes standardikonet]
}
} For det andre: Tre måter å laste inn katalogtreet på 1. loadJson(Json) JSON objekt directory tree node-array (fullført én gang) JSON-formatet er et array av argumenter for hvert element i et nodeItem-objekt
[ { nodekode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML-strengformat nodedata (engangsfullføring)
Merk: Bruk XML-strengformat Merk at node tagName:nodecode nodetext osv. ikke kan endres, fordi programmet hentes direkte ved å bruke dette navnet
<root>
<item> // Hver node inneholder flere dataverdier
<nodecode><![CDATA[nodekodingsverdi]]></nodecode>
<nodetext><![CDATA[nodenavn tekst]]]></nodetext>
<nodetitle><![CDATA[node musebevegelse i visningsprompt-tekst]]></nodetitle>
<supnodecode><![CDATA[Node parent encoding]]></supnodecode>
<nodeurl><![CDATA[Node Associated Link Address]]></nodeurl>
<iconexpand><![CDATA[Vis ikonsti når noden utvides]]></iconexpand>
<iconcollapse><![CDATA[Vis ikonsti når noden krymper]]></iconcollapse>
</item> ... ...
</root>
3. Legg til nodeelementer manuelt én etter én (to trinn for å fullføre) gjennom metoden addNodeItem(nodeItem) gjennom metoden plug-in-objekter
Du kan lage et tre ved å kalle denne metoden manuelt via plugin-objektet makeTree().
For det tredje: Hendelsesmetode for å reorganisere forholdet mellom underordnede og underordnede i katalogtreet Gjennom denne metoden kan vi løse problemet at front-end ikke lenger trenger å skille i henhold til forholdet mellom underordnede og underordnede. For det fjerde: Ovenstående er bare en kort introduksjon til hovedmetodene for lasting og omorganisering av Tree. Nedenfor vil vi legge ut hele JS-pluginkoden med detaljerte kommentarer i koden Plug-in-funksjoner: sjekk, enkelt, utvid, brett, vis/skjul nodetilkobling, støtte for innsetting av noder, sletting av noder, tilpasning av nodeikoner, innstilling av nodevalg, henting av katalogtre-utvelgelsesnoder (støtte XML, JSON, osv.) Høyreklikkmeny (ikke støttet for øyeblikket, fordi popup-laget må brukes, denne funksjonen blokkeres og fjernes) Støtte nodeklikk, dobbeltklikk, nodevalg endringshendelser osv Den siste visningseffekten Nedlasting av vedlegg:
Tree_Demo.rar
(54.71 KB, Antall nedlastinger: 1)
| 
Publisert på 11.07.2019 11:20:12
|
|
|
|
