Bina Pokok Ajax dengan Yui

Saya telah meninggalkan URL dari contoh kod di atas kerana mereka sangat panjang, dan yang terbaik untuk membina URL anda sendiri dengan fungsi yang anda perlukan. Kelebihan ini ialah anda boleh dengan mudah memasukkan sebarang komponen Yui lain yang anda perlukan tanpa menambah helaian gaya tambahan atau fail skrip. Hanya kembali ke aplikasi konfigurasi dan menghasilkan satu set pautan baru!

Cukup salin coretan HTML yang anda terima ke dalam kepala dokumen anda, dan anda bersedia untuk membuat permulaan dengan yui. Pada mulanya, ia akan mengandungi hanya satu nod teks yang mengandungi label "Apple." Apabila pengguna mengklik nod itu, kod kami akan membina subtree di bawahnya, memisahkannya dengan sinonim untuk "Apple." Kami mencipta pokok dengan pembina Treeview, yang hujahnya adalah elemen HTML di mana kami akan membina pokok (Ajaxtreediv). Panggilan getroot menerima rujukan kepada akar pokok dan menyampaikannya kepada pembina TextNode. Memberi akar ke nod baru menghubungkan pokok itu; Ia mewujudkan pautan kembali ke ibu bapa. Kami melakukan lukisan sebenar pokok dengan kaedah rendernya.

Kami mulakan dengan mengisytiharkan beberapa pembolehubah. Obnode akan menjadi objek nod, obajaxtree akan menjadi objek pokok, dan Treeroot akan digunakan untuk memegang rujukan ke nod akar pokok. kebanyakan perhatian kita. Kaedah setdynamicload menceritakan pokok yang ingin kita ketahui apabila pengguna mengklik salah satu nodnya untuk mengembangkannya, dan ia memberitahu pokok apa yang berfungsi untuk dipanggil (makemorenodes, yang akan kita tulis tidak lama lagi) apabila klik tersebut berlaku: Melewati pembolehubah Treeroot ke pembina TextNode menghubungkan nod dengan pokok. Akhirnya, kami memanggil kaedah render untuk memaparkan pokok itu.

Perhatikan bahawa semua kod ini berada di dalam fungsi, yang kami panggil BuildAjaxTree. Inilah pernyataan yang akan memanggilnya:

Ini adalah pernyataan pertama kod kami yang akan dilaksanakan. Kaedah Ondomready memanggil BuildAjaxTree apabila halaman HTML dimuatkan sepenuhnya. Menjalankan skrip kami sebelum titik itu akan menjemput kesilapan.

Membuat lebih banyak nod dengan panggilan Ajax

Sekarang mari kita berjalan melalui fungsi Makemorenodes. Pertama, rujuk kembali gambaran keseluruhan objek panggil balik yang diterangkan pada permulaan artikel ini. Ingat bahawa panggilan Ajax kami (Asyncrequest) memerlukan objek panggil balik dengan kaedah kejayaan dan kegagalan, jadi ia boleh memanggil salah satu kaedah tersebut selepas misi pengumpulan datanya. Kebanyakan kod di dalam Makemorenodes berfungsi untuk membuat objek panggil balik itu. Bandingkan dengan objek panggil balik generik yang kita lihat ketika memperkenalkan asyncrequest:

sifat kejayaan dan kegagalan merujuk kepada kaedah yang akan dipanggil Asyncrequest selepas ia menanyakan skrip Thesaurus sisi pelayan kami. Kami akan memanggil fungsi FoundSynonyms jika skrip PHP berjaya menarik beberapa sinonim, atau panggilan balik yang ditemui jika skrip PHP gagal dalam pencariannya. Perhatikan bahawa harta timeout adalah faktor dalam kes kegagalan ini: asyncrequest bendera kegagalan jika gagal menerima keputusan dalam masa tujuh saat (7,000 milisaat) dipanggil. Ingat bahawa harta argumen mengandungi apa sahaja data yang diperlukan oleh fungsi kejayaan dan kegagalan yang dipanggil oleh Asyncrequest. Untuk contoh kami, sebelum panggilan AJAX, kami menyimpan nod yang diklik oleh pengguna dalam hujah. Kaedah kejayaan memerlukan nod ini untuk dua sebab. Pertama, untuk membina subtree sinonim baru: nod root diperlukan untuk ini, dan nod yang diklik oleh pengguna akan menjadi akar itu. Kedua, untuk memberitahu nod yang kami lakukan menggunakannya, melalui kaedah loadComplete. Jika kita tidak membakar kaedah itu, pokok itu akan membeku, kerana salah satu nodnya tidak akan tahu bila untuk meneruskan mendengar untuk klik tetikus pengguna.

