Tätä julkaisua on viimeksi muokannut szxiaxiaojun 11.7.2019 klo 11:20
Päivittäisessä verkkoprojektikehityksessä kohtaamme usein puurakenteen datan näyttämisen, joka saadaan tietokannasta ja näytetään puun muotoisena. Mukavuuden vuoksi voimme kirjoittaa JavaScriptille ristiinselainisen puun ohjauksen, jota voidaan käyttää uudelleen tulevaisuudessa. Tämä osio jakaa itse kehittämän JS-puu-lisäosan, jonka voi ladata ja käyttää suoraan apua tarvitseville ystäville. Puulisäosa täytyy toteuttaa (1) Järjestä data automaattisesti alisteisiin suhteisiin, jotta esimiesten ja alaisten välistä suhdetta ei tarvitse järjestää lisäämällä tietoja manuaalisesti tai hankkimalla dataa etupään tietokannasta (2) Tue räätälöityä hakemistopuuta Tue datan latausta XML- ja JSON-formaateissa (3) Toteuttaa puusolmujen valinnan tehtävä (yksittäinen valinta, monivalinta [kaskadivalinta]). (4) Tue kertaluonteista big datan latausta 。。。。。。 Aloitetaan Tree-lisäosan jakaminen, jonka kirjoitin: Tämä lisäosa perustuu Jqueryyn ja tarvitsee viitteitä
Ensinnäkin: Jokaisen lisäosan puusolmun parametri JSON-objekti on esitetty alla nodeItem: funktio () {
return {
solmukoodi: "", // solmukoodi
solmuteksti: "", // solmuteksti [solmun näyttöteksti]
nodetitle: "", // solmun otsikko [solmuteksti hiiren liikkeelle vanhentunut näyttö]
supnodecode: "", // Superior node code [määrittele emosolmukoodi, johon tämä solmu kuuluu, ja muodosta alisteinen suhde tämän koodin kautta]
nodeurl: "", // solmun URL edustaa linkin URL-osoitetta, jonka nykyinen solmu muokkaa
iconexpand: "", // Node Expand Icon [Kuvake näytetään hakemistopuusolmussa mukautetussa laajennetussa tilassa, jos tyhjä, käytetään oletuskuvaketta]
iconcollapse: "" // Node Shrink Icon [Kuvake näytetään hakemistopuusolmussa mukautetun kutistumistilassa, jos tyhjä, käytetään oletuskuvaketta]
}
} Toinen: Kolme tapaa ladata hakemistopuu 1. loadJson(Json) JSON objektihakemistopuun solmutaulukko (valmis kerralla) JSON-muoto on argumenttitaulukko jokaiselle nodeIt-objektin alkiolle
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML-merkkijonomuotoinen solmudata (kertakäyttöinen viimeistely)
Huomautus: Käytä XML-merkkijonomuotoa Huomaa, että solmutunniste Name:nodecode nodetext jne. ei saa muuttaa, koska ohjelma saadaan suoraan tämän nimen avulla
<root>
<item> // Jokainen solmu sisältää useita data-arvoja
<nodecode><![CDATA[solmun koodausarvo]]></nodecode>
<nodetext><![CDATA[solmun nimiteksti]]]></nodetext>
<nodetitle><![CDATA[solmu hiiren liike näyttökehotetekstissä]]></nodetitle>
<supnodecode><![CDATA[Node parent encoding]]></supnodecode>
<nodeurl><![CDATA[Node Associated Link Address]]></nodeurl>
<iconexpand><![CDATA[Näytä kuvakepolku kun solmu laajennetaan]]></iconexpand>
<iconcollapse><![CDATA[Näytä kuvakepolku, kun solmu kutistuu]]></iconcollapse>
</item> ... ...
</root>
3. Lisää solmuelementit manuaalisesti yksi kerrallaan (kaksi vaihetta valmiiksi) addNodeItem(nodeItem) -menetelmällä plug-in-objektien avulla
Voit luoda puun kutsumalla tätä metodia manuaalisesti plugin-objektin makeTree() kautta.
Kolmas: Tapahtumamenetelmä alaisten ja alaisten välisen suhteen uudelleenjärjestelyyn hakemistopuussa Tämän menetelmän avulla voimme ratkaista ongelman, jota käyttöliittymämme ei enää tarvitse erottaa alaisten ja alaisten välisen suhteen mukaan. Neljänneksi: Yllä oleva on vain lyhyt johdanto Tree-ohjelman pääasiallisiin lataus- ja uudelleenjärjestelymenetelmiin. Alla julkaisemme koko JS-lisäosan koodin yksityiskohtineen kommentteineen Lisäosan toiminnot: tarkista, yksittäinen, laajenna, taittele, näytä/piilota solmuyhteys, tuki solmujen lisäämistä, solmujen poistamista, solmukuvakkeiden mukauttamista, solmuvalinnan asettamista, hakemistopuun valintasolmujen hankkimista (tuki XML, JSON jne.) Oikean klikkauksen valikko (ei tuettu tällä hetkellä, koska ponnahdusikkunakerrosta täytyy käyttää, tämä toiminto on estetty ja poistettu) Tuki solmujen klikkaamista, kaksoisklikkauksia, solmujen valinnan muutostapahtumia jne Lopullinen näyttöefekti Liitteen lataus:
Tree_Demo.rar
(54.71 KB, Latausten määrä: 1)
| 
Julkaistu 11.7.2019 11.20.12
|
|
|
|
