JS--Plugin: Træudvikling og implementeringsvedhæftning kan downloades!!

szxiaxiaojun · Opslået på 11/07/2019 11.20.12

Dette indlæg blev sidst redigeret af szxiaxiaojun den 2019-7-11 kl. 11:20

I daglig webprojektudvikling støder vi ofte på visning af træstrukturdata, som hentes fra databasen og vises i en træform. For nemheds skyld kan vi skrive en tværbrowser-trækontrol til JavaScript, som kan genbruges i fremtiden. Denne sektion deler et selvudviklet JS-træ-plugin, som kan downloades og bruges direkte til venner i nød.

Træ-pluginet skal implementeres

(1) Automatisk organisere data i underordnede relationer, så vi ikke behøver at organisere forholdet mellem overordnede og underordnede ved manuelt at tilføje data eller hente data fra databasen på frontenden

(2) Understøttelse af brugerdefineret indlæsningsmappetræ Understøttelse af dataindlæsning i XML- og JSON-formater

(3) Realiser funktionen ved at vælge trænoder (enkelt udvælgelse, flerudvælgelse [kaskadeudvælgelse]).

(4) Understøttelse af engangsindlæsning af big data

。。。。。。

Lad os begynde at dele et Tree-plugin, jeg har skrevet: Dette plugin er baseret på Jquery og kræver referencer

For det første: Parameter-JSON-objektet for hver trænode i plugin'et vises nedenfor

         nodeItem: funktion () {
            return {
                  nodekode: "", // nodekode
                  nodetext: "", // node-tekst [node-visningstekst]
                  nodetitel: "", // nodetitel [nodetekst til musebevægelse forældet visning]
                  supnodecode: "", // Superior node-kode [definer den overordnede nodekode, som denne node tilhører, og danne et underordnet forhold gennem denne kode]
                  nodeurl: "", // node-URL repræsenterer link-URL-adressen, tilpasset af den aktuelle node
                  iconexpand: "", // Node Expand Icon [Ikon vist i mappetræ-noden i den tilpassede udvidede tilstand, hvis det er tomt, bruges standardikonet]
                  iconcollapse: "" // Node Shrink Icon [Ikon vises i directory tree-noden i en brugerdefineret krympetilstand, hvis tomt, bruges standardikonet også]
            }
         }

For det andet: Tre måder at indlæse mappetræet på

1. loadJson(Json) JSON objektmappe trænodearray (fuldført på ét tidspunkt)

JSON-formatet er et array af argumenter for hvert element i et nodeItem-objekt
[

                                                         { nodekode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
                                                         {},...
                                                   ]

2. loadXml(xml) XML-strengformat nodedata (engangsfuldførelse)

                                                      Bemærk: Brug XML-strengformat. Bemærk, at node tagName:nodecode nodetext osv. ikke må ændres, fordi programmet opnås direkte ved at bruge dette navn
                                                   <root>
                                                         <item> // Hver node indeholder flere dataværdier
                                                               <nodecode><![CDATA[nodekodningsværdi]]></nodecode>
                                                               <nodetext><![CDATA[nodenavn tekst]]]></nodetext>
                                                               <nodetitle><![CDATA[node-musebevægelse i displayprompt-tekst]]></nodetitle>
                                                               <supnodecode><![CDATA[Node parent encoding]]></supnodecode>
                                                               <nodeurl><![CDATA[Node Associated Link Address]]></nodeurl>
                                                               <iconexpand><![CDATA[Vis ikonsti, når noden udvides]]></iconexpand>
                                                               <iconcollapse><![CDATA[Vis ikonsti, når noden krymper]]></iconcollapse>
                                                         </item>

... ...
</root>

3. Tilføj nodeelementer manuelt én ad gangen (to trin for at fuldføre) via metoden addNodeItem(nodeItem) gennem metoden plug-in objekter
Du kan oprette et træ ved manuelt at kalde denne metode via plugin-objektet makeTree().

For det tredje: Hændelsesmetode til at reorganisere forholdet mellem underordnede og underordnede i katalogtræet Gennem denne metode kan vi løse problemet, at vores front-end ikke længere behøver at skelne i forhold til forholdet mellem underordnede og underordnede.

Login er synlig.

For det fjerde: Ovenstående er blot en kort introduktion til de vigtigste metoder til indlæsning og omorganisering af Tree. Nedenfor vil vi poste den fulde JS-plugin-kode med detaljerede kommentarer i koden

Plug-in-funktioner: tjek, enkelt, udvid, fold, vis/skjul nodeforbindelse, understøttelse af indsættelse af noder, sletning af noder, tilpasning af nodeikoner, indstilling af nodevalg, hentelse af nodevalg af directory tree (understøtter XML, JSON osv.)

Højreklik-menu (ikke understøttet for øjeblikket, fordi pop-up-laget skal bruges, denne funktion blokeres og fjernes) Understøtter nodeklik, dobbeltklik, nodevalg og ændringer osv

Den endelige displayeffekt

Vedhæftet fil:

Tree_Demo.rar (54.71 KB, Antal downloads: 1)

[JavaScript] JS--Plugin: Træudvikling og implementeringsvedhæftning kan downloades!!