مكونات الجدول الخفيفة الوزن الجدول المساعدات الجدول تستحق مشتركة مشتركة

يمكن أن يحتوي جدول 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.