Bu gönderi en son szxiaxiaojun tarafından 2019-7-11 11:20 tarihinde düzenlenmiştir
Günlük web proje geliştirmede, genellikle veritabanından alınan ve ağaç şekli olarak gösterilen ağaç yapısı verilerinin görüntülenmesiyle karşılaşırız. Kolaylık için, gelecekte tekrar kullanılabilecek bir tarayıcı çapraz ağaç kontrolü yazabiliriz. Bu bölüm, ihtiyaç duyan arkadaşlar için doğrudan indirilip kullanılabilen kendi geliştirdiği bir JS ağacı eklentisini paylaşıyor. Ağaç eklentisi uygulanmalıdır (1) Verileri otomatik olarak alt ilişkilere düzenlemek, böylece üst ve ast arasındaki ilişkiyi ön uçtaki veritabanından veri elde ederek manuel olarak veri ekleyerek veya veri elde ederek düzenlememize gerek kalmaz (2) Özel dizin yükleme ağacını destekle XML ve JSON formatlarında veri yüklemesini destekle (3) Ağaç düğümlerinin seçilme işlevini gerçekleştirin (tek seçim, çoklu seçim [kaskad seçim]). (4) Büyük verinin tek seferlik yüklenmesini desteklemek 。。。。。。 Yazdığım bir Tree eklentisini paylaşmaya başlayalım: Bu eklenti Jquery tabanlı ve referanslara ihtiyaç duyuyor
Birinci: Eklentideki her ağaç düğümünün JSON parametresi aşağıda gösterilmiştir nodeItem: fonksiyon () {
return {
nodecode: "", // nodecode
nodetext: "", // düğüm metni [düğüm gösteri metni]
nodetitle: "", // node title [fare hareketi için düğüm metni modası geçmiş display]
supnodecode: "", // Superior node kodu [bu düğümün ait olduğu ana düğüm kodunu tanımlayın ve bu kod üzerinden alt ilişki oluşturun]
nodeurl: "", // düğüm URL, mevcut düğüm tarafından özelleştirilen bağlantı URL adresini temsil eder
iconexpand: "", // Node Expand Icon [Simge, dizin ağacı düğümünde özelleştirilmiş genişletilmiş durumda görüntülenir, boş ise varsayılan simge kullanılır]
iconcollapse: "" // Node Shrink Icon [Dizin ağacı düğümünde özel bir küçültme durumunda gösterilen ikon, boşsa varsayılan simge kullanılır]
}
} İkincisi: Dizin ağacını yüklemenin üç yolu 1. loadJson(Json) JSON nesne dizin ağacı düğüm dizisi (bir seferde tamamlandı) JSON formatı, bir nodeItem nesnesinin her öğesi için bir argüman dizisidir
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML dizi formatı düğüm verisi (tek seferlik tamamlanma)
Not: XML dizi formatı kullanın Not edinin node tagName:nodecode nodetext vb. değiştirilemez, çünkü program doğrudan bu isimle alınır
<root>
<item> // Her düğüm birden fazla veri değeri içerir
<nodecode><![CDATA[düğüm kodlama değeri]]></nodecode>
<nodetext><![CDATA[node name text]]]></nodetext>
<nodetitle><![CDATA[node mouse move in display prompt text]]></nodetitle>
<supnodecode><![CDATA[Node parent encoding]]></supnodecode>
<nodeurl><![CDATA[Node Associated Link Address]]></nodeurl>
<iconexpand><![CDATA[Node genişletildiğinde simge yolunu göster]]></iconexpand>
<iconcollapse><![CDATA[Düğüm küçüldüğünde simge yolunu göster]]></iconcollapse>
</item> ... ...
</root>
3. addNodeItem(nodeItem) yöntemiyle eklenti nesneleri yöntemiyle düğüm öğelerini tek tek (tamamlanması için iki adım) elle ekleyin
Bu yöntemi elle, eklenti nesnesi makeTree() aracılığıyla çağırarak bir ağaç oluşturabilirsiniz.
Üçüncüsü: Dizin ağacı içinde astlar ile astlar arasındaki ilişkiyi yeniden düzenlemek için olay yöntemi Bu yöntemle, ön uçumuzun artık alt ve astlar arasındaki ilişkiye göre ayırt etmek zorunda kalmadığı sorunu çözebiliriz. Dördüncüsü: Yukarıdakiler, Tree'nin ana yükleme ve yeniden düzenleme yöntemlerine kısa bir giriştir. Aşağıda, kodda detaylı yorumlarla birlikte tam JS eklenti kodunu paylaşacağız Eklenti fonksiyonları: kontrol et, tek, genişlet, katla, göster/gizleme düğüm bağlantısı, düğüm ekleme, düğüm silme, düğüm simgelerini özelleştirme, düğüm seçimini ayarlama, dizin ağacı seçme düğümlerini elde etme (XML, JSON vb. desteği) Sağ tıklama menüsü (şu anda desteklenmiyor, çünkü açılır katman kullanılmak gerekiyor, bu fonksiyon engellenmiş ve kaldırılmıştır) Destek düğüm tıklama, çift tıklama, düğüm seçimi değişim olayları vb Son görüntü etkisi Ek indirme:
Tree_Demo.rar
(54.71 KB, İndirme sayısı: 1)
| 
Yayınlandı 11.07.2019 11:20:12
|
|
|
|
