Deskripsi persyaratan
Halaman Penambahan Produk, Anda perlu memilih model mobil. Masukkan modal anak pada modal bootstrap untuk digunakan.
Ada 4 level katalog secara total. Untuk menggunakan pohon direktori.
Lalu ada dua jenis: aktivitas dan komoditas, dan komponen perlu dipanggil oleh parameter non-transfer.
Merek model mobil harus menggunakan navigasi surat.
Implementasi Teknologi
Data ditransmisikan ke JSON dengan backend, dan kami mendapatkan Ajax dan kemudian mengoperasikannya.
Karena ada lebih dari puluhan ribu total data model kendaraan, tidak mungkin untuk memintanya pada satu waktu. Di sini kami menggunakan metode asinkron, masing -masing klik pada node direktori, dan memuat level berikutnya.
Di sini kami menggunakan dua parameter untuk mengontrol berbagai pemuatan kegiatan dan produk. _showprice dan dibuka
Tingkat data pertama yang dikirimkan dari backend adalah merek model, yang memiliki bidang dengan huruf awal. Inisialisasi navigasi huruf adalah untuk mengurutkan data ini dengan atribut kata pertama, dan kemudian mengabaikan elemen lain dengan huruf awal yang sama.
Untuk jenis aktivitas, tingkat data terendah yang diperiksa perlu dikembalikan. (Centang Audi dan Audi A6, dan hanya arti A6 yang dikembalikan), loop 4-lapis penuh digunakan di sini. Namun, itu dilintasi berdasarkan apakah ada yang diperiksa, dan kecepatannya tidak lambat.
/*** Dibuat oleh Nuenfeng pada 2016/5/23. * Komponen Pemilihan Model* Parameter:* showprice apakah akan memasukkan harga (ada kotak opsi dari merek yang tidak memasukkan harga, dan tidak ada pilihan semua fungsi)* Params Object yang dilewatkan di luar* Callback Callback Function*/(function () {var uRicarbrand = global.url.carbrandlist; // var uri- Uricarbrand = Global.url.carbrandlist; // var uri = Uricarbrand = Global. // Callback VaR RequestParams; _callback = Callback; if (! Terbuka || LastShowPrice! = ShowPrice) {this.init () dibuka = true; Modal Box $ ('#ZC-Sub-Modal'). AddClass ("BS-Example-Modal-LG"); ID = CB _ "> <span> pemilihan merek otomatis </span> '; Sukses.html (str); // $ ("#resourceId"). find ("input [type = checkbox]"). unbind (). bind ("click", function () {// if ($ (this) .is (': checked') == true) {// pilih semua node atas dan pilih // // unggul (function ("). $ (ini) .find ("input [type = centang]: pertama"). attr ("checked", true) //}); //} else {// // // uncecked // $ (ini) .siblings ("Ul"). Find ("input [type = kotak centang]"). masing -masing (fungsi () {() {() {() {() {() {() {() {() {() {() {() {() {() {(). //} //}); // Jaga agar jendela induk menggulir setelah menyembunyikan jendela anak $ ("#zc-sub-modal"). On ("hidden.bs.modal", function () {$ ('body'). AddClass ('modal-open')}); } Cartree.prototype.empty = function () {dibuka = false; console.log ('kosongkan saya'); } // Muat submenu var loadsubmenu = fungsi (objid, carbrandid, kali) {requestParams.brandid = carbrandid; ExecuteAyax (Global.url.carbrandlist, requestParams, function (data) {// memesan data dengan cara centil data.sort (keysrt ("firstword")); var menuHtml = "<ul>"; untuk (indeks var dalam data) {var menu = data [indeks]; menuHtml + = '<' 'caPar = "caPar =" ci -tu = {var menu = dATED [indeks]; menu {var {var {var {var {var + menu.carbrandid + '"brand ="' + menu.brand + '">'; // pohon dengan harga if (_showprice) {// level terakhir, tambahkan kotak opsi jika (menu.level> 3) {menuHtml + = '<input type =" centang kotak "=" resourceIds "value ="' + hole.car. '<span>' + menu.name + '</span>'; /'; dimuat, inisialisasi navigasi karakter charnavarr = []; Cobjtemp.TargetID = 'CB _'+Data [i] .carbrandid; } // Berikut ini adalah penyortiran objek array yang mengacaukan var keysrt = fungsi (propertiName) {return function (Object1, Object2) {var value1 = Object1 [PropertiDyName]; var value2 = Object2 [PropertiDyName]; if (value2 <value1) {return 1; } lain jika (value2> value1) {return -; } else {return; }}} // Simpan acara var save = function () {// Setelah konfirmasi, jalankan fungsi callback if (_showprice) {var res = getPriceresult (); if (res.status) {_callback (res.data); } else {alert (res.Error); kembali; }} else {_callback (getNoPricereSult ()); } // mengembalikan data, dan sembunyikan $ ('#zc-sub-modal'). Modal ('hide'); } // atur inisialisasi navigasi karakter var initchAnnaV = function () {var charnavhtml = '<ul id = "charnavbar">'; untuk (var i di charnavarr) {charnavhtml+= '<li> <a href = "#'+charnavarr [i] .targetid+'">'+charnavarr [i] .firstword+'</a> </li>'; } charnavhtml += '<li> <a> ↑ </a> </li>'; charavhtml += '<tombol type = "tombol"> simpan </button>'; charnavhtml += '</ul>'; $ ('#zc-sub-modal'). append (charnavhtml); $ ('. Modalgotop'). on ('click', function (e) {$ ('#zc-sub-modal'). animate ({scrolltop:},);}); } // statistik data pengembalian dengan harga var getpriceresult = function () {var result = {status: true, data: [], error: ''}; var litemp; var objtemp; $ ('. Treeview-Gray Input: Kotak Centang: Diperiksa'). Masing-masing (fungsi (i) {litemp = $ (ini) .parent ('li'); objtemp = {}; objtemp.brandAndid = litemp.attr ('value'); objtemp.brandemprandrandid = litemp.attr ('value'); objtempp.brandemp.atrangkrtr (litemp. litemp.find ('span'). text (); ObjTemp.CarBrandName + '! hasil pengembalian; } // statistik data pengembalian tanpa harga var getNoPriceresult = function () {var result = []; var litemp; var objtemp; var flag1; var flag2; var flag3; var flag4; var levelName; // melintasi 4 lapisan $ ('#cb _'). Anak -anak (). Anak -anak ('li'). Anak -anak ('input: kotak centang'). Masing -masing (fungsi (i) {if ($ (this). adalah (': centang')) {bendera = true;} else {flag = false;} $ (ini) .darent (). anak -anak (). anak -anak (). Anak -anak (found '. (i) {if ($ (ini) .is (': checked')) {flag = false = true =} else {bendera = false; $ (ini) .parent (). anak -anak (). anak -anak ('li'). Anak -anak ('input: kotak centang'). masing -masing (fungsi (i3) {if ($ (this) .is (': checked')) {flag1 = false; flag2 = false; flag3 = true;} else {flag3 = false;} $ (ini) .parent (). Anak -anak (). Anak -anak ('li'). Anak -anak ('input: kotak centang'). masing -masing (fungsi (i4) {if ($ (this) .is (': checked')) {flag1 = false; flag2 = false; flag3 = false; flag4 = true;} lainnya {flag4 = false; flag2 = flag3 = false; flag4 = true;} lainnya {flag4 = false;}}} {lit4) {lit4) {{false) {{{false) (lit4) {flag4 = false; false; lit4) {flag4; objTemp = {}; litemp.Children (span '). Teks (); //objtemp.carbrandname = litemp.children ('span'). Teks (); $ ini) .parent ('li'); ObjTemp.CarBrandName = objtemp.brand + '' + litemp.children ('span'). Teks (); litemp.attr (nilai '); hasil pengembalian; } // Bind The Click Event $ (dokumen) .on ('klik', '#ResourceId li', function (e) {E.StopPropagation (); if ($ (this) .attr ('open')) {$ (ini) .removeattr ('open'); $ (this) .Children ('Ul'). Hiden ('). 'dibuka'); // Jangan menarik ke bawah saat mengklik kotak multi-check.on ('klik', 'input [type = "centang kotak"]', fungsi (e) {e.stoppropagation ();}); window.cartree = cartree; } ());Metode Panggilan:
cartree = cartree baru (false, {}, function (data) {console.log (data);});Di atas adalah pengetahuan yang relevan dari penjelasan terperinci tentang kode komponen Direktori Pohon Implementasi Bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!