ملخص استخدام طاولة التمهيد
Bootstrap Table هو مكون إضافي جدول مكتوب على أساس جدول Bootstrap ، يستخدم خصيصًا لعرض البيانات. Bootstrap من Twitter وهو حاليًا الإطار الأمامي الأكثر شعبية. يعتمد Bootstrap على HTML و CSS و JavaScript ، ولديه مزايا التطوير الأمامي البسيط والمرن والسريع. لن أصف نفس الشيء مثل bootstrap هنا. ستركز هذه المقالة على شرح بعض من فهمي لاستخدام جدول Bootstrap في مشروعي وكيفية تعلمه.
أولاً ، اسمحوا لي أن أشرح العلاقة بين jQuery و Bootstrap و Bootstrap. تتضمن أجزاء كثيرة من رمز bootstrap jQuery ، أي أن bootstrap يعتمد على jQuery ، ويتم إنشاء طاولة bootstrap التي نريد استخدامها استنادًا إلى bootstrap ، لذلك قبل استخدام جدول bootstrap ، يجب الرجوع إلى ملفات JS و CSS ذات الصلة من jQuery و Bootstrap.
بعد ذلك ، فإن خصائص جدول Bootstrap: مع jQuery-Ui و JQGrid وغيرها من المكونات الإضافية عرض الجدول ، فإن طاولة bootstrap مسطحة وخفيفة الوزن. إنه أكثر من كافية لعرض البيانات الخفيفة الوزن ، ودعم طاولات الأب والابن وما إلى ذلك هو جيد جدًا أيضًا. أهم شيء هو أنه يمكن دمجها بسلاسة مع علامات bootstrap الأخرى.
حسنًا ، هذا كل شيء للمقدمة. سأقوم مباشرة بتحميل الكود والأداءات ثم نقدم المزيد من المناقشات.
<! doctype html public "-// w3c // dtd xhtml 1.0 Strict // en" "http://www.w3 content = "text/html ؛ charset = utf-8"/> <meta name = "description" content = ""/> <meta name = "keywords" content = ""/> <script type = "text/javascript" src = "./ src = "./ bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javaScript" src = "./ bootstrap-table/bootstrap-table-all.js src = "./ bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <link rel = "stylesheet" type = "text/css" href = "./ bootstrap/css/botstrap.min.cs"> <link rel = href = "./ bootstrap-table/bootstrap-table.min.css"> </head> <script language = "javaScript"> </script> <body> <viv> <viv> <viv> <viv> <h3> حساب معلم إضافي </h3> aria-hidden = "true"> </span> تعديل </button> <button id = "btn_delete" type = "button"> <span aria-hidden = "true"> </span> delete </uttron> </viv> <table id = "teachable_table" data-toggle = "data- url =". data-query-params = "queryparams" data-toolbar = "#toolbar" data-pagination = "true" data-search = "true" data-refresh = "true" data-show-toggle = "true" data-show columns = "true" data-page-size = "5" كلمة المرور </th> <th data field = "t_name"> اسم المعلم </th> </tr> </table> </viv> </viv> </viv> </body>
صورة التكاثر:
حسنًا بعد ذلك ، دعنا نحلل معنى الكود أعلاه في الخطوات.
1. أولاً وقبل كل شيء ، نحتاج إلى تنزيل حزمة طاولة Bootstrap المقابلة JQuery Bootstrap. هناك برامج تعليمية عبر الإنترنت ، ولن نصف كيفية تنزيلها هنا.
من الإشارة إلى أسماء ملفات JS و CSS في علامة <Head> أعلاه ، يمكننا أن نرى أنه يجب علينا تقديم هذه الملفات.
لاحظ bootstrap ، لا يوجد سوى ثلاثة مجلدات في الحزمة المضغوطة المترجمة.
1.jquery -2.2.1.js --- أحدث ملف jQuery
2.BOOTSTRAP.MIN.JS --- أحدث ملف مضغوط bootstrap.min.js في bootstrap/JS
3.Bootstrap.min.css --- أحدث ملف مضغوط bootstrap.min.css في bootstrap/css
4.BOOTSTRAP-TABLE-All.js --- أحدث ملف JS ضمن جدول Bootstrap
5.bootstrap-table-zh-cn.js --- أحدث ملف أولي صيني ضمن جدول/لغة bootstrap
6.BOOTSTRAP-TABLE.MIN.CSS --- أحدث ملف مضغوط CSS تحت جدول Bootstrap
يجب تكوين هؤلاء الستة ، من بينها Table-table-Zh-Cn.js هو ملف JS الذي يدعم اللغة الصينية. فقط عند تحميل هذا الملف ، سيتم تعيين بعض معلومات عرض الجدول الخاصة بنا على الصينية.
دعنا نختبر تأثير العرض بعد إزالة Bootstrap-Table-ZH-Cn.JS.
بالطبع ، يمكننا أيضًا تعيين معلومات العرض على لغات أخرى ، ما عليك سوى استبدال Bootstrap-Table-Zh-Cn.js مع ملفات JS بلغات أخرى. هناك دعم في حزمة طاولة bootstrap.
يمكننا أيضًا إلقاء نظرة على الكود المصدر في هذا الملف. دعنا نلقي نظرة وستعرف ما يفعله هذا الملف.
/** * TABLE TABLE TABLE الترجمة الصينية * المؤلف: ZHIXIN WEN <[email protected]> */(FUNCTION ($) {'use strict' ؛ $ .fn.bootStraptable.locales ['zh-cn'] = {formatloadingmessage: function () {return ". (Pagenumber) {return "عرض Page" + Pagenumber + " {تم العثور على سجل مطابق "؛ "التحديث" ؛
يمكنك أن ترى في لمحة أنه بعد اقتباس ملف JS ، عند التحميل ، تصلي من أجل تأثير التهيئة. قم بتحويل بعض المعلومات المعروضة إلى المحتوى المتوسط المقابل.
2. بعد ذلك ، دعنا نتحدث عن رمز HTML ذي الصلة. في الواقع ، هذا هو الجزء الوحيد من رمز HTML المتعلق بمساعد bootstrap.
<table id = "teacher_table" data-toggle = "table" data-url = "./ data.php" data-method = "post" data-query-params = "queryparams" data-toolbar = "#toolbar" data-show-show-show "true-show-show" data-show "true" data-show "data-show" true "data-show" data-show "true" data-show "data-show" true ". حجم البيانات-size = "5"> <thead> <tr> <th datafield = "name"> حساب المستخدم </th> <th datafield = "pwd"
نعم ، لا يوجد سوى علامة جدول واحدة ، بالإضافة إلى الكثير من المعلمات ، ويتم تنفيذ شكل الجدول من خلال هذه المعلمات. يجب أن تعرف الأنماط والوظائف الموجودة. فقط من خلال إدراجها ، سيكون بالتأكيد انخفاضًا في الدلو. من الأفضل تعليم الناس كيفية الصيد بدلاً من تعليم الناس كيفية الصيد. سأخبرك بمكان العثور على هذه الفئات. معنى الطبقة. يمكننا الانتقال إلى موقع الويب الاحترافي لتجارة Bootstrap للعثور على رابط أستخدمه. انقر لفتح الرابط. إذا كان غير صالح ، يمكنك إدخال http://bootstrap-table.wenzhixin.net.cn/documentation مباشرة
بالطبع ، يمكنك أيضًا رؤية بعض الأمثلة في المثال
كيف نتحقق من معنى المعلمات المقابلة؟ عندما ترى الصورة أعلاه ، فإن الجانب الأيمن هو بعض الخيارات ، يمكنك اختيار سمات الجدول ، وسمات الصف ، وأحداث الربط التي يمكنك تعيينها.
انقر فوق خيارات جدول سمة الجدول لعرض الشكل التالي. أولاً ، يمكنك أن ترى أن اسم العنوان يستخدم لـ JS لإنشاء جداول ، ويتم استخدام السمة لـ HTML لإنشاء جداول.
لإعطاء بعض الأمثلة ، هناك العديد من المعلمات في الكود أعلاه. ما يعنيه هو:
Data-URL: عنوان URL لطلب البيانات.
ميثود البيانات: طريقة الطلب.
ارتفاع البيانات: اضبط ارتفاع الجدول
بيانات params query = "QueryParams": الإعدادات
Data-Toolbar = "#Toolbar": قم بتعيين الحاوية التي يكون فيها المعرف هو شريط أدوات.
data-pagination = "true": تعيين ما إذا كنت تريد عرض رقم الصفحة
Data-Search = "True": اضبط مربع البحث
عرض البيانات refresh = "true": اضبط زر التحديث
عرض البيانات toggle = "true": اضبط تنسيق عرض البيانات
الآن يجب أن تفهم كيفية التحقق من ذلك!
لاحظ أن الرمز التالي هو الأساسية ، ويمثل <tr> شبكة في صف ، وأن "name" = "الاسم" يمثل اسم البيانات في شبكة في صف واحد. يمكنك فهم مجال البيانات كمعرف ، لأن البيانات المنقولة من الخلفية تتميز بناءً على مجال البيانات ، ومن يتم إرسالها إلى.
<tr> <th datafield = "name"> حساب المستخدم </th> <th data-field = "pwd"> كلمة مرور المستخدم </th> <th datafield = "t_name"> اسم المعلم </th> </tr> </thead>
بالنسبة لأولئك الذين لا يرغبون في استخدام جيل ثابت HTML ، يمكنك أيضًا استخدام JS لتوليد جيل ديناميكي. لإعطاء عرض رمز ، لتعيين المعلمات ذات الصلة ، تحتاج فقط إلى استخدام الاسم: الخيارات المذكورة أعلاه. على سبيل المثال ، قم بتعيين ملف بيانات الملف الوجهة لطلب البيانات في html: "./data.php" في JS ، فقط إعلان URL: ".
$ ('#table'). bootstraptable ({الأعمدة: [{الحقل: "معرف" ، العنوان: 'ITIND ID'} ، {field: 'name' ، title: 'item name'} ، {field: 'price' ، title: 'ITER'}] ، DATA: [{id: 1 ، name 1 '، price:' $ 1 '} ، {id: 2 ، miter. }]}) ؛3. وبهذه الطريقة ، ماذا تفعل الرموز الأخرى ، يستخدم جزء من الكود اللوحة في boostrap لتنسيق ، أي لتضمين الجدول في اللوحة. تأثير طاولة bootstrap بعد رمز اللوحة الذي تم إزالته مثل هذا
إنه فقط أنه لا توجد لوحة.
4. تنسيق نقل البيانات ، البيانات التي يتلقاها جدول Bootstrap بتنسيق JSON بشكل افتراضي
يمكنك أن ترى أعلاه أن عنوان الخلفية المطلوبة هو: "./data.php" ، دعنا نلقي نظرة على محتواه
[؟ $ results [1] = array ("name" => "lisi" ، "pwd" => "1234" ، "t_name" => "li si") ؛ نتائج $ [2] = صفيف ("name" => "wangwu" ، "pwd" => "44455" ، "t_name" => "wang wu") ؛ echo json_encode (نتائج $) ؛؟>الأمر بسيط للغاية! بالطبع ، هذه مجرد بعض بيانات الاختبار التي كتبتها باليد ، وبالطبع تم العثور عليها من قاعدة البيانات في المشروع.
5. بالطبع ، لا يكفي مجرد عرض البيانات. نحتاج إلى التفاعل مع الجدول ، مثل وظائف الحذف والتعديل. في هذا الوقت ، نحتاج إلى استخدام بعض أحداث جدول Bootstrap. في الحالة أعلاه ، قمت بتضمين مكونين للزر في الجدول كما هو موضح في الشكل
تتمثل طريقة تنفيذ هذه الفسيفساء في إضافة مثل هذا الخطاب-Toolbar = "#شريط الأدوات" إلى خصائص الجدول.
وهذا يعني إضافة تسمية مع معرف كأدوات إلى خط في شريط الأدوات.
في تنفيذي لهذا المشروع ، يجب عليك استخدام هذين الأزران لإجراء العمليات المقابلة على الصف المحدد في الجدول.
اكتب الحدث المقابل ، وربط أولاً حدث الزناد المحدد إلى الجدول ، ثم الحصول على بيانات الصف المحدد من خلال وظيفة getSelectRow.
$ ('#teacher_table'). on ('click-row.bs.table' ، function (e ، row ، element) {$ ('. success'). removeclass ('success') ؛ الدالة getSelectedRow () {var index = $ ('#teacher_table'). find ('tr.success'). البيانات ('index') ؛ // الحصول على return return $ المحددة ('#teacher_table'). bootstraptable ('getData') [index]إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام جدول التمهيد
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.