Posting ini terakhir diedit oleh szxiaxiaojun pada 2019-7-11 11:20
Dalam pengembangan proyek web sehari-hari, kita sering menemukan tampilan data struktur pohon, yang diperoleh dari database dan ditampilkan dalam bentuk pohon. Untuk kenyamanan, kita dapat menulis kontrol pohon lintas browser untuk JavaScript yang dapat digunakan kembali di masa mendatang. Bagian ini membagikan plugin pohon JS yang dikembangkan sendiri, yang dapat diunduh dan digunakan langsung untuk teman-teman yang membutuhkan. Plugin pohon perlu diterapkan (1) Secara otomatis mengatur data ke dalam hubungan bawahan, sehingga kita tidak perlu mengatur hubungan antara atasan dan bawahan dengan menambahkan data secara manual atau mendapatkan data dari database di front-end (2) Mendukung pohon direktori pemuatan kustom Mendukung pemuatan data dalam format XML dan JSON (3) Menyadari fungsi memilih node pohon (seleksi tunggal, seleksi ganda [pemilihan kaskade]). (4) Mendukung pemuatan data besar satu kali 。。。。。。 Mari kita mulai berbagi plugin Pohon yang saya tulis: Plugin ini didasarkan pada Jquery dan membutuhkan referensi
Pertama: Objek JSON parameter dari setiap node pohon di plugin ditunjukkan di bawah ini nodeItem: fungsi () {
Kembali {
kode simpul: "", // kode simpul
nodetext: "", // teks node [teks tampilan node]
nodetitle: "", // judul simpul [teks simpul untuk tampilan usang gerakan mouse]
supnodecode: "", // Kode simpul superior [tentukan kode simpul induk tempat simpul ini berada, dan bentuk hubungan bawahan melalui kode ini]
nodeurl: "", // URL node mewakili alamat URL link yang disesuaikan oleh node saat ini
iconexpand: "", // Ikon Perluas Node [Ikon ditampilkan di node pohon direktori dalam status diperluas yang disesuaikan, jika kosong, ikon default digunakan]
iconcollapse: "" // Ikon Penyusutan Node [Ikon ditampilkan di simpul pohon direktori dalam status penyusutan khusus, jika kosong, ikon default digunakan]
}
} Kedua: Tiga cara untuk memuat pohon direktori 1. loadJson(Json) Array node pohon direktori objek JSON (selesai pada satu waktu) Format JSON adalah array argumen untuk setiap item objek nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) data simpul format string XML (penyelesaian satu kali)
Catatan: Gunakan format string XML Perhatikan bahwa node tagName:nodecode nodetext, dll. tidak diizinkan untuk diubah, karena program diperoleh langsung dengan menggunakan nama ini
<root>
<item> // Setiap node berisi beberapa nilai data
<nodecode><![CDATA[nilai pengkodean simpul]]></nodecode>
<nodetext><![CDATA[teks nama simpul]]]></nodetext>
<nodetitle><![CDATA[node mouse move in display prompt text]]></nodetitle>
<supnodecode><![CDATA[Pengkodean induk simpul]]></supnodecode>
<nodeurl><![CDATA[Alamat Tautan Terkait Node]]></nodeurl>
<iconexpand><![CDATA[Tampilkan jalur ikon saat simpul diperluas]]></iconexpand>
<iconcollapse><![CDATA[Tampilkan jalur ikon saat simpul menyusut]]></iconcollapse>
</item> ... ...
</root>
3. Tambahkan item node secara manual satu per satu (dua langkah untuk menyelesaikan) melalui metode addNodeItem(nodeItem) melalui metode objek plug-in
Anda dapat membuat pohon dengan memanggil metode ini secara manual melalui objek plugin makeTree().
Ketiga: Metode peristiwa untuk mengatur ulang hubungan antara bawahan dan bawahan dalam pohon direktori Melalui metode ini, kita dapat memecahkan masalah yang tidak perlu lagi dibedakan oleh front-end kita sesuai dengan hubungan antara bawahan dan bawahan. Keempat: Di atas hanyalah pengantar singkat tentang metode pemuatan dan reorganisasi utama Tree. Di bawah ini kami akan memposting kode plugin JS lengkap dengan komentar terperinci dalam kode Fungsi plug-in: memeriksa, memeriksa, mengembangkan, melipat, menampilkan/menyembunyikan koneksi node, mendukung penyisipan node, menghapus node, menyesuaikan ikon node, mengatur pemilihan node, mendapatkan node pemilihan pohon direktori (mendukung XML, JSON, dll.) Menu klik kanan (tidak didukung untuk saat ini, karena lapisan pop-up perlu digunakan, fungsi ini diblokir dan dihapus) Mendukung klik node, klik dua kali, peristiwa perubahan pemilihan node, dll Efek tampilan akhir Unduhan lampiran:
Tree_Demo.rar
(54.71 KB, Jumlah unduhan: 1)
| 
Diposting pada 11/07/2019 11.20.12
|
|
|
|
