في المقالة السابقة ، يتم تلخيص ملخص تجربة إطار تطوير Bootstrap Metronic [I] معالجة وحدات الإطار ، معالجة وحدة القائمة ، بعض الملخص الأساسي لإطار تطوير Bootstrap ، بما في ذلك تأثير الواجهة الشاملة ، وكذلك الاستخدام للمواد المميزة.
في عرض واجهة البيانات ، تعتبر عرض البيانات الجدولية وترحيلها عمليات معالجة شائعة جدًا. باستخدام تخطيط نمط Bootstrap ومعالجة بيانات Ajax من JQuery ، يمكن تحقيق عرض ديناميكي وتراجع البيانات بشكل جيد.
1. قائمة العرض ومعالجة الترحيل 1) قائمة عرض البيانات
في العديد من الصفحات ، نحتاج عمومًا إلى إدراج سجلات قاعدة البيانات وتوصيلها.
القسم التالي من قائمة الأشجار على اليسار هو منطقة عرض استعلام البيانات العامة على اليمين ، والتي تنقسم إلى جزأين: محتوى الاستعلام وقائمة البيانات. عادة ما يتم وضع محتوى الاستعلام في شكل للمعالجة. عندما يقوم المستخدم بإعداد الاستعلام ، نقوم بمعالجة الحدث ونطلب البيانات المقابلة من وحدة التحكم في خلفية MVC لإعادتها إلى الطرف الأمامي للصفحة ، وعرض البيانات وتوصيلها.
كما هو موضح في رمز الاستعلام في صفحة القائمة ، يتم عرض ما يلي.
<form id = "ffsearch"> <viv> <viv> <billy> اسم العرض </label> <viv> <input name = "whc_name" type = "text" <label> عنوان اتصال الويب </label> <viv> <input name = "whc_url" type = "text"> </viv> </viv> </viv> <viv> <viv> <label> أيقونة قائمة الويب </label> <viv> <input name = "whc_webicon" type = "text"
في رمز JS في الصفحة ، نقوم بمعالجة معالجة البيانات بعد تهيئة الصفحة ، كما هو موضح في البرنامج النصي التالي.
// تهيئة الصفحة $ (function () {initjstree () ؛ // شجرة التهيئة bindEvent () ؛ // البحث عن معالجة الأحداث (CurrentPage) ؛ // تهيئة بيانات الصفحة الأولى initDictitem () ؛ // معلومات القاموس التهيئة}) ؛يتم عرض رمز HTML لعرض البيانات أدناه. يتم عرض المحتوى الرئيسي لرأس الجدول ، ويتم تصميم المحتوى الرئيسي لشبكة الجدول بشكل ديناميكي وعرضه بواسطة البرامج النصية.
<table id = "grid" cellpadding = "0" cellpacing = "0"> <thead id = "grid_head"> <tr> <th> <type type = "checkbox" onClick = "Selectall (this)" أيقونة </th> <th> رقم النظام </th> <th> العملية </th> </tr> </haid> <tbody id = "grid_body"> </tbody> </tabl
تتم معالجة عرض البيانات من خلال وظيفة Search Script بعد أن تكون الصفحة جاهزة. عند المعالجة ، قم أولاً بتمرير شروط نموذج الرقم التسلسلي ومعلومات حالة الترحيل في وحدة تحكم MVC للحصول على بيانات القائمة المقابلة ، وربطها ديناميكيًا على الواجهة لإكمال عملية المعالجة بأكملها. يظهر لقطة الشاشة المحددة أدناه.
والرمز في الداخل
tr += getActionHtml (item.id) ؛
بعد ذلك ، يتم إنشاء بعض أزرار التشغيل من خلال البرامج النصية ، كما يلي الواجهة.
2) معالجة ترحيل البيانات
البيانات المعروضة على صفحتنا ليست عمومًا سجلًا ثابتًا ، لذا فإن ترقيم الصفحات هو أيضًا معالجة ضرورية ، والتي يمكن أن تحسن الأداء وتحسين تجربة الاستخدام. تتم معالجة ترقيم البيانات باستخدام paginator bootstrap bootstrap. يتم استخدام هذا التحكم كثيرًا وهو مكون إضافي قوي للغاية.
Bootstrap paginator عنوان رمز github الخاص به هو: https://github.com/lyonlai/bootstrap-paginator
يمكن تقديم أمثلة استخدامه ، يرجى الرجوع إلى: http://lyonlai.github.io/bootstrap-paginator/
عند استخدام عنصر التحكم هذا ، بعد تقديم أنماط jQuery و Bootstrap ومكتبات الفصل ، يمكنك إضافتها واستخدامها من خلال خط الكود التالي.
<script src = "/js/bootstrap-paginator.min.js"> </script>
يمكن تنفيذ ترحيل التحكم هذا عن طريق التعامل مع الأحداث التي تنقر فوق الصفحة وتغيير الصفحة.
لعرض المحتوى على الصفحة ، نضيف DIV إلى رمز HTML ونعلن عن عنصر UL مع GRID_Paging. الرمز كما يلي.
<viv> <ul id = 'grid_paging'> </ul> </viv>
ثم رمز معالجة JS المحدد كما يلي.
في خلفية MVC ، نحتاج إلى الحصول على ظروف الترحيل وشروط البيانات التي يقرها المستخدم في الصفحة الأمامية ، حتى نتمكن من الحصول على البيانات المقابلة بناءً على هذه المعلمات وإعادتها إلى العميل.
نظرًا لأن هذه المعالجة شائعة جدًا ، يمكننا وضعها في وحدة تحكم الطبقة الأساسية للمعالجة. إذا كانت المعالجة الخاصة مطلوبة ، فعليك إعادة كتابة وظيفة ترقيم الصفحات findWithPager في وحدة تحكم الفئة الفرعية.
/// <summary> /// Queary قاعدة البيانات وفقًا للشروط وإرجاع مجموعة الكائنات (لعرض بيانات الصفحات) /// </summary> /// <returns> حدد مجموعة الكائن </returns> public virtual actionResultisteCheckaiCkaiCkaaCaiTeCkeActeCkeActeCkeActeCkeActeArized ( سلسلة حيث = getPagerCondition () ؛ pagerinfo pagerinfo = getPagerInfo () ؛ قائمة <T> list = baseBll.FindWithPager (حيث ، pagerinfo) ؛ // json format Emerventices {total: 22 ، rows: {}} // إنشاء تنسيق JSON لتمرير var result = new {total = pagerinfo.recordCount ، rows = list} ؛ إرجاع tojsoncontentdate (النتيجة) ؛ }من بينها ، GetPagerInfo هو الحصول على معلمات ترقيم الصفحات التي يمررها المستخدم. هل ما زلت تتذكر معلمات عنوان URL المعالجة بواسطة الصفحة الأمامية أعلاه ، كما هو موضح أدناه.
url = "/menu/findWithPager؟ page =" + page + "& rows =" + rows ؛
رمز التنفيذ الخاص بوظيفة GetPagerInfo وحدة تحكم MVC محددة كما يلي.
/// <summary> /// الحصول على بيانات كائن تراجع وفقًا لمعلمات الطلب /// </summary> /// <returns> </returns> حماية pagerinfo pagerinfo getPagerinfo () {int pageIndex = request ["page"] == null؟ 1: int.parse (طلب ["صفحة"]) ؛ int pagesize = طلب ["صفوف"] == NULL؟ 10: int.parse (طلب ["الصفوف"]) ؛ pagerinfo pagerinfo = new pagerinfo () ؛ pagerinfo.currenetpageIndex = pageIndex ؛ pagerinfo.pagesize = pagesize ؛ إرجاع pagerinfo ؛ }ثم بعد الحصول على شروط النموذج وظروف الترحيل ، يتم تمرير فئة منطق الأعمال إلى الإطار. هذه هي بالفعل فئة الدعم في أسفل الإطار ولن تستمر في التوسع.
قائمة <T> list = baseBll.FindWithPager (حيث ، pagerinfo) ؛
تأثير الواجهة النهائية على النحو التالي
2. البرنامج المساعد jstree
يحسن القسم السابق أيضًا عرض قوائم الأشجار. بشكل عام ، إذا كانت البيانات هرمية ، فإن عرض قوائم الأشجار يمكن أن يعرض بنيةها بشكل حدسي. لذلك ، في كثير من الحالات ، يمكن أن تساعدنا قوائم الأشجار في عرض التصنيف للبيانات.
على سبيل المثال ، بالنسبة لبيانات المستخدم ، يمكننا تصنيف الهيكل أو الدور التنظيمي للمستخدم ، ويمكن عرضه بصريًا من خلال قوائم الأشجار ، بحيث عندما نبحث عن أنواع مختلفة من قوائم المستخدمين ، يكون من السهل العثور عليها.
أو بالنسبة لبيانات القاموس أو بيانات المقاطعة والمدينة ، يمكن أيضًا عرضها من خلال قائمة الأشجار.
العنوان الرسمي للتحكم في Jstree هو https://www.jstree.com/
لقد أوضح موقع الويب بالفعل حول التعليمات وتفسيرات الحالات لعناصر التحكم في Jstree. بشكل عام ، يمكننا استخدامها من خلال الإشارة إلى الأمثلة مباشرة.
رمز استخدام Jstree البسيط هو كما يلي
$ (function () {$ ('#jstree_demo_div'). jstree () ؛}) ؛بالنسبة لأحداث Jstree ، يمكننا عمومًا ربط الأحداث من خلال الكود التالي.
$ ('#jstree_demo_div'). on ("change.jstree" ، function (e ، data) {console.log (data.selected) ؛}) ؛بالنسبة إلى Jstree ، نستخدم بيانات JSON عمومًا لربطها ديناميكيًا. تعريف تنسيق البيانات لهذا JSON هو كما يلي.
{id: "string" // مطلوب الوالد: "سلسلة" // النص المطلوب: "سلسلة" // أيقونة نص العقدة: "سلسلة" // سلسلة الحالة المخصصة: {فتح: boolean // هل العقدة مفتوحة: boolean // هل تعطل العقدة: سمات لإنشاء عقدة}بشكل عام ، نستخدم البرنامج النصي التالي لمسح البيانات وربطها.
$ ('#jstree_demo_div'). البيانات ('jstree' ، false) ؛ // مسح البيانات ، يجب عليك // ربط بيانات json بشكل غير متزامن $ .getjson (url ، function (data) {$ ('#jstre_div'). }). bind ('loaded.jstree' ، loadedFunction) ؛}) ؛إذا كنا بحاجة إلى تزويد المستخدم بخانة الاختيار وتعيين الحالة المحددة لـ Jstree ، فإن تأثير الواجهة يكون كما يلي.
ثم يجب تغيير وظيفة التهيئة العامة ، كما هو موضح في الكود التالي
. }). bind ('loaded.jstree' ، loadedFunction) ؛من خلال الجمع بين الاثنين ، يمكننا تحسين الربط التهيئة لعنصر تحكم JSTREE في وظيفة JS Public BindJstree.
. = وسيطات [2] || خطأ شنيع؛ // قم بتعيين القيمة الافتراضية لمربع الاختيار إلى false if (isCheck) {// تهيئة شجرة checkbox $ .getjson (url ، function (data) {control.jstree ({'plugins': ["checkbox"] ، // مربع التحديد يظهر 'checkbox': {cascade: "استجابة": false}}}). } else {// تهيئة قائمة الأشجار العادية $ .getjson (url ، function (data) {control.jstree ({'core': {'data': data ، "turns": {"reprientive": false}}}). bind ('loaded.jstree' ، loadedfunction) ؛}) ؛ }}لذلك ، عندما تربط الصفحة Jstree ، يمكن تبسيط الكود
// تهيئة وظيفة قائمة المؤسسة initDeptTreeView () {var treeurl = '/user/getMyDeptjStreeJson؟ userId =@session ["userid"]' ؛ bindjstree ("jstree_div" ، treeurl) ؛ // تغيير معالجة الأحداث للتحكم في الأشجار $ ('#jstree_div'). on ("change.jstree" ، function (e ، data) {var icon = data.node.icon ؛ loadDatabyou (data.selected) ؛}) ؛ }للحصول على قائمة مربعات الاختيار ، يكون رمز التهيئة كما يلي.
. bindjstree ("tree_function" ، treeurl ، true) ؛ // أذونات بيانات الدور ، تهيئة جميع الإدارات First Treeurl = '/user/getMyDeptJstreeJson؟ userId =@session ["userId"]' ؛ bindjstree ("tree_roledata" ، treeurl ، true) ؛بالنسبة لخانات الاختيار ، عادةً ما نهيئة البيانات ثم نضع الحالة المحددة لقائمة الأشجار حسب الحاجة. هذا لا يتطلب تهيئة متكررة للشجرة ، والتي يمكن أن تحسن بشكل فعال من تجربة الأداء والاستجابة.
بعد تهيئة قائمة الأشجار ، نحتاج إلى مسح عناصر التحديد ثم تعيين عناصر التحديد التي نحتاجها. الرمز المحدد هو كما يلي ، انتبه إلى معالجة أحداث Uncheck_all و Check_node.
// تهيئة وظيفة إذن بيانات الدور (المؤسسة) initRoleData (id) {if (id! = "") {var treemenu = "tree_roledata" ؛ $ ('#' + treemenu) .jstree ("uncheck_all") ؛ // قم بإلغاء تحديد كل الاختيار // تحديد المحتوى المحدد $ .getjson ("/roledata/getRoledatalist؟ Treemenu) .jstree ('check_node' ، item) ؛ // select node}) ؛ }}عند حفظ البيانات ، نحصل على قائمة اختيار عقدة JSTEE ثم حفظ البيانات. الرمز المحدد كما يلي.
// Save Role Data Semission SaveroleData (RoleId) {var oulist = $ ('#tree_roledata'). jstree ('get_selected') ؛ var url = '/roledata/updatedata؟ r =' + math.random () ؛ var postdata = {{romeid: olleid ، oulist: oulist.join ('،')} ؛ $ .post (url ، postdata ، function (json) {initRoleData (rolyId) ؛}). خطأ (function () {showtips ("أنت غير مخول لاستخدام هذه الوظيفة ، يرجى الاتصال بالمسؤول للتعامل معها.") ؛}) ؛ }حسنًا ، بعد كل شيء ، قمت بتقديم عرض البيانات العادي وترحيل البيانات ؛ ملزمة JSTRE ، معالجة الأحداث ، تخزين البيانات وغيرها من العمليات. آمل أن أحصل على دعمك المستمر. سأستمر في تقديم النقاط الرئيسية التي ينطوي عليها تطوير Bootstrap واستخدام مختلف المكونات الإضافية من أجل جعل التعلم أكثر واقعية وعملية ، ويمكن أن يوفر لنا إشارات مفيدة لمشاريع تطوير السعر الحقيقي.
المحتوى أعلاه هو ملخص لتجربة إطار تطوير Metronic Bootstrap على أساس معالجة ترقيم ترقيم القائمة Bootstrap [2] واستخدام المكونات الإضافية ، وآمل أن يكون مفيدًا للجميع. أود أن أشكرك على دعمك لموقع Wulin.com. أعتقد أننا سنفعل ما هو أفضل!