يمكن أن يحتوي جدول Bootstrap القائم على Bootstrap إلى وظائف قوية مثل رؤوس الجدول الثابتة ، والتحقق ، والفرز ، والترحيل ، والبحث ، ورؤوس الجدول المخصصة ، والتي يمكن أن تحسن بشكل أفضل كفاءة التطوير وتقليل وقت التطوير.
1. الوصف المكون الإضافي: يعرض جدول Bootstrap تنسيق جدول البيانات ، ويوفر دعمًا غنيًا ، وصناديق الراديو ، وخانات الاختيار ، والفرز ، والترحيل ، وما إلى ذلك ، تنزيل المكونات الإضافية.
2. الميزات:
تم تطويره على أساس Bootstrap 3 (يتم دعم Bootstrap 2 أيضًا)
واجهة استجابة
رأس ثابت
قابلة للتكوين بالكامل
دعم سمات البيانات
إظهار/إخفاء الأعمدة
عرض/إخفاء رأس الجدول
احصل على بيانات JSON باستخدام Ajax
انقر فوق رأس الجدول لفرزه ببساطة
يدعم عرض العمود المخصص
دعم واحد/resalect
وظيفة الترحيل القوية
دعم تخطيط بطاقة العمل
يدعم متعدد اللغات
3. كيفية استخدام:
1) تقديم مكتبة bootstrap (إذا لم يتم استخدام مشروعك بعد) و bootstrap table.css في علامة رأس صفحة HTML.
<link rel = "stylesheet" href = "bootstrap.min.css"> <link rel = "STYLESHEET" href = "bootstrap table.css">
2) تقديم مكتبة jQuery ، مكتبة bootstrap (إذا لم يتم استخدام مشروعك بعد) و bootstrap table.js قبل إغلاق علامة الرأس أو علامة الجسم (موصى بها).
<script src = "jquery.min.js"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-table.js"> </script>
3) حدد مصدر البيانات ، وهنا طريقتان
الطريقة 1: تمرير علامة سمة البيانات
ضبط البيانات toggle = "الجدول" في جدول عادي يتيح جدول bootstrap دون كتابة جافا سكريبت.
<جدول البيانات toggle = "table" data-url = "data.json"> <tead> ... </tead> </tale>
الطريقة 2: قم بإعداد مصدر البيانات من خلال JavaScript
تمكين الجدول مع سمة المعرف عبر JavaScript.
$ ('#table'). bootstraptable ({url: 'data.json'}) ؛:4. وصف الخلل:
عند تعيين الحقل ، باستخدام طريقة سمة العلامة ، وجدت أنه لم يكن هناك تأثير وأن الصورة غير واضحة. يمكنك تنزيل المثال مباشرة للبحث وتنزيل العنوان.
على سبيل المثال: <th data field = "sex" formatter = "format_sex"> الجنس </th>
1) السبب:
bootstrap table.js line 399 ، فقط typeof formatter هو الدالة في الكود.
2) الحل:
تعديل كتلة الكود في السطر 399:
قبل التعديل
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (value ، item) ؛}بعد التعديل:
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (value ، item) ؛ } آخر إذا (typeof that.header.formatters [j] === 'string') {if (typeof window [that.header.formatters [j]] === 'function') {value = window [that.header.formatters [j]] (value ، item) ؛ }}إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو طريقة استخدام جدول bootstrap المشترك معك. آمل أن يكون من المفيد لك إتقان طريقة استخدام جدول Bootstrap.