وصف المتطلبات
صفحة إضافة المنتج ، تحتاج إلى تحديد نموذج سيارة. منبثقة مشروط الطفل على مشروط bootstrap للاستخدام.
هناك 4 مستويات من الكتالوجات في المجموع. لاستخدام شجرة الدليل.
ثم هناك نوعان: النشاط والسلعة ، ويجب أن يتم استدعاء المكون بواسطة المعلمات غير النسيلة.
يجب أن تستخدم العلامات التجارية للسيارة النموذجية التنقل.
تنفيذ التكنولوجيا
يتم إرسال البيانات إلى JSON بواسطة الواجهة الخلفية ، ونحصل على AJAX ثم نديرها.
نظرًا لوجود أكثر من عشرات الآلاف من بيانات نموذج المركبات الكلي ، فمن المستحيل طلبها في وقت واحد. هنا نستخدم طريقة غير متزامنة ، كل نقرة على عقدة الدليل ، وتحميل مستواه التالي.
نستخدم هنا معلمتين للتحكم في تحميل الأنشطة والمنتجات المختلفة. _showprice وفتح
المستوى الأول من البيانات المنقولة من الواجهة الخلفية هو العلامة التجارية النموذجية ، التي لديها الحقول مع الرسالة الأولية. تهيئة التنقل في الحروف هي فرز هذه البيانات باستخدام سمة الكلمة الأولى ، ثم تجاهل العناصر الأخرى بنفس الرسالة الأولية.
بالنسبة لنوع النشاط ، يجب إرجاع أدنى مستوى من البيانات التي يتم فحصها. (تم إرجاع علامة Audi و Audi A6 ، وعنوان A6 فقط) ، يتم استخدام حلقة كاملة من 4 طبقات هنا. ومع ذلك ، يتم اجتيازها بناءً على ما إذا كان هناك فحص ، والسرعة ليست بطيئة.
/*** تم إنشاؤه بواسطة Nuenfeng في 2016/5/23. * مكون تحديد النموذج* المعلمات:* showprice ما إذا كان سيتم إدخال السعر (هناك صناديق خيارات من العلامة التجارية التي لا تدخل السعر ، ولا يوجد اختيار كل وظيفة)* تم تمرير كائن params خارج* وظيفة رد الاتصال*/(function () / /طلب رد الفعل ؛ _callback = فتح (! مربع مشروط (#zc-sub-modal). addClass ("BS-Example-LG") ID = "CB _" <span> اختيار العلامة التجارية </span> ؛ الناجحين. html (str) ؛ // $ ("#ResourceId"). find ("input [type = checkbox]"). unbind (). bind ("click" ، function () {// if ($ (this) .is (': checked') == true) {// حدد جميع العقد العلوية و Select // Superior Select // $ (this) .parents ("li" $ (this) .find ("type = checkbox]: first"). } //}) ؛ // حافظ على تمرير النافذة الأصل بعد إخفاء نافذة الطفل $ ("#zc-sub-modal"). على ("hidden.bs.modal" ، function () {$ ('body'). addClass ('modal-open')}) ؛ } cartree.prototype.empty = function () {opened = false ؛ console.log ('فارغة me') ؛ }. executeajax (global.url.carbrandlist ، requestParams ، function (data) {// order data في data.sort coquettish. menu.carbrandid + '"brand ="' + menu.brand + '">' ؛ // tree مع السعر إذا (_showprice) {// المستوى الأخير ، أضف مربع الخيار إذا (mene.level> 3) {mentml + = '<input type =" checkbox "name ="' menu.name + '</span>' ؛ <span> "Menu.name + '</spans> ؛ charnavarr = [] "cb _ 'data [i] .carbrandid ؛ }. var value2 = object2 [propertyName] ؛ if (value2 <value1) {return 1 ؛ } آخر if (value2> value1) {return -؛ } آخر {return ؛ }}} // حفظ الحدث var save = function () {// بعد التأكيد ، قم بتنفيذ وظيفة رد الاتصال إذا (_showprice) {var res = getPriceresult () ؛ if (res.Status) {_callback (res.Data) ؛ } آخر {Alert (res.error) ؛ يعود؛ }} آخر {_callback (getNopriceresult ()) ؛ } // إرجاع البيانات ، وإخفاء $ ('#zc-sub-modal'). modal ('Hide') ؛ }. لـ (var i in charnavarr) {charnavhtml+= '<li> <a href = "#'+charnavarr [i] .TargetId+'">'+charnavarr [i] .firstword+'</a> </li>' ؛ } charnavhtml += '<li> <a> ↑ </a> </li>' ؛ charnavhtml += '<button type = "button"> حفظ </button>' ؛ charnavhtml += '</ul>' ؛ $ ('#zc-sub-modal'). إلحاق (charnavhtml) ؛ $ ('. modalgotop'). on ('click' ، function (e) {$ ('#zc-sub-modal'). }. فار ليمب var objtemp ؛ دولار (' litemp.find ('span'). text () ؛ + ' نتيجة العودة } // إحصائيات بيانات الإرجاع بدون سعر var getNopriceresult = function () {var result = [] ؛ فار ليمب var objtemp ؛ var flag1 ؛ var flag2 ؛ var flag3 ؛ var flag4 ؛ var levelname ؛ . {if ($ (this) .is (': $ (هذا) .parent (). الأطفال (). الأطفال ('li'). الأطفال ('الإدخال: مربع الاختيار'). كل (دالة (i3) {if ($ (this) .is (': check')) {flag1 = false ؛ flag2 = false ؛ flag3 = true ؛ $ (هذا) .parent (). الأطفال (). الأطفال ('li'). الأطفال ('الإدخال: مربع الاختيار'). كل (دالة (i4) {if ($ (this) .is (': check')) {flag1 = false ؛ flag2 = false ؛ flag3 = false ؛ flag4 = true ؛ {} ؛ النتيجة Litemp.Childer ("span '). text () ؛ objtemp.carbrandid = litemp.attr ('value') ؛ النتيجة Litemp.Children ('span'). text () ؛ نتيجة العودة } // ربط الحدث النقر $ (document) .on ('click' ، '#ResourceId li' ، function (e) { $ (هذا). // لا تنسحب لأسفل عند النقر فوق مربع الفحص المتعدد. Window.cartree = Cartree ؛ } ()) ؛طريقة الاتصال:
CARTREE = NEW CARTREE (false ، {} ، function (data) {console.log (data) ؛}) ؛ما ورد أعلاه هو المعرفة ذات الصلة بالتفسير التفصيلي لرمز مكون دليل شجرة تنفيذ Bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!