1. การแนะนำของตาราง bootstrap
เกี่ยวกับการแนะนำตาราง bootstrap โดยทั่วไปมีสองวิธี:
1. ดาวน์โหลดซอร์สโค้ดโดยตรงและเพิ่มลงในโครงการ
เนื่องจากตาราง bootstrap เป็นส่วนประกอบของ bootstrap จึงขึ้นอยู่กับ bootstrap ก่อนอื่นเราต้องเพิ่มการอ้างอิงไปยัง bootstrap
2. ใช้ Nuget เวทมนตร์ของเรา
เปิด Nuget และค้นหาแพ็คเกจทั้งสองนี้
Bootstrap เป็น 3.3.5 ล่าสุดอยู่แล้วดังนั้นเราจึงสามารถติดตั้งได้โดยตรง
รุ่นของตาราง bootstrap เป็นจริง 0.4 ซึ่งถูกหลอกลวงเกินไป ดังนั้นบล็อกเกอร์แนะนำให้ดาวน์โหลดแพ็คเกจ Bootstrap Table โดยตรงในซอร์สโค้ด ตาราง Bootstrap เวอร์ชันล่าสุดน่าจะเป็น 1.9.0
พื้นหลังของบทความนี้มีการแนะนำ:
เมื่อเร็ว ๆ นี้ลูกค้าเพิ่มความต้องการและต้องการเพิ่มประสิทธิภาพระบบการจัดการดั้งเดิมซึ่งสามารถแสดงได้ดีผ่านโทรศัพท์มือถือ เขาคิดถึงวิธีแก้ปัญหาสองประการ:
วางแผน A: เก็บหน้าต้นฉบับและออกแบบชุดหน้าใหม่ที่เหมาะสมสำหรับโทรศัพท์มือถือ เมื่อเข้าถึงโทรศัพท์มือถือให้ป้อน m.zhy.com (หน้ามือถือ) และเมื่อเข้าถึงอุปกรณ์พีซีให้ป้อน www.zhy.com (หน้าพีซี)
โซลูชัน B: ใช้เฟรมเวิร์ก Bootstrap เพื่อแทนที่หน้าดั้งเดิมและปรับให้เข้ากับโทรศัพท์มือถือแท็บเล็ตและอุปกรณ์พีซีโดยอัตโนมัติ
การใช้โซลูชัน A จำเป็นต้องมีการออกแบบชุดของอินเทอร์เฟซและเขียนอินเทอร์เฟซใหม่ที่เหมาะสมสำหรับหน้า เมื่อพิจารณาถึงปัญหาเวลาและค่าใช้จ่ายโครงการใช้โซลูชัน B
2. ผลการแสดงผล
2. การแนะนำสั้น ๆ เกี่ยวกับตาราง bootstrap
Table Bootstrap เป็นปลั๊กอินตารางที่มีน้ำหนักเบาที่ใช้ AJAX เพื่อรับข้อมูลในรูปแบบ JSON การปนเปื้อนและการเติมข้อมูลนั้นสะดวกมากและรองรับความเป็นสากล
3. วิธีใช้
1. แนะนำ JS และ CSS
<!-สไตล์ css-> <link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet"> <link href = "css/bootstrap/bootstrap-table.css" rel = "stylesheet"> <! src = "js/bootstrap/jQuery-1.12.0.min.js" type = "text/javascript"> </script> <script src = "js/bootstrap/bootstrap.min.js"> </script> <script src = "js/bootstrap/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"
2. การเติมข้อมูลตาราง
มีสองวิธีในการรับข้อมูลจากตาราง bootstrap หนึ่งคือการระบุแหล่งข้อมูลผ่านคุณสมบัติ Data-URL ของตารางและอีกอันคือการระบุ URL เมื่อเริ่มต้นตารางผ่าน JavaScript เพื่อรับข้อมูล
<table data-toggle = "ตาราง"> <tead> ... </tead> </table> ...
$ ('#table'). bootstraptable ({url: 'data.json'});วิธีที่สองมีความยืดหยุ่นมากขึ้นเมื่อประมวลผลข้อมูลที่ซับซ้อนกว่าวิธีแรก โดยทั่วไปวิธีที่สองใช้ในการกรอกข้อมูลตาราง
$ (function () {// 1. เริ่มต้นตาราง var otable = new TableInit (); otable.init (); // 2. การเริ่มต้นของการคลิกของปุ่ม/ * var obuttoninit = ใหม่ buttonInit (); obuttoninit.init (); */}); var tableInit = function () {var otableInit = วัตถุใหม่ (); // เริ่มต้นตาราง otableInit.init = function () {$ ('#tradelist'). bootstraptable ({url: '/venderManager/tradelist', // request url (*) วิธี: 'โพสต์', // วิธีการร้องขอ (*) แคช, ค่าเริ่มต้นเป็นจริงดังนั้นโดยทั่วไปคุณต้องตั้งค่าคุณสมบัตินี้ (*) การแบ่งหน้า: จริง, // สถานที่ที่จะแสดงเพจ (*) ที่สามารถจัดเรียงได้: เท็จ, // ไม่ว่าจะเรียงลำดับ: "asc", // วิธีการเรียงลำดับพาราม PAGENUMBER: 1, // เริ่มต้นหน้าแรกที่จะโหลดหน้าแรกเริ่มต้นหน้าแรก: 50, // จำนวนแถวที่บันทึกต่อหน้า (*) Pagelist: [10, 25, 50, 100], // จำนวนแถวต่อหน้าที่จะเลือก (*) ความสูงของตารางตามจำนวนระเบียนที่ไม่ซ้ำกัน: "id", // การระบุที่ไม่ซ้ำกันของแต่ละแถวโดยทั่วไปคอลัมน์คีย์หลัก cardView: false, //, ดูรายละเอียดรายละเอียดรายละเอียด: เท็จ, // ทำคอลัมน์พาเรนต์และลูก number '}, {ฟิลด์:' รับช่วงเวลา ', ชื่อเรื่อง:' เวลาการทำธุรกรรม '}, {ฟิลด์:' ราคา ', ชื่อเรื่อง:' จำนวน '}, {ฟิลด์:' Coin_credit ', ชื่อเรื่อง:' อินพุตเหรียญ '}, {ฟิลด์:' bill_credit ', ชื่อเรื่อง: 'ประเภทการทำธุรกรรม'}, {ฟิลด์: 'goodmachineid', ชื่อเรื่อง: 'หมายเลขสินค้า'}, {ฟิลด์: 'inneridname', ชื่อ: 'หมายเลขเลนคาร์โก - // รับพารามิเตอร์การสืบค้น otableInit.QueryParams = function (params) {var temp = {// ชื่อคีย์ที่นี่และชื่อตัวแปรของคอนโทรลเลอร์จะต้องอยู่เสมอ หากสิ่งนี้เปลี่ยนไปคอนโทรลเลอร์จะต้องเปลี่ยนเป็นขีด จำกัด เดียวกัน: params.limit, // ขนาดหน้าชดเชย: params.offset, // หมายเลขหน้า sdate: $ ("#strattime"). val (), แก้ไข: $ ("#endtime"). val () $ ("#cardnumber"). val (), maxrows: params.limit, pageindex: params.pagenumber, portid: $ ("#portid"). val (), cardnumber: $ ("#cardnumber") val () ความสำเร็จ: $ ('อินพุต: วิทยุ [name = "ความสำเร็จ"]: ตรวจสอบ'). val (),}; กลับอุณหภูมิ; - กลับ otableinit; -ฟิลด์ฟิลด์จะต้องสอดคล้องกับฟิลด์ที่ส่งคืนโดยเซิร์ฟเวอร์ก่อนที่ข้อมูลจะปรากฏขึ้น
3. รับข้อมูลในพื้นหลัง
. Servlet ได้รับข้อมูล
bufferedReader bufr = new bufferedReader (ใหม่ inputStreamReader (request.getInputStream (), "UTF-8")); StringBuilder sbuilder = new StringBuilder (""); String temp = ""; ในขณะที่ ((temp = bufr.readline ())! = null) {sbuilder.append (temp); } bufr.close (); สตริง json = sbuilder.toString (); jsonObject json1 = jsonobject.fromobject (JSON); String sdate = json1.getString ("sdate"); // รับข้อมูล front-end ด้วยวิธีนี้ ...ข. วิธีการที่สอดคล้องกันในคอนโทรลเลอร์ SpringMVC ได้รับข้อมูล
Public JsonResult getDepartment (int ขีด จำกัด , int ออฟเซ็ต, string orderiD, สตริง sellerId, portid, cardnumber, ความสำเร็จ, maxrows, remetype) {... }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) {ดำเนินการต่อ; } jo = new JsonObject (); jo.put ("id", i+1); jo.put ("liushuiid", tb.getliusUSHUIID ()); jo.put ("ราคา", string.format ("%1.2f", tb.getPrice ()/100.0)); Jo.put ("Mobilephone", tb.getMobilephone ()); jo.put ("รับช่วงเวลา", toolbox.getymdhms (tb.getReceivetime ())); Jo.put ("Tradepe", 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 ("GoodsName", 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 ("รวม", ทั้งหมด); // บันทึกทั้งหมด 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 ("ออฟเซ็ต")); int limit = toolbox.filterint (json1.getString ("จำกัด ")); if (Offset! = 0) {pageindex = Offset/Limit;} PageIndex+= 1; // กี่หน้า <br> ...4. อื่น ๆ
Bootstrap3 เข้ากันได้กับเบราว์เซอร์ IE8! ดูบทความ: //www.vevb.com/article/83366.htm
หากคุณยังไม่ได้เรียนรู้เพียงพอคุณสามารถคลิกที่นี่เพื่อเรียนรู้แล้วแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะช่วยให้คุณเรียนรู้ตาราง JS Table Component Bootstrap ได้ดีขึ้น