بادئ ذي بدء ، إنه نموذج صفحة بسيط. يمكنك إنشاء جداول HTML بالطريقة المعتادة لرسم الجداول ، ثم التحكم في أنماط خاصة وغيرها من العمليات من خلال JS (الميزة هي أن الجداول أكثر سهولة ، ومن المريح ضبط أنماط الجدول ، وما إلى ذلك ، والسرعة سريعة)
بالطبع ، يمكنك فقط وضع علامة جدول على الصفحة ، ويمكن التحكم في جميع البيانات والأنماط اللاحقة من خلال JS. سأقول لاحقًا (المزايا مريحة للتحكم في البيانات وتعديلها ، وخاصة تنسيق JSON الذي تم الحصول عليه بواسطة طريقة AJAX ، ولكن ضبط النمط أكثر إزعاجًا)
ملاحظة: هذا هو الموقع الرسمي للمكون الإضافي ، الذي يحتوي على واجهات برمجة التطبيقات الإنجليزية والأمثلة: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
أيضًا ، قبل الاستخدام ، يرجى تقديم CSS ذات الصلة بـ Bootstrap و JS و JQuery و CSS Table ، JS على الأقل هذه الملفات الأساسية الخمسة.
1. طريقة نموذج HTML
مثال 1: المتطلبات ، عرض بيانات الجدول البسيط ، الرأس هو صفين ، وهناك سهم يطفو لأعلى ولأسفل
التحليل: الأمر بسيط للغاية. تحتاج فقط HTML لتنفيذها. ارسم وفقًا للجدول العادي وأضف سمات مخصصة فريدة من نوعها. لاحظ أنه إذا لم تستخدم JS ، فيرجى إضافة Toggle إلى علامة الجدول الأولي.
رمز HTML:
<viv> <table data-toggle = "table" data-height = "268" id = "tablel01"> <thead> <tr> <th data-field = "lhc" data-rowspan = "2 data-valign = "middle"> هذا اليوم </th> <th data-field = "bz" data-colspan = "3" data-align = "center" data-valign = "middle"> هذا الأسبوع </th> <th-field-field = "th" بواسطة "data-colspan =" 3 "data-align =" center "data-valign =" middle> data-Align = "center" data-valign = "middle"> هذه المشكلة </th> <th datafield = "drtb" data-align = "center" data-valign = "middle"> سنة السنة </th> <th-field = "bzb" data- "data-" data- data-valign = "middle"> هذه المشكلة </th> <th datafield = "bztb" data-align = "center" data-valign = "middle"> سنة السنة </th> <th data-field = "bzhb" data-align = "center" data-valign = "middle" mon--month </h th> <th-field = bybid-aliN " data-valign = "middle"> هذه المشكلة </th> <th data-field = "bytb" data-align = "center" data-valign = "middle"> سنة السنة </th> <th data-field = "byhb" data-align = "center" data-valign = "middle"> moq </th> </tr> حجم </td> <td> 21341 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 0.31 </td> <td> <i class = 'glyphicon glyphicon-ub class = 'glyphicon glyphicon-arrow-down'> </i> 1.13 </td> <td> <i class = 'glyphicon glyphicon-arrow-up'> </i> glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> glyphicon-arrow-down '> </i> 4.21 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 4.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up'> </i> 1.45 </td> <td> 234534 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 4.35 </td> <td> <i class = 'glyphicon glyphicon-arrow-up'> </i> 2.75 </td> <td> 44225 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 0.74 </td> <td> <i class = 'glyphicon glyphicon-arrow-up'> </i> 3.45 </td> </tr> <tr> <td> استهلاك الفحم </td> <td> 43363 </td> <td> <i class = 'glyphicon-arrow-down'> </i> 0.31 </td> glyphicon-arrow-up'> </i> 0.21 </td> <td> 32422 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 13345 </td> <td> <i class =' glyphic-glyphic-arrow-arrow ' class = 'glyphicon glyphicon-arrow-up'> </i> 2.94 </td> </tr> <tr> <td> حجم الفحم الوارد </td> <td> 34624 </td> <td> <td> <td> class = 'glyphicon glyphicon-arrow-up'> </i> 1.23 </td> <td> 452346 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> glyphicon-arrow-up'> </i> 0.05 </td> <td> 94524 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.21 </td> <td> <i class = 'glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> استهلاك الفحم </td> <td> 21341 </td> <td> <i class =' glyphicon-arrow-down '> </i> 0.31 </td> glyphicon-arrow-up'> </i> 0.21 </td> <td> 334322 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> glyphicon-arrow-down '> </i> 0.31 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 4.21 </td> <td> 3125113 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> استهلاك </td> <td> 21341 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 0.31 </td> <td> <i class = 'glyphicon glyphicon-arrow up'> </i> class = 'glyphicon glyphicon-arrow-down'> </i> 1.13 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 1.13 </td> <td> <i class = 'glyphicon glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.21 </td> <td> <i class = 'glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> استهلاك الفحم </td> <td> 21341 </td> <td> <i class =' glyphicon-arrow-down '> </i> 0.31 </td> glyphicon-arrow-up'> </i> 0.21 </td> <td> 334322 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.21 </td> <td> <i class = 'glyphicon glyphicon-arrow-down '> </i> 2.21 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> glyphicon-arrow-down '> </i> 0.31 </td> <td> <i class =' glyphicon glyphicon-arrow-up '> </i> 0.21 </td> <td> 334322 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-down '> </i> 1.13 </td> <td> <i class =' glyphicon glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.21 </td> <td> <i class = 'glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tr> <tr> <td> استهلاك الفحم </td> <td> 21341 </td> <td> <i class =' glyphicon-arrow-down '> </i> 0.31 </td> glyphicon-arrow-up'> </i> 0.21 </td> <td> 334322 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> glyphicon-arrow-up'> </i> 4.21 </td> <td> 3125113 </td> <td> <i class = 'glyphicon glyphicon-arrow-down'> </i> 2.21 </td> <td> <i class = 'glyphicon glyphicon-arrow-up '> </i> 2.94 </td> </tbody> </table> </viv>
مثال 2: المتطلبات: هناك خلية مخصصة تعرض التقدم بعد الجدول الثاني ، ويتطلب الصف الأول عرضًا إحصائيًا كليًا. تتطلب هاتان الوظيفتان استخدام JS لتعيين صفوف وأعمدة مخصصة.
رمز HTML:
<div> <table data-toggle = "table" data-height = "268" id = "tablel02"> <thead> <tr> <th data-field = "id" data-align = "center" data-valign = "middle"> serial </th> <thatuive-field = "gys" data-alig = "data". data-align = "center" data-valign = "middle"> التنوع </th> <th datafield = "rz" data-align = "center" data-valign = "middle"> قيمة الكربون </th> <th-field = "mj" data-align = "center" data-valign = "middle"> price </th-field-field = "bmdj" data-valign = "middle"> وحدة الفحم </th> <th data-field = "drlm" data-align = "center" data-valign = "middle"> cumulative coal </h> <th data-field = "ljlm" data-align = "center" data-valign = "middle"> cumulative ta data-valign = "middle"> وحدة التخزين الشهرية المخطط لها </th> <th-field = "yjhjd" data-align = "center" data-valign = "middle" data-formatter = "progress" التعدين </td> <td> منخفض الكبريت الفحم </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22 ٪ </td> <td> <td> Ltd. </td> <td> الفحم الهندسي </td> <td> </td> <td> </td> <td> 51888 .72 </td> <td> 70000 </td> الفحم الكبريت </td> <td> </td> <td> </td> <td> </td> <td> 20041.86 </td> <td> 90000 </td> <td> 100 ٪ </td> الفحم </td> <td> </td> <td> </td> <td> </td> <td> 5191.08 </td> <td> 30000 </td> <td> 0 ٪ </td> الفحم </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 18265.56 </td> <td> 0 </td> <td> 22 ٪ </td> <td> <td> </td> <td> <td> <td> الفحم الكبريت </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <td> 22 ٪ </td> <td> <td> التعدين </td> <td> منخفض الكبريت الفحم </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> <td> 30000 </td> 22 ٪ </td> <td> <td> <td> <td> <td> التعدين </td> <td> الفحم المنخفض sulfur </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> 6686.08 </td> <td> 30000 </td> <tded> </tbale> </tbody> </tbod
رمز JS:
// إعلان المتغير المستخدم لحساب الإجمالي (الفحم المتراكم ، الخطة الشهرية) var yjharr = [] ؛ var ljlmarr = [] Blue = ' #b6ccf4' ؛ yjharr.push (row.yjhl) ؛ ljlmarr.push (row.ljlm) ؛ return "<div style = 'height: 20px ؛ الحدود: 1px solid #b6ccf4 ؛'> <span styp (العرض> = 100؟ أحمر: أزرق)+"؛ '>"+value+"</span> </vile>"} // طريقة حساب دالة القيمة الإجمالية yjhtotal () {var subyjh = 0 ؛ var subljlm = 0 ؛ var row = [] i = 0 ؛ i <yjharr.length ؛ i ++) {if (yjharr [i] == "") {yjharr [i] = 0 ؛} subyjh+= parsefloat (yjharr [i]) ؛} لـ (var i = 0 ؛ i <yjharr.length ؛ i ++) {if (yjharr [i] == "") {yjharr [i] = 0 ؛} subyjh+= parsefloat (yjharr [i]) ؛} لـ (var j = 0 ؛ j <ljlmarr.length ؛ j ++) {if (ljlmarr [j] == "") {ljlmarr [j] = 0 ؛} subljlm+= parsefloat (ljlmarr [j]) ؛} row.push ({id: 1 ، Gys: 'total' ، pz: '' ، rz: '' ، mj: '' ، bmdj: '' ، drlm: '' ، ljlm: subljlm.tofixed (2) ، yjhl: subyjh ، yjhjd: '107 ٪'}) ؛ صف}التحليل: تحتاج الصفوف والأعمدة المخصصة إلى إضافة نموذج بيانات = "اسم الطريقة" ، حيث سيتم تنفيذ صف المعلمة في طريقة التقدم () بمجرد إنشاء كل صف ويتم تمرير كائن الصف عندما ينشئ الجدول صفوفًا.
اثنان: طريقة JS
من خلال هذه الطريقة ، من المريح للغاية تعيين معلمات للجدول ، وهو مريح للغاية لمعالجة البيانات ، خاصة عند تعيين طريقة الطلب وعنوانه. ومع ذلك ، فإن هذا المشروع هو مجرد صفحة ثابتة في الوقت الحالي. يرجى كتابة البيانات في المستقبل.
مثال 1: كما هو مذكور أعلاه
HTML:
<viv> <table id = "tablel01"> </table> </viv>
JS:
// الجدول المكون الإضافي (الجدول 1) يبدأ $ ('#tablel01'). bootstraptable ({الارتفاع: 268 ، // أعمدة البيانات المحاكاة: [[{align: 'center' ، valign: 'middle' ، field: 'lhc' ، title: 'to stonume' ، rowspan: 2} ، {align: "center" "Day" ، Colspan: 3} ، {align: 'center' ، valign: 'middle' ، field: 'bz' ، title: 'this week' ، colspan: 3} ، {align: 'center' ، valign: 'middle' ، field: 'by' ، 'this dehon' ، colspan: 3}] [all align: 'center:' العدد "} ، {align: 'center' ، valign: 'middle' ، الحقل: 'Drtb' ، العنوان:" سنة على أساس السنة "، التنسيق: Trend} ، {align: 'center' ، valign: middle '، field:' drhb '، title:' momentum '، formatter: trend} ، {align:' center ' العدد "} ، {align: 'center' ، valign: 'middle' ، الحقل: 'bztb' ، العنوان:" سنة على أساس سنة "، فورث: الاتجاه} ، {محاذاة:" المركز "، فالين: الوسط" ، الحقل: "الأوسط ،" المشكلة "} ، {align: 'center' ، valign: 'middle' ، الحقل: 'bytb' ، العنوان:" سنة على أساس سنة "، فورث: الاتجاه} ، {محاذاة:" المركز "، فالين: الأوسط" ، الحقل: "الوسط" ، " "Mono-Month" ، Formatter: Trend}]] ، البيانات: [{id: 1 ، LHC: "قادم Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' 1.59 '} Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، d rhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' 1.59 '} Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' 1.59 ' Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' 1.59 ' Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq :::::' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' 1.59 ' Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' 1.59 ' Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1 Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' 1.59 ' Stock '، D RBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' 1.59} Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' 1.59 '} Stock '، DRBQ:' 21341 '، drtb:' 0.21 '، drhb:' 0.33 '، bzbq:' 35624 '، bztb:' 1.62 '، bzhb:' 3.16 '، bybq:' 42613 '، bytb:' 2.78 '، byhb:' 1.59 ' اتجاه نمط السهم لأعلى ولأسفل عائم (القيمة ، الصف) {var trendicon = row.id ٪ 2 === 0؟التحليل: $ ('#tablel01'). bootstraptable ({}) هي العلامة في بداية المكون الإضافي ، وإضافة معلمات الجدول ، ثم في البيانات: هل بيانات الجدول ، وفي الأعمدة ، هو المكان الذي يتم فيه تعيين معلمات الأعمدة وبيانات الجدول. الشيء التمثيلي في هذا العنصر هو أن رأس الجدول مقسم إلى جزأين ، لذلك يجب إضافة صفائفان إلى الأعمدة [{}] و [{}]. تمت كتابة جميعهم في صفيف من قبل ، وتجتذب رمز المصدر طول الأعمدة
مثال 2:
يتطلب نفس HTML فقط علامة جدول مع معرف
JS:
// الجدول المكون الإضافي (الجدول 2) يبدأ // إعلان المتغيرات المستخدمة لحساب الإجمالي (الفحم المتراكم ، الخطة الشهرية) var yjharr = [] ؛ var ljlmarr = [] ؛ $ ('#tablel02') {align: 'center' ، valign: 'middle' ، الحقل: 'Gys' ، العنوان: 'المورد'} ، {align: 'center' ، valign: 'middle' ، الحقل: 'pz' ، العنوان: 'Variety'} ، {align: 'center' ، valign: 'middle' ، field: 'rz' ، title: 'caloric value'}} ، {align: align: align: align: ' "MJ" ، العنوان: "سعر الفحم"} ، {محاذاة: "المركز" ، فالين: "الأوسط" ، الحقل: "BMDJ" ، العنوان: "سعر وحدة الفحم القياسية"} ، {align: 'center' ، valign: 'middle' ، field: 'drlm' ، title: "الفحم القادم" ، "الفحم القادم إلى اليوم"} ، {محاذاة: "المركز" ، فالين: "الأوسط" ، الحقل: "ljlm" ، العنوان: "الفحم التراكمي القادم"} ، {محاذاة: "المركز" ، فالين: التقدم المخطط لإكمال '، التنسيق: Progress}] ، البيانات: [{id: 2 ، Gys:' shuangxin mining '، pz:' low sulfur الفحم ، RZ: '' ، MJ: '' ، BMDJ: '' ، DRLM: '' ، LJLM: '6686.08' ، yjhl: '30000' ، yjhjd: '22 ٪ '} ، {id: 3 ، Gys:' Yitai Co. ، ltd. '، pz:' Engineering الفحم ، RZ: '' ، MJ: '' ، BMDJ: '' ، d rlm: '' ، ljlm: '51888.72' ، yjhl: '70000' ، yjhjd: '74 ٪ ' الفحم "، rz: '' ، mj: '' ، bmdj: '' ، drlm: '' ، ljlm: '20041.86' ، yjhl: '90000' ، yjhjd: '100 ٪'} ، {id: 5 ، gys:" Aidi Energy "، pz:" low sulf col J: '' ، bmdj: '' ، drlm: '' ، ljlm: '5191.08' ، yjhl: '' ، yjhjd: '0 ٪'} ، {id: 6 ، gys: 'Hengtai Coal' ، pz: 'Medium High sulfur الفحم ، RZ: '' ، MJ: '' ، BMDJ: '' ، DRLM: '' ، ljlm: '18265.56' ، yjhl: '' ، yjhjd: '0 ٪'} ، {id: 6 ، gys: 'Hengtai cal' ، pz: "medium high culfur" MJ: '' ، bmdj: '' ، drlm: '' ، ljlm: '18265.56' ، yjhl: '' ، yjhjd: '0 ٪'} ، {id: 6 ، gys: 'Hengtai Coal' ، pz: 'Medium High sulfur الفحم "، rz: '' ، mj: '' ، bmdj: '' ، drlm: '' ، ljlm: '18265.56' ، yjhl: '' ، yjhjd: '0 ٪'}]}) ؛ red = '#e63737' ؛ var blue = '#b6ccf4' ؛ yjharr.push (row.yjhl) ؛ ljlmarr.push (row.ljlm) ؛ return "<div style = 'height: 20px ؛ border: 1px solid#b6ccf4 ؛' style = 'display: block ؛ float: left ؛ width: "+width+" ٪ ؛ height: 100 ٪ ؛ background-color: "+(width> = 100؟ red: blue)+" i = 0 ؛ i <yjharr.length ؛ i ++) {if (yjharr [i] == "") {yjharr [i] = 0 ؛} subyjh+= parsefloat (yjharr [i]) ؛} لـ (var i = 0 ؛ j = 0 ؛ j <ljlmarr.length ؛ j ++) {if (ljlmarr [j] == "") {ljlmarr [j] = 0 ؛} subljlm+= parsefloat (ljlmarr [j]) ؛} row.pus H ({id: 1 ، gys: 'total' ، pz: '' ، rz: '' ، mj: '' ، bmdj: '' ، drlm: '' ، ljlm: subljlm ، yjhl: subyjh ، yjhjd: '107 ٪}) ؛ العودة صف}هذا في الواقع لا يختلف كثيرًا عن الطريقة الأولى ، فهو مجرد وضع الأعمدة المخصصة في البيانات وتعيينها. من الأسهل الفهم. للحصول على معلمات أخرى ، يرجى الرجوع إلى الموقع الرسمي. البيانات ديناميكية وكيفية إضافتها عبر الإنترنت. هناك العديد من الأمثلة ، طالما تم وضعها في .BootStraptable ({})
ما ورد أعلاه هو الرأس الثابت التكيفي لجهاز Bootstrap Form Plug الذي أدخله المحرر (مفيد للغاية). آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!