function buildAjaxTree() {   var obNode;  var obAjaxTree;  var treeRoot;    obAjaxTree = new YAHOO.widget.TreeView ("AjaxTreeDiv");  <em>obAjaxTree.setDynamicLoad(makeMoreNodes,0);</em>  treeRoot = obAjaxTree.getRoot();  obNode = new YAHOO.widget.TextNode("apple", treeRoot, false);  obAjaxTree.render();}

Kaedah kegagalan perlu mempunyai akses kepada nod yang diklik untuk alasan yang sama. Walaupun kaedah kegagalan tidak menambah nod ke pokok itu, nod pengguna diklik masih memerlukan kaedah loadComplete yang dipanggil, jadi ia boleh mula mendengar untuk klik pengguna lagi.

Soalan Lazim (Soalan Lazim) Mengenai Yui Treeview dan Ajax

Apa itu Yui Treeview dan bagaimana ia berfungsi dengan Ajax? Ia adalah sebahagian daripada Perpustakaan Antara Muka Pengguna Yahoo (YUI), yang merupakan satu set utiliti dan kawalan, yang ditulis dalam JavaScript, untuk membina aplikasi web yang interaktif. Ajax, sebaliknya, bermaksud JavaScript dan XML yang tidak segerak. Ia adalah satu set teknik pembangunan web menggunakan banyak teknologi web di sebelah pelanggan untuk membuat aplikasi web tak segerak. Apabila Yui Treeview digabungkan dengan Ajax, ia membolehkan penciptaan struktur pokok yang dinamik dan diperkembangkan yang boleh memuatkan data atas permintaan, meningkatkan kecekapan dan pengalaman pengguna aplikasi web anda. Pertama, anda perlu memasukkan perpustakaan Yui dalam projek anda. Kemudian, anda perlu membuat contoh baru kelas Treeview dan menentukan struktur pokok anda. Selepas itu, anda boleh menggunakan AJAX untuk memuatkan data ke dalam pokok secara dinamik. Ini melibatkan penyediaan permintaan AJAX untuk mengambil data dari pelayan dan kemudian menggunakan data tindak balas untuk membuat nod baru di dalam pokok. Pertama, ia membolehkan penciptaan struktur pokok yang dinamik dan diperkembangkan yang boleh memuatkan data atas permintaan. Ini dapat meningkatkan kecekapan dan pengalaman pengguna aplikasi web anda. Kedua, ia menyediakan tahap penyesuaian yang tinggi, membolehkan anda membuat struktur pokok yang sesuai dengan keperluan khusus anda. Akhirnya, ia adalah sebahagian daripada Perpustakaan Yui, yang merupakan set alat yang didokumentasikan dengan baik dan digunakan secara meluas untuk pembangunan web. Antara yang paling popular termasuk JQuery Treeview, Jstree, dan Fancytree. Alat ini menawarkan fungsi yang sama kepada Yui Treeview, tetapi masing -masing mempunyai ciri -ciri dan kelebihan tersendiri. Walau bagaimanapun, penting untuk diperhatikan bahawa Yui Treeview adalah sebahagian daripada Perpustakaan Yui, yang mempunyai satu set utiliti dan kawalannya sendiri. Oleh itu, anda mungkin perlu melakukan kerja tambahan untuk memastikan Yui Treeview berfungsi dengan betul dengan perpustakaan lain.

Bagaimana saya boleh menyesuaikan penampilan Yui Treeview saya? Perpustakaan Yui menyediakan satu set kelas CSS yang boleh anda gunakan untuk gaya pokok anda. Anda juga boleh membuat kelas CSS tersuai anda sendiri jika anda memerlukan lebih banyak kawalan ke atas penampilan pokok anda. Ini termasuk data dari pangkalan data, fail XML, fail JSON, dan banyak lagi. Dengan memuatkan data dari skrip sisi pelayan, anda boleh membuat struktur pokok dinamik yang mewakili sistem fail pada pelayan anda. Pengendali ralat ini boleh menangkap sebarang kesilapan yang berlaku semasa permintaan dan memaparkan mesej yang sesuai kepada pengguna. Perpustakaan Yui direka untuk menjadi responsif dan berfungsi dengan baik pada pelbagai peranti, termasuk telefon bimbit dan tablet. Walau bagaimanapun, anda mungkin perlu membuat beberapa pelarasan untuk memastikan struktur pokok anda mudah dinavigasi pada skrin kecil.

Atas ialah kandungan terperinci Bina Pokok Ajax dengan Yui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!