في النظام ، غالبًا ما يكون هناك العديد من عناصر القائمة ، يتوافق كل عنصر من عناصر القائمة مع صفحة. بشكل عام ، يحتاج المستخدمون فقط إلى استخدام بعض الوظائف الشائعة الاستخدام. إذا كنت بحاجة إلى الذهاب إلى القوائم في كل مستوى للعثور على الوظائف المقابلة ، فهي بالفعل مرهقة بعض الشيء. خاصة عندما يكون هناك العديد من القوائم والعملاء لا يعرفون النظام ككل ، إذا كانت هناك وحدة مفضلة مشابهة للمتصفح ، وتوصيل وتوفير بعض القوائم الشائعة الاستخدام ، والعثور على الصفحة المقابلة من الصفحة الرئيسية لهذه المفضلة في كل مرة ، فسيكون ذلك حقًا لتوفير العمالة ومريحة للغاية. يقدم هذا المقال فكرة تنفيذ هذه المفضلة في إطار تطوير Bootstrap المستند إلى Metronic.
1. تأثير معالجة واجهة النظام المفضل
من أجل إدراك هذه الوظيفة المفضلة ، نحتاج أيضًا إلى وضع مدخل إلى الوحدة النمطية المفضلة في الموقع الواضح لصفحة النظام ، وكذلك الوظيفة التي يمكن إضافتها إلى المفضلة المقابلة لكل صفحة.
بعد المقارنة ، وضعنا وظائف الإدخال هذه بالقرب من عنوان الصفحة ، حتى نتمكن من جمعها بسهولة وبسرعة ، كما هو موضح في التأثير التالي.
عندما نضغط على زر [إضافة إلى المفضلات] في الصفحة ، نضيف عنوان الصفحة المقابل والاتصال بسجل المفضل.
في وظيفة [VIEW المفضلة] ، يمكننا عرض روابط الصفحة التي أضفناها ، انقر فوق أحد السجلات لإدخال الصفحة المقابلة بسرعة ، والتي تدرك حاجتنا إلى إدخال الوحدة الوظيفية بسرعة.
أهم شيء هنا هو فرز السجلات المفضلة ، ونقل السجلات لأعلى أو لأسفل بحيث يمكن أن تتوافق مع معالجة الواجهة.
2. عملية تنفيذ مفضلة النظام
بعد فهم تأثير الواجهة المذكورة أعلاه لوظيفة "الوظيفة المفضلة" لصفحة النظام ، نحتاج إلى فهم عملية تنفيذها المحددة. أولاً ، نحتاج إلى تصميم جدول لتخزين المعلومات المقابلة للمفضلة وعنوان الصفحة وعنوان الصفحة والفرز والمعلومات الأخرى.
ويرد أدناه واجهة تصميم قاعدة البيانات.
لقد لاحظنا أن سجلات الفرز يتم تخزينها بتنسيق عشري ، ونحن نفرزها بقيمة مع خط الطول ، حتى عندما نتمكن من ضبط ، يمكننا تعديل الحجم بينهما.
استخدم Database2Sharp أداة توليد الكود لإنشاء الرمز والرمز الأساسي والرمز الكامن ذي الصلة بسرعة ، ثم دمجها في الإطار ، بحيث يمكننا الحصول على واجهة الوحدة بالكامل ومعالجة الرمز.
نظرًا لأن واجهة عرض البيانات الخاصة بنا وواجهة تحريرنا قياسية نسبيًا ، ومتطلبات عرض مدخل المفضلة مختلفة ، نحتاج إلى إضافة طريقة عرض إلى واجهة القائمة لعرض واجهة إدخال بسيطة ، كما هو موضح في الشكل.
تحتوي هذه الواجهة على معالجة الحركة للسجلات ، بما في ذلك الصعود أو الهبوط.
كما ذكرنا سابقًا ، يتم تحقيق فرز السجلات بشكل أساسي من خلال حقل SEQ من النوع العشري.
عند تهيئة فئة الكيان ، نقوم بتعيين القيمة المرتبة إلى الطابع الزمني UNIX للوقت الحالي.
يظهر رمز دالة DateTiMetoint أعلاه أدناه ، وهو أيضًا طريقة المعالجة الشائعة الاستخدام.
/// <summary> /// واجهة الوقت الموسعة ، يمكنها إرجاع قيمة التشكيل /// </summary> /// <param name = "time"> </param> /// إرجاع (int) (الوقت - وقت البدء) .TotalSeconds ؛ }
من أجل تحقيق حركة التسجيلات ، نحتاج إلى تنفيذ معالجة منطقية متحركة في طبقة BLL للخدمة لتسهيل المكالمة في وحدة التحكم.
/// <summary> /// update Up أو Down Order /// </summary> /// <param name = "id"> معرف مسجل </param> ///
رمز الوظيفة المنفذة كما يلي
/// <summary> /// update Up أو Down Order /// </summary> /// <param name = "id"> معرف السجل </param> /// <param name = "moveup"> Up أو تحرك ، True </param> // <returns> </returns> public bool updown (string id -move) نتيجة Bool = false ؛ webfavoriteInfo info = findByid (id) ؛ if (info! = null) {// إنشاء شرط سلسلة الاستعلام = "" ؛ if (isDescending) {inction = string.format ("seq {0} {1}" ، moveup؟ ">": "<" ، info.seq) ؛ } else {inction = string.format ("seq {0} {1}" ، moveup؟ "<": ">" ، info.seq) ؛ } var list = riledal.find (inction) ؛ Newseq العشري = 0M ؛ Switch (list.count) {case 0: newSeq = info.seq ؛ // إنه بالفعل في الأعلى أو السفلي ، يظل الترتيب دون تغيير افتراضيًا ؛ الحالة 1: // هناك سجل أعلاه أو أقل إذا (isdescending) {newSeq = Moveup؟ (قائمة [0] .Seq + 1M): (قائمة [0]. seq - 1m) ؛ } آخر {newSeq =! moveup؟ (قائمة [0] .Seq + 1M): (قائمة [0]. seq - 1m) ؛ } استراحة؛ الحالة 2: // المنطقة الوسطى ، خذ متوسط القيمة newSeq = (قائمة [0]. seq + list [1]. seq) /2m ؛ استراحة؛ الافتراضي: // الحالة التي يكون فيها أكثر من اثنين إذا (moveup) {newSeq = (list [list.count - 2]. seq + list [list.count - 1]. } آخر {newSeq = (list [0]. seq + list [1] .Seq) / 2m ؛ } استراحة؛ } // Unified Modification Order info.seq = newSeq ؛ النتيجة = تحديث (معلومات ، info.id) ؛ } نتيجة الإرجاع ؛}وبهذه الطريقة ، نقوم بتغليف واجهة طبقة BLL هذه في وحدة تحكم MVC لتسهيل معالجة مكالمات Ajax على الواجهة الأمامية للصفحة. رمز التغليف كما يلي.
/// <summary> //// نقل السجل /// </summary> /// <param name = "id"> معرف السجل </param> /// <param name = "up"> التحديث صحيح ، وإلا فهو خطأ </param> // </returns> </returs> if (! string.isnullorEmpty (id)) {try {result.success = bllfactory <bebfavorite> .instance.updown (id ، up) ؛ } catch (استثناء ex) {result.errormessage = ex.message ؛ }} إرجاع tojsoncontent (نتيجة) ؛}وبهذه الطريقة ، يمكننا استدعاء هذه الطريقة في عرض الواجهة في الواجهة الأمامية للصفحة.
أولاً ، قم بإنشاء رمز HTML الأمامي من خلال ربط JS ، كما هو موضح أدناه.
$ ("#grid_body"). html ("") ؛ $. كل (بيانات. "<a href = 'javaScript:' BTN-SM Blue 'OnClick =/"Down ('" + item.id + "')/" title =' move down '> <span class =' glyphicon glyphicon-arrow-down '> </span> </a> "؛ tr + =" </td> "؛ثم قم بمعالجةها من خلال وظيفة أعلى أو لأسفل ، وحرك الموضع لأعلى أو لأسفل.
var updownurl = "/webfavorite/updown" up (id) {var postData = {id: id ، up: true} ؛ $ .post (updownurl ، postdata ، function (json) {var data = $ .parsejson (json) ؛ if (data.success) {showtips ("move up success") ؛ refresh () ؛ // refresh data} ell {data.errormessage) ؛}}) ؛} $ .post (updownurl ، postdata ، function (json) {var data = $ .parsejson (json) ؛ if (data.success) {showtips ("تحرك بنجاح") ؛ refresh () ؛ // refresh data} ellهذا ينفذ ترتيب الحركة الذي نحتاجه. بالإضافة إلى ذلك ، عند الإضافة ، نحدد ما إذا كان المستخدم المقابل قد أضاف عنوان URL. إذا كانت موجودة ، فلا داعي لإضافتها مرارًا وتكرارًا. يحتاج الواجهة الأمامية فقط إلى استدعاءها من خلال Ajax ثم الرد عليها.
من خلال تنفيذ هذه الرموز ، يمكننا إدارة المفضلة بسرعة ودخول المستخدم بسرعة ، وتوفير تجربة أكثر ودية.
ما سبق هو الوظيفة المفضلة لربط الصفحة بناءً على bootstrap الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!