قطعة مكون جدول جدول Bootstrap من سلسلة مكون JS [End Chapter]

سلسلة جدول Bootstrap:

شرح مفصل لجدول الجدول JS Component Artstrap Table (الإصدار الأساسي)

قطعة مكون جدول جدول Bootstrap من سلسلة مكون JS [End Chapter]

قطعة الجدول الجدول BootStrap قطعة مكون من سلسلة مكون JS [2. طاولة الوالدين والترتيب عمود الصف]

جدول Bootstrap هو بيانات خفيفة الوزن وغنية بالميزات معروضة في نموذج الجدول ، ودعم التحديد الفردي ، ومربعات الاختيار ، والفرز ، والترحيل ، والعرض/إخفاء الأعمدة ، وجدول تمرير العنوان الثابت ، والتصميم المتجاوب ، وبيانات Ajax Loading JSON ، والنقر فوق الأعمدة المرتبة ، وما إلى ذلك.

1. عرض التأثير

1. نمط صف الجدول

على سبيل المثال ، لدينا شرط لعرض صفحة الطلب ، وتظهر الطلبات ذات الحالات المختلفة ألوانًا مختلفة ، كما هو موضح في الشكل:

2. تحرير داخل خط النموذج

في المقال الأول ، سأل أحد صديق الحديقة المدون عما إذا كان بإمكانه دعم تأثير التحرير داخل الصناعة ، وكان الإجابة نعم. لنلقي نظرة على التأثير:

قبل التحرير

انقر على بيانات الخلية

بعد التحرير ، أكمل

3. مزيج من الصفوف والأعمدة من الجداول

يعتقد المدونون أنه من الشائع جدًا لعمليات الدمج والمرتبة ، خاصة عند تقديم تقارير الصفحة. لنلقي نظرة على التأثير:

الصفحة الحالية غير مكتملة ، انقر للدخول وإلقاء نظرة. ماذا عن ذلك؟ التأثير جيد جدا.

4. تصدير بيانات الجدول

فيما يتعلق بتصدير بيانات الجدول ، يدعم جدول Bootstrap تصدير ثلاثة أوضاع: Basic ، All ، المحددة. أي أن تصدير البيانات للصفحة الحالية وجميع تصدير البيانات وتصدير البيانات المحدد. كما يدعم تصدير أنواع مختلفة من الملفات ، مثل Excel Common و XML و JSON وغيرها من التنسيقات.

قم بتصدير الصفحة الحالية للتفوق

تصدير جميع البيانات في الجدول

تصدير بيانات الصف المحدد

أما بالنسبة لتصدير أنواع الملفات الأخرى ، فهو في الأساس هو نفسه Excel ، وبالتالي لن يتم عرض التأثير.

2. مثال رمز نمط صف الجدول

فيما يتعلق بإعداد نمط صفوف الجدول ، فإن الوظائف الأخرى هي وظائفها الأساسية. لماذا وضعها في المقالة الثالثة؟ ذلك لأن المدون يعتقد أن هذه الوظيفة يمكن استخدامها في كل مكان. بالطبع ، التأثير ليس صعبًا. يمكنك أيضًا تحقيق لون خلفية TR باستخدام jQuery ، لكن المدون يعتقد أنه نظرًا لأن جدول Bootstrap يوفر آلية لتعيين لون الخلفية للصف ، فلماذا لا تستخدم واجهة برمجة التطبيقات المدمجة. دعونا نرى كيفية تنفيذها.

عند تهيئة الجدول

 // تهيئة الجدول $ ('#tb_order'). bootstraptable ({url: '/tableTyle/getorder' ، // request url (*) method: 'get' ، // request method (*) تحتاج إلى تعيين هذه الخاصية (*) ترقيم الصفحات: صحيح ، // ما إذا كنت تريد عرض الترحيل (*) قابل للفرز: خطأ ، // ما إذا كان لتمكين sortorder: "ASC" ، // طريقة الفرز QueryParams: otableInit.queryparams ، // pagination pagination (*) الصفحة الأولى للتحميل ، صفحات الصفحة الأولى الافتراضية: 10 ، // عدد صفوف السجلات لكل صفحة (*) باجيلست: [10 ، 25 ، 50 ، 100 ، // عدد الصفوف لكل صفحة لتحديد (*) البحث: showRefresh: True ، // هل يعرض زر التحديث MinimumCountColumns: 2 ، // الحد الأدنى لعدد الأعمدة المسموح به ClickToSelect: True ، // حيث يتم تمكين النقر فوق ارتفاع الصف: 500 ، // ارتفاع سطر ، إذا لم يتم تعيين السمة الفريدة ، فإن الجدول يشعر تلقائيًا بتوضيح الجدول وفقًا لعدد السجلات ، فريدة من نوعها: // هل زر التبديل للعرض المفصل وقائمة العرض cardview: false ، // هل العرض التفصيلي عرض التفاصيل: false ، // هل الجدول الأصل والطفل rowstyle: function (row ، index) {// هناك 5 قيم هنا في 5 ["النشاط" ، "النجاح" ، مجدولة ") {strclass = 'success' ؛ // يوجد أيضًا نشط} آخر إذا (row.order_status ==" deleted ") {strclass = 'danger' ؛} else {return {} ؛ "order_type" ، العنوان: "نوع الترتيب"} ، {الحقل: "order_status" ، العنوان: "حالة الطلب"} ، {الحقل: "ملاحظة" ، العنوان: "ملاحظات" ،]}) ؛

