جدول Bootstrap هو بيانات خفيفة الوزن وغنية بالميزات معروضة في نموذج الجدول ، ودعم الاختيار الفردي ، ومربعات الاختيار ، والفرز ، والترحيل ، والتعبير/إخفاء الأعمدة ، وجدول تمرير العنوان الثابت ، والتصميم المتجاوب ، وبيانات Ajax تحميل JSON ، والنقر فوق الأعمدة المرتبة ، وما إلى ذلك.
سلسلة جدول Bootstrap:
شرح مفصل لجدول الجدول JS Component Artstrap Table (الإصدار الأساسي)
قطعة مكون جدول جدول Bootstrap من سلسلة مكون JS [End Chapter]
قطعة الجدول الجدول BootStrap قطعة مكون من سلسلة مكون JS [2. طاولة الوالدين والترتيب عمود الصف]
1. عرض التأثير
اليوم سأغير الطريقة التالية قليلاً. دعنا نلقي نظرة على تأثير التنفيذ أولاً ، ثم نقدم تنفيذ التعليمات البرمجية والاحتياطات في وقت لاحق. هيا ، دعنا نرسل العروض:
1. الأب وابن الجدول تقديم
2. ترتيب الصف
قبل الطلب
اسحب الخط لفرزه إلى السطر الأول
3. ترتيب العمود
قبل الطلب
فرز عنوان العمود السحب
بعد الطلب
2. شرح مفصل لرمز جدول الأب والابن
في الفصل السابق ، قدمنا الاستخدام الأساسي لجدول bootstrap. عند تهيئة الجدول ، هناك خاصية "عرض التفاصيل". قم بتعيينه على True ، ويمكنك رؤية أيقونة في شكل "+" أمام كل صف. يؤدي النقر فوق هذا الرمز إلى تشغيل الحدث الذي يحمل الخاضع. هذا هو المبدأ العام. دعونا نلقي نظرة على الكود ، إنه في الواقع بسيط للغاية.
1. تهيئة الجدول وتسجيل الخط لتوسيع الحدث
$ ("#tb_powerset"). bootstraptable ({url: '/api/menuapi/getParentMenu' ، method: 'get' ، delieveview: true ، // parent and child table // sidepagination: "server" ، pagesize: 10 ، pagelist: [10 ، 25]. "Menu_url" ، العنوان: "Menu} ، {Field:" Parent_ID "، العنوان:" القائمة الأصل "، {الحقل:" Menu_level "، العنوان:" Men Level "،] ،دعنا نلقي نظرة على المعلمات الثلاثة لوظيفة الطريقة المقابلة (الفهرس ، الصف ، تفاصيل $) لحدث التحميل الخاضع Onexpandrow.
الفهرس: فهرس الصف للصف الحالي للجدول الأصل.
الصف: كائن بيانات JSON من الصف الحالي للجدول الأصل.
التفاصيل $: كائن TD في الصف الجديد الذي تم إنشاؤه ضمن الصف الحالي.
المعلمة الثالثة مهمة بشكل خاص لأنه يتم تحميل الجدول الخاضع المولد في كائن التفاصيل $. يقوم جدول bootstrap بإنشاء كائن التفاصيل $ بالنسبة لنا ، ثم نحتاج فقط إلى ملءه بالجدول الذي نريده.
2. دعونا نلقي نظرة على طريقة oinit.initsubtable ()
. "get" ، QueryParams: {StrparentId: ParentId} ، ajaxoptions: {StrparentId: parentid} ، clicktoSelect: true ، delieveview: true ، // the parent-child table required: "mena_id" ، pagesize: 10 ، pagelist: [10 ، 25] الاسم '} ، {الحقل:' mena_url '، العنوان:' url url '} ، {field:' parent_id '، العنوان: "القائمة الأصل'} ، {field: 'menu_level' ، العنوان: 'مستوى القائمة'} ،] ، {oinit.initsubtable (الفهرس ، الصف ، $ subdetail) ؛}}) ؛} ؛من هذا ، يمكننا أن نرى أن مبدأ توليد خاضع يمكن إنشاء كائن الجدول cur_table ، ثم تسجيل تهيئة الجدول لهذا الكائن. أليس هذا بسيط جدا ~~
3. شرح مفصل لرمز طلب الخط
رمز طلب السطر أبسط ، دعنا نلقي نظرة.
1. مطلوب مراجعان إضافيتان
<script src = "~/content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"> </script> <script src = "~/content/bootstrap-table/redord-rows/bootstrap-table-rows.js
2. عند تحديد جدول على صفحة CSHTML ، أضف سمتين
<table id = "tb_order" استخدام البيانات-ROW-ATTR-FUNC = "true" redorder-rows = "true"> </table>
بعد ذلك ، ليست هناك حاجة لإجراء أي تعديلات عند تهيئة جدول JS ، ويمكن للجدول المحمّل أن يدرك وظيفة طلب الصف.
4. شرح مفصل لرمز طلب العمود
على غرار ترتيب الخط. يتم استخدام ترتيب العمود على النحو التالي:
1. الرجوع إلى عدد قليل من JS و CSS
<script src = "~/content/bootstrap-table/extensions/reorder columns/bootstrap-table-reorder-columns.js"> </script> <link rel = "stylesheet" href = "../ arsets/empludes.css"> <link rel = href = "https://rawgit.com/akottr/dragtable/master/dragtable.css"> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script> <cript src = "https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"> </cript> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
2. عند تحديد جدول على صفحة CSHTML ، أضف سمة
<table id = "tb_departments" clists-redorder-resorders = "true"> </table>
لا توجد تعديلات مطلوبة في مكان آخر. يمكن للجدول المحمّل تحقيق طلب العمود. هل هو سهل؟
5. مراقبة التصفية
في الأصل ، كانت هذه المقالة على وشك الانتهاء ، تذكرت فجأة أن هناك وظيفة بحث في الفصل السابق. يبدو أنه لا يمكن استخدام وظيفة البحث عند استخدام ترحيل الخادم. لذلك تذكرت أن لدي وظيفة مماثلة لتصفية كل عمود في CS من قبل. كان المدون فضولي مرة أخرى. هل يحتوي جدول Bootstrap أيضًا على هذا النوع من تصفية كل عمود في الجدول ، لذلك قمت بفحص المستند. تم تحقيق النتيجة ، وهناك شيء ~~ دعنا نلقي نظرة.
1. عرض الاشتراكات
2. أمثلة رمز
(1) تقديم إضافي JS
<script src = "~/content/bootstrap table/extensions/filter-control/bootstrap-table-filter-control.js"> </script>
(2) تحديد سمات الجدول وسمات الرأس
<table id = "tb_roles" data-filter-control = "true"> <thead> <tr> <th data-field = "rob_name" data-filter-control = "select"> rob name </th> <th data-field = "description" data-filter-control = "inpult" description </th> data-field = مرشح البيانات-control = "input"> الصفحة الافتراضية للدور </th> </tr> </tead> </table>
نظرًا لأن سمات رأس الجدول محددة هنا ، فليس هناك حاجة لتحديد الأعمدة عند تهيئة JS.
(3) تهيئة JS
$ ('#tb_roles'). bootstraptable ({url: '/rol/getrole' ، الطريقة: "get '، شريط الأدوات:'#شريط أدوات '، مخطط: صواب ، ذاكرة التخزين المؤقت: false ، مخطط: صواب ، صفحات: true ، true: true ، queryparams: function (param) {return param ؛ Sidepagination: "Server" ، Pagesize: 10 ، Pagelist: [10 ، 25 ، 50 ، 100] ، Search: True ، Showcolumns: True ، showRefresh: True ، MinimumCountColumns: 2 ، clicktoselect: true ،}) ؛في البداية ، اعتقد المدون أن هذا النوع من البحث لا يمكن أن يكون إلا على ترحيل عميل المستخدم ، ولكن بعد تصحيح الأخطاء ، لم يكن الأمر كذلك. يمكن تمرير شروط البحث الأصلية إلى الخادم من خلال JSON. دعونا نلقي نظرة على عملية تصحيح الأخطاء
تلقي المعلمات في الخلفية وفرطها
وبهذه الطريقة ، يمكننا تمرير ظروف الاستعلام بشكل جيد إلى الخلفية. جيد جدا وقوي. سيؤدي ذلك إلى القضاء على مشكلة توسيع وظيفة البحث في الجدول ~~
6. ملخص
ما سبق هو بعض تطبيقات تمديد جدول bootstrap. قد لا تكون غير مكتملة ، وهناك بعض الاستخدامات المتقدمة التي لم يتم تقديمها ، مثل دمج الصف والعمود ، وتجميد الصف والعمود ، إلخ.
المحتوى أعلاه هو المعرفة ذات الصلة بمكون جدول جدول Bootstrap [2. الأب والابن الجدول وترتيب الصف والعمود] قدم لك من قبل المحرر. آمل أن يكون ذلك مفيدًا للجميع!