1. إدخال جدول التمهيد
فيما يتعلق بإدخال جدول bootstrap ، هناك عمومًا طريقتان:
1. قم بتنزيل الكود المصدر مباشرة وأضفه إلى المشروع.
نظرًا لأن جدول Bootstrap هو مكون من bootstrap ، فإنه يعتمد على bootstrap. نحتاج أولاً إلى إضافة إشارة إلى bootstrap.
2. استخدم nuget السحري لدينا
افتح nuget وابحث عن هاتين الحزمتين
Bootstrap هو بالفعل أحدث 3.3.5 ، حتى نتمكن من تثبيته مباشرة.
إصدار جدول bootstrap هو في الواقع 0.4 ، وهو خداع للغاية. لذلك يقترح المدون أن يتم تنزيل حزمة جدول bootstrap مباشرة في الرمز المصدر. يبدو أن أحدث إصدار من جدول Bootstrap هو 1.9.0.
تم تقديم خلفية هذه المقالة:
في الآونة الأخيرة ، رفع العميل طلبًا وأراد تحسين نظام الإدارة الأصلي ، والذي يمكن عرضه جيدًا من خلال الهواتف المحمولة. فكر في حلين:
الخطة أ: احتفظ بالصفحة الأصلية وقم بتصميم مجموعة جديدة من الصفحات مناسبة للهواتف المحمولة. عند الوصول إلى الهاتف المحمول ، أدخل m.zhy.com (صفحة الهاتف المحمول) ، وعند الوصول إلى جهاز الكمبيوتر ، أدخل www.zhy.com (صفحة الكمبيوتر)
الحل ب: استخدم إطار Bootstrap لاستبدال الصفحة الأصلية ، والتكيف تلقائيًا مع الهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر الشخصي
يتطلب استخدام الحل A تصميم مجموعة من الواجهات وإعادة كتابة الواجهة المناسبة للصفحة. بالنظر إلى قضايا الوقت والتكلفة ، يتبنى المشروع الحل ب
2. عرض تأثير
2. مقدمة موجزة لجدول bootstrap
جدول Bootstrap هو مكون إضافي لخفيفة الوزن يستخدم AJAX للحصول على البيانات بتنسيق JSON. ترقيم ترقيمها وملء البيانات مريحة للغاية ويدعم التدويل.
3. كيفية الاستخدام
1. تقديم JS و CSS
<!-نمط CSS-> <link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet"> <link href = "css/bootstrap/bootstrap-dable.css src = "js/bootstrap/jquery -1.12.0.min.js" type = "text/javaScript"> </script> <script src = "js/bootstrap/bootstrap.min.js"> </cript> <script src = "js/bootstrap/bootstrap> src = "js/bootstrap/bootstrap-table.js"> </script> <script src = "js/bootstrap/bootstrap-table.js"> </script> <script src = "js/bootstrap/bootstrap-table-zh-cn.js"> </script
2. ملء بيانات الجدول
هناك طريقتان للحصول على بيانات من جدول Bootstrap. أحدهما هو تحديد مصدر البيانات من خلال خاصية بيانات البيانات الخاصة بالبيانات ، والآخر هو تحديد عنوان URL عند تهيئة الجدول عبر JavaScript للحصول على البيانات.
<جدول البيانات toggle = "table"> <tead> ... </tead> </table> ...
$ ('#table'). bootstraptable ({url: 'data.json'}) ؛الطريقة الثانية أكثر مرونة عند معالجة البيانات المعقدة من الطريقة الأولى. بشكل عام ، يتم استخدام الطريقة الثانية لملء بيانات الجدول.
$ (function () {// 1. تهيئة الجدول var otable = new tableInit () ؛ otable.init () ؛ // 2. تهيئة زر النقر فوق الحدث/ * var obuttoninit = new buttoninit () ؛ obuttoninit.init () ؛ */}) ؛ var tableInit = function () {var otableInit = new Object () ؛ // تهيئة الجدول OtableInit.init = function () {$ ('#tradeList'). bootstraptable ({url: '/vendermanager/tradelist' ، // request url (*) method: 'post ‘، // request method (*) brice brint:' #toolbar '، // require url by the tool butto tool tool strup لاستخدام ذاكرة التخزين المؤقت ، يكون الافتراضي صحيحًا ، لذلك بشكل عام ، تحتاج إلى تعيين هذه الخاصية (*) تراجع: صحيح ، // أين يمكنك عرض الترحيل (*) قابلة للفرز: false ، // ما إذا Pagenumber: 1 ، // تهيئة الصفحة الأولى للتحميل ، صفحات الصفحة الأولى الافتراضية: 50 ، // عدد الصفوف المسجلة لكل صفحة (*) pagelist: [10 ، 25 ، 50 ، 100] ، // عدد الصفوف لكل صفحة ليتم تحديدها (*) ارتفاع الجدول وفقًا لعدد السجلات ، فريدة من نوعها: "id" ، // التعرف الفريد لكل صف هو عمومًا هو بطاقة عمود المفتاح الأساسي: false ، // هل العرض التفصيلي التفصيلي: الرقم '} ، {الحقل:' recivetime '، العنوان:' وقت المعاملة '} ، {الحقل:' السعر '، العنوان:' المبلغ '} ، {الحقل:' coin_credit '، العنوان: "نوع المعاملة"} ، {الحقل: "GoodMachineId" ، العنوان: "رقم الشحن"} ، {الحقل: "InneridName" ، العنوان: "رقم حارة البضائع"} ، {field: 'gouthname' ، title: 'name} ، {field:' changestatus '، title: "payment' ، {field: ' } ؛ // احصل على معلمات الاستعلام otableinit.queryparams = function (params) {var temp = {// اسم المفتاح هنا ويجب أن يكون الاسم المتغير لوحدة التحكم دائمًا. إذا تم تغيير هذا ، فيجب تغيير وحدة التحكم أيضًا إلى نفس الحد: params.limit ، // إزاحة حجم الصفحة: params.offset ، // رقم الصفحة sdate: $ ("#strattime"). val () ، edit: $ ("#endtime"). val () ، sellerid: $ ("#soliderid"). $ ("#cardnumber"). val () ، maxrows: params.limit ، pageIndex: params.pagenumber ، portid: $ ("#portid"). val () ، cardnumber: $ ( النجاح: $ ('الإدخال: الراديو [name = "Success"]: محدد "). Val () ،} ؛ عودة درجة الحرارة. } ؛ إرجاع OtableInit. } ؛يجب أن يتوافق حقل الحقل مع الحقل الذي تم إرجاعه بواسطة الخادم قبل عرض البيانات.
3. احصل على البيانات في الخلفية
أ. Servlet يحصل على البيانات
BufferedReader BUFR = جديد BufferedReader (New InputStreamReader (request.getInputStream () ، "UTF-8")) ؛ StringBuilder sbuilder = new StringBuilder ("") ؛ سلسلة temp = "" ؛ بينما ((temp = bufr.readline ())! = null) {sbuilder.append (temp) ؛ } bufr.close () ؛ String json = sbuilder.toString () ؛ jsonobject json1 = jsonobject.fromObject (json) ؛ String sdate = json1.getString ("sdate") ؛ // احصل على البيانات الأمامية من خلال هذه الطريقة ...ب. الطريقة المقابلة في وحدة تحكم springMVC تحصل على البيانات
public jsonresult getDepartment (int limit ، int stowse ، string orderid ، String sellerid ، portid ، cardnumber ، success ، maxrows ، tradetype) {...}4. ترقيم الصفحات (الذي يواجه معظم المشاكل)
باستخدام ترقيم الصفحات ، يجب أن تتضمن البيانات التي يتم إرجاعها من جانب الخادم صفوفًا ومجموعًا ، والرمز هو كما يلي:
... <br> gblst = sqlado.getTradelist (SQL ، PageIndex ، MaxRows) ؛ Jsonarray jSondata = New Jsonarray () ؛ jsonobject jo = null ؛ لـ (int i = 0 ، len = gblst.size () ؛ i <len ؛ i ++) {tradeBean tb = gblst.get (i) ؛ if (tb == null) {contert ؛ } jo = new jsonobject () ؛ jo.put ("id" ، i+1) ؛ jo.put ("liushuiid" ، tb.getliushuiid ()) ؛ Jo.put ("Price" ، String.Format ("٪ 1.2f" ، TB.GetPrice ()/100.0)) ؛ jo.put ("mobilephone" ، tb.getMobilephone ()) ؛ jo.put ("assivetime" ، toolbox.getymdhms (tb.getReceivetime ())) ؛ jo.put ("Tradetype" ، clsconst.trade_type_des [tb.getTradEtype ()]) ؛ jo.put ("changeStatus" ، (tb.getChangestatus ()! = 0)؟ "النجاح": "فشل") ؛ jo.put ("changeStatus" ، (tb.getChangestatus ()! = 0)؟ "النجاح": "فشل") ؛ jo.put ("sendstatus" ، (tb.getSendStatus ()! = 0)؟ "النجاح": "فشل") ؛ jo.put ("bill_credit" ، string.format ("٪ 1.2f" ، tb.getBill_Credit ()/100.0)) ؛ Jo.put ("التغييرات" ، string.format ("٪ 1.2f" ، tb.getChanges ()/100.0)) ؛ jo.put ("Goodroadid" ، tb.getgoodroadid ()) ؛ Jo.put ("smscontent" ، tb.getsmscontent ()) ؛ Jo.put ("orderid" ، tb.getorderid ()) ؛ Jo.put ("goodname" ، tb.getgoodsname ()) ؛ Jo.put ("InneridName" ، tb.getInneridName ()) ؛ Jo.put ("XMLSTR" ، tb.getxmlstr ()) ؛ jsondata.add (Jo) ؛ } int totalCount = sqlado.getTraderowsCount (SQL) ؛ jsonobject jsonobject = new JsonObject () ؛ jsonobject.put ("الصفوف" ، jsondata) ؛ // jsonarray jsonobject.put ("Total" ، TotalCount) ؛ // Total Records Out.print (jsonobject.toString ()) ؛ <br> ...5. مقدمة لمحتوى واجهة ترقيم الصفحات
الواجهة الأمامية تحصل على البيانات المفرطة ، والرمز كما يلي:
... <br> otableinit.queryparams = function (params) {var temp = {// اسم المفتاح هنا واسم متغير وحدة التحكم يجب أن يكون دائمًا. إذا تم تغيير هذا ، يجب أيضًا تغيير وحدة التحكم إلى نفس الحد: params.limit ، // كم عدد السجلات التي يتم إزاحةها: params.offset ، // عرض عدد السجلات المسجلة على صفحة sdate: $ ("#strattime"). val () ،} ؛ عودة درجة الحرارة. } ؛ <br> ...الواجهة الخلفية تحصل على البيانات المليئة ، والرمز كما يلي:
... <br> int pageIndex = 0 ؛ int offset = toolbox.filterint (json1.getString ("Offset")) ؛ int limit = toolbox.filterint (json1.getString ("limit")) ؛ if (إزاحة! = 0) {pageIndex = Offset/LIMIT ؛} pageIndex+= 1 ؛ // كم عدد الصفحات <br> ...4. آخرون
Bootstrap3 متوافق مع متصفح IE8! عرض المقالة: //www.vevb.com/article/83366.htm
إذا لم تكن قد تعلمت ما يكفي ، فيمكنك النقر هنا للتعلم ثم إرفاق موضوع رائع لك: Bootstrap التعلم التعليمي
ما سبق هو كل شيء عن هذا المقال. آمل أن يساعدك في تعلم أفضل جدول Bootstrap Artstrap Component Table.