في الواقع ، ينصب التركيز على هذه المعلمة:

    ROWSTYLE: FUNCTION (row ، index) {// هناك 5 قيم تمثل هنا الألوان في 5 ["نشط" ، "نجاح" ، "معلومات" ، "تحذير" ، "خطر"] ؛ var strclass = "" {strclass = 'danger' ؛} else {return {} ؛} return {classes: strclass}} ،

يدعم جدول bootstrap ألوان خلفية الصف للجدول في 5 ، وهي "نشطة" ، "نجاح" ، "معلومات" ، "تحذير" ، "خطر". بالنسبة لكل لون خلفية مقابل ، يمكنك رؤيته عن طريق تشغيل الرمز. فيما يتعلق بقيمة إرجاع هذه الطريقة ، درسها المدون أيضًا لفترة طويلة عندما استخدمها لأول مرة. وفقًا لقواعد جدول Bootstrap ، من الضروري إعادة نوع كائن JSON-Format مثل: {Classes: Strclass}.

3. مثال على تحرير رمز في سطر النموذج

فيما يتعلق بتحرير الجدول ، العديد من ملفات JS التي تحتاج إلى تمديدها باستخدام جدول bootstrap.

1. تقديم ملفات JS إضافية

 <Link Rel = "STYLESHEET" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-edable/css/bootstrap-editable.css"> <script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src =" ~/content/bootstrap-table/extensions/editable-table-dable-dable.js

2. عند تحديد جدول على صفحة CSHTML ، أضف سمتين

 <table id = "tb_departments"> <thead> <tr> <th data-field = "name" data-edable = "true" with incert data-sitable = "true"> واصف </th> </r> </tead> </table>

إذا تمت تهيئته في JS ، فإن طريقة الكتابة هي كما يلي:

 {الحقل: "الاسم" ، العنوان: "الاسم" ، قابل للتحرير: TRUE}

3. سجل تحرير وحفظ الأحداث عند تهيئة الجدول في JS

 $ ('#tb_departments'). bootstraptable ({url: '/editable/getDepartment' ، // request url (*) method: 'get' ، // request method method (*) toolbar: تحتاج إلى تعيين هذه الخاصية (*) ترقيم الصفحات: صحيح ، // ما إذا كنت تريد عرض الترحيل (*) قابلة للفرز: خطأ ، // ما إذا كان لتمكين sortorder: "ASC" ، // طريقة الفرز QueryParams: otableInit.queryparams ، // تمرير المعلمات (*) sidepagination: صفحات الصفحة الأولى الافتراضية: 10 ، // عدد السجلات لكل صفحة (*) ONEDITABLESAVE: الدالة (الحقل ، الصف ، OLDVALUE ، $ el) {$ .AJax ({type: "post" ، url: "/editable/edit" ، data: {strjson: json ناجح ") ؛}} ، خطأ: function () {Alert (" error ") ؛} ، كاملة: function () {}}) ؛}}) ؛

النقطة الأساسية هي النظر في التعامل مع هذا الحدث

 ONEDITABLESAVE: وظيفة (الحقل ، الصف ، OLDVALUE ، $ el) {$ .ajax ({type: "post" ، url: "/editable/edit" ، data: {strjson: json.stringify (row)} ، success: function (data ، status) {if status == "success") {ALERT ("ERROR") ؛} ، أكمل: function () {}}) ؛}

تحتاج الطريقة المقابلة إلى التعامل مع المنطق المحفوظ بنفسك. يتوافق حقل المعلمات الأربعة ، والصف ، و oldvalue ، و $ el مع اسم العمود الحالي ، وكائن بيانات الصف الحالي ، والقيمة قبل التحديث ، وكائن jQuery للخلية الحالية المحررة.

4. مثال على صف الجدول ورمز دمج العمود

لا تتطلب وظيفة دمج عمود الصف للجدول إشارة إلى ملفات JS الأخرى. يحتاج فقط إلى استخدام Table Colspan و Rowspan على صفحة CSHTML لتحقيق ذلك.

1. صفحة CSHTML

 <table id = "tb_report"> <thead> <tr> <th colspan = "4" data-valign = "middle" data-align = "center"> Q1 </h> <th colspan = "4" data-valign = "middle" data-align = "center" </th> <th colspan = data-align = "center"> Quarter </h> <th data-field = "TotalCount" rowspan = "2" data-valign = "middle" data-align = "center"> summary remost </th> </tr> <tr> <th data-field = "jancount" data-align = "center"> Jan </th data data-align = "center"> febCount </h> <th data-field = "marcount" data-align = "center"> March </h> <th data-field = "firstquarter" data-align = "center"> firstquarter </h> <th data-field = "aprcount" data-align = "center" </th> data-align = "center"> datafield = "sepcount" data-align = "center"> sep </h> <th datafield = "thirdquarter" data-align = "center"> Quarter 3 </h> <th data-field = "octcount" data-align = "center"> أكتوبر </th> <th datafield = "novcount "- data-align = "center"> December </h> <th data-field = "forthquarter" data-align = "center"> Quarter 4 </th> </r> </thead> </table>

2. لا يوجد تهيئة خاصة JS

 $ ('#tb_report'). bootstraptable ({url: '/groupColumns/getReport' ، // request url (*) method: 'get' ، // request method (*) toolbar cach: '#toolbar' ، // أي حاوية مخططة بواسطة زر الأداة صحيحة ، // حيث يتم عرض line colate: ease is to to use is to use is to to use to to use to to use to to to use to to to to use to to to to to use to to to use to to to to to to use to use to to to eas to use to to to eas to use to to to to eas to use to use to to eas. تحتاج إلى تعيين هذه الخاصية (*) ترقيم الصفحات: صحيح ، // ما إذا كنت تريد عرض ترقيم الصفحات (*) Sortorder: "ASC" ، // طريقة الفرز QueryParams: OtableInit.queryparams ، // تمرير المعلمات (*) Sidepagination: "الخادم" ، 10 ، // عدد خطوط السجل لكل صفحة (*) باجيلست: [10 ، 25 ، 50 ، 100] ، // عدد الصفوف لكل صفحة لتحديد (*)}) ؛

ماذا عن ذلك ، هل هو سهل؟ بالطبع ، قال بعض الأشخاص أنه يمكنك استخدام سمات الجدول لتعيين عنوان URL والتراكم وغيرها من المعلومات دون استخدام تهيئة JS ، مباشرة في CSHTML. في الواقع ، إذا نظرنا إلى واجهة برمجة التطبيقات الخاصة به ، فسنجد أن كل سمة تهيئها تتوافق مع سمة الجدول. اكتب AS

إذا كان النموذج الخاص بك لا يحتوي على بعض الأحداث الخاصة التي يجب التعامل معها ، فلا توجد مشكلة على الإطلاق.

5. أمثلة رمز تصدير بيانات الجدول

تتطلب وظيفة التصدير لبيانات الجدول أيضًا بعض دعم JS الممتد.

1. تقديم ملفات JS إضافية

 <script src = "~/content/bootstrap-table/extensions/orport/bootstrap-table-dexport.js"> </script> <script src = "// rawgit.com/hhurz/tableexport.jquery.plugin/master/tableexport.js">//script

2. عند تهيئة JS

 $ ('#tb_departments'). bootstraptable ({url: '/orport/getDepartment' ، // request url (*) method: 'get' ، // request method (*) method toolbar: '#toolbar' ، // أي حاوية مخططة بواسطة زر الأداة صحيح ، // حيث يتم عرض line veralal cache: ease is ye ، تحتاج إلى تعيين هذه الخاصية (*) ترقيم الصفحات: صحيح ، // ما إذا كنت تريد عرض الترحيل (*) قابل للفرز: خطأ ، // ما إذا كان لتمكين sortorder: "ASC" ، // طريقة الفرز QueryParams: otableInit.queryparams ، // تمرير المعلمات (*) sidepagination: قم بتحميل ، Pages First Pagesize: 10 ، // عدد خطوط السجلات لكل صفحة (*) Pagelist: [10 ، 25 ، 50 ، 100] ، // عدد الصفوف لكل صفحة لتحديد (*) ClickToSelect: True ، showexport: true ، // is orportDatype المعروضة: "الاسم" ، العنوان: "اسم القسم"} ، {الحقل: "ParentName" ، العنوان: "قسم"} ، {الحقل: "المستوى" ، العنوان: "مستوى القسم" ، {الحقل: "desc" ، العنوان: "الوصف" ،]}) ؛

دعونا نلقي نظرة على النقاط الرئيسية: هاتان الصفتان

 showexport: True ، // ما إذا كنت تريد عرض exportDatatype: "Basic" ، // basic "،" All "،" Selection'.ShowExport يعني ما إذا كان سيتم عرض الزر المصدر ، أو exportDatatype يعني ما إذا كان الوضع المصدر هو الصفحة الحالية أو جميع البيانات أو البيانات المحددة.

6. ملخص

ما سبق هو تأثير الوظيفة والرمز البسيط لتنفيذها. وجد المدون أن هناك العديد من المشكلات التي يجب حلها.

1. وظيفة التحرير داخل الخط هي إرسال كل خلية إلى الخلفية ، مما سيؤدي إلى عمليات متكررة لقاعدة البيانات والشعور غير المناسب. لا أعرف ما إذا كانت هناك طريقة أفضل لتقديم كل سطر إلى الخلفية.

2. على الرغم من أن وظيفة التصدير مفيدة للغاية ، إلا أنها للأسف لا تدعمها متصفح IE. جرب المدون المثال على الموقع الرسمي ، ويبدو أنه لا يمكن أن يصدره. ليتم التحقق منها.

ما ورد أعلاه هو المحتوى ذي الصلة لجدول جدول الجدول BootStrap [الفصل النهائي] لسلسلة مكون JS التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!