สรุปการใช้งานโต๊ะ bootstrap
Bootstrap-Table เป็นปลั๊กอินตารางที่เขียนบนพื้นฐานของโต๊ะ bootstrap ซึ่งใช้เป็นพิเศษเพื่อแสดงข้อมูล Bootstrap มาจาก Twitter และปัจจุบันเป็นกรอบการทำงานระดับแนวหน้าที่ได้รับความนิยมมากที่สุด Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript และมีข้อดีของการพัฒนาที่เรียบง่ายยืดหยุ่นและรวดเร็ว ฉันจะไม่อธิบายเช่นเดียวกับ bootstrap ที่นี่ บทความนี้จะมุ่งเน้นไปที่การอธิบายความเข้าใจบางอย่างของฉันเกี่ยวกับการใช้โต๊ะ bootstrap ในโครงการของฉันและวิธีการเรียนรู้
ก่อนอื่นให้ฉันอธิบายความสัมพันธ์ระหว่าง JQuery, Bootstrap และ Bootstrap-Table หลายส่วนของรหัส 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 เข้มงวด // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <head> content = "text/html; charset = utf-8"/> <meta name = "คำอธิบาย" content = "/> <meta name =" คำหลัก "content ="/> <script type = "text/javascript" src = "./ js/jQuery-2.1.js" src = "./ bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "./ bootstrap-table/bootstrap-table-all.js"> </script> <script type = "ข้อความ/javascript" src = "./ bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <link rel = "stylesheet" type = "text/css" href = "./ bootstrap/css/bootstrap.min.cs" href = "./ bootstrap-table/bootstrap-table.min.css"> </head> <ภาษาสคริปต์ = "javascript"> </script> <body> <div> <div> <div> <div> <h3> เพิ่มบัญชีครู </h3> Aria-hidden = "true"> </span> แก้ไข </button> <button id = "btn_delete" type = "ปุ่ม"> <span aria-hidden = "true"> </span> ลบ </button> </div> <table id = "tailmative" data.php "data.php" data.php "data.php data-toolbar = "#toolbar" data-pagination = "true" data-search = "true" data-show-refresh = "true" data-show-toggle = "true" data-show-columns = "true" data-page-size = "5"> <tr> data-field = "t_name"> ชื่อครู </th> </tr> </table> </div> </div> </div> </body>
ภาพการทำซ้ำ:
ตกลงถัดไปลองวิเคราะห์ความหมายของรหัสข้างต้นในขั้นตอน
1. ก่อนอื่นเราต้องดาวน์โหลดแพ็คเกจ jQuery bootstrap bootstrap-table ที่เกี่ยวข้อง มีบทเรียนออนไลน์และเราจะไม่อธิบายวิธีการดาวน์โหลดที่นี่
จากการอ้างอิงถึงชื่อไฟล์ 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 ล่าสุดภายใต้ Table Bootstrap
5. bootstrap-table-zh-cn.js --- ไฟล์เริ่มต้นจีนล่าสุดภายใต้ bootstrap-table/locale
6. bootstrap-table.min.css --- ไฟล์ที่บีบอัด CSS ล่าสุดภายใต้ตาราง bootstrap
ทั้งหกนี้จะต้องได้รับการกำหนดค่าซึ่งในระหว่างที่ bootstrap-table-zh-cn.js เป็นไฟล์ JS ที่รองรับภาษาจีน เฉพาะเมื่อโหลดไฟล์นี้บางส่วนของข้อมูลการแสดงตารางของเราจะถูกตั้งค่าเป็นภาษาจีน
มาทดลองกับเอฟเฟกต์การแสดงผลหลังจากลบ bootstrap-table-zh-cn.js
แน่นอนว่าเรายังสามารถตั้งค่าข้อมูลการแสดงผลเป็นภาษาอื่น ๆ เพียงแทนที่ Bootstrap-table-zh-cn.js ด้วยไฟล์ JS ในภาษาอื่น ๆ มีการสนับสนุนในแพ็คเกจ Bootstrap-Table
นอกจากนี้เรายังสามารถดูซอร์สโค้ดในไฟล์นี้ ลองมาดูกันแล้วคุณจะรู้ว่าไฟล์นี้ทำอะไร
/** * ตาราง bootstrap การแปลภาษาจีน * ผู้แต่ง: Zhixin Wen <[email protected]> */(ฟังก์ชั่น ($) {'ใช้อย่างเข้มงวด'; $ .fn.bootstraptable.locales ['zh-cn'] = {formatloadingmessage: ฟังก์ชั่น (pagenumber) {return 'การแสดงต่อหน้า' + pagenumber + 'บันทึก'; {return 'ไม่พบบันทึกการจับคู่'; }, formattoggle: function () {return 'switch';
คุณสามารถเห็นได้อย่างรวดเร็วว่าหลังจากอ้างถึงไฟล์ JS เมื่อโหลดคุณสวดอ้อนวอนขอผลการเริ่มต้น แปลงข้อมูลที่แสดงเป็นเนื้อหาขนาดกลางที่เกี่ยวข้อง
2. ถัดไปพูดคุยเกี่ยวกับรหัส HTML ที่เกี่ยวข้อง ในความเป็นจริงนี่เป็นเพียงส่วนเดียวของรหัส HTML ที่เกี่ยวข้องกับโต๊ะ bootstrap
<table id = "Teacher_table" data-toggle = "ตาราง" data-url = "./ data.php" data-method = "post" data-query-params = "queryParams" data-toolbar = "#toolbar-pagination =" true-search-search = "จริง" data-page-size = "5"> <thead> <tr> <th data-field = "ชื่อ"> บัญชีผู้ใช้ </th> <th data-field = "pwd"> รหัสผ่านผู้ใช้ </th> <th data-field = "t_name"> ชื่อครู </th> </tr>
ใช่มีแท็กตารางเดียวรวมถึงพารามิเตอร์จำนวนมากและรูปแบบของตารางจะถูกนำไปใช้ผ่านพารามิเตอร์เหล่านี้ คุณควรรู้ว่ามีสไตล์และฟังก์ชั่นใดบ้าง เพียงแค่แสดงรายการพวกเขามันจะลดลงอย่างแน่นอนในถัง เป็นการดีกว่าที่จะสอนผู้คนถึงวิธีการตกปลามากกว่าที่จะสอนผู้คนถึงวิธีการตกปลา ฉันจะบอกคุณว่าจะหาหมวดหมู่เหล่านี้ได้ที่ไหน ความหมายของชั้นเรียน เราสามารถไปที่เว็บไซต์มืออาชีพของโต๊ะ bootstrap เพื่อค้นหาลิงค์ที่ฉันใช้ คลิกเพื่อเปิดลิงค์ หากไม่ถูกต้องคุณสามารถป้อน http://bootstrap-table.wenzhixin.net.cn/documentation โดยตรง
แน่นอนคุณสามารถดูตัวอย่างได้ในตัวอย่าง
เราจะตรวจสอบความหมายของพารามิเตอร์ที่เกี่ยวข้องได้อย่างไร? เมื่อคุณเห็นภาพด้านบนด้านขวาคือตัวเลือกบางอย่างคุณสามารถเลือกแอตทริบิวต์ตารางแอตทริบิวต์แถวและเหตุการณ์ที่มีผลผูกพันที่คุณสามารถตั้งค่าได้
คลิกตัวเลือกตารางแอตทริบิวต์ตารางเพื่อแสดงรูปต่อไปนี้ ก่อนอื่นคุณจะเห็นว่าชื่อชื่อใช้สำหรับ JS เพื่อสร้างตารางและแอตทริบิวต์ใช้สำหรับ HTML เพื่อสร้างตาราง
เพื่อให้ตัวอย่างบางส่วนมีพารามิเตอร์หลายอย่างในรหัสข้างต้นของเรา สิ่งที่พวกเขาหมายถึงคือ:
Data-URL: URL สำหรับการร้องขอข้อมูล
วิธีการข้อมูล: วิธีการขอ
ความสูงของข้อมูล: ตั้งค่าความสูงของตาราง
data-Query-Params = "QueryParams": การตั้งค่า
data-toolbar = "#toolbar": ตั้งค่าคอนเทนเนอร์ที่ปุ่มคือ ID คือแถบเครื่องมือ
data-pagination = "true": ตั้งค่าว่าจะแสดงหมายเลขหน้า
data-search = "true": ตั้งค่าช่องค้นหา
data-show-refresh = "true": ตั้งค่าปุ่มรีเฟรช
data-show-toggle = "true": ตั้งค่ารูปแบบการแสดงข้อมูล
ตอนนี้คุณควรเข้าใจวิธีการตรวจสอบ!
โปรดทราบว่ารหัสต่อไปนี้เป็นแกนกลาง <tr> หมายถึงกริดในแถวและ data-field = "ชื่อ" แสดงชื่อข้อมูลในกริดในแถว คุณสามารถเข้าใจฟิลด์ข้อมูลเป็น ID ได้เนื่องจากข้อมูลที่ส่งจากพื้นหลังมีความแตกต่างจากฟิลด์ข้อมูลและผู้ที่ถูกส่งไป
<tr> <th data-field = "name"> บัญชีผู้ใช้ </th> <th data-field = "pwd"> รหัสผ่านผู้ใช้ </th> <th data-field = "t_name"> ชื่อครู </th> </tr> </thead>
สำหรับผู้ที่ไม่ต้องการใช้การสร้าง HTML แบบคงที่คุณยังสามารถใช้ JS เพื่อสร้างการสร้างแบบไดนามิก ในการให้การสาธิตรหัสเพื่อตั้งค่าพารามิเตอร์ที่เกี่ยวข้องคุณจะต้องใช้ชื่อ: ตัวเลือกที่กล่าวถึงข้างต้น ตัวอย่างเช่นตั้งค่าไฟล์ data-url ปลายทางสำหรับการร้องขอข้อมูลใน html: "./data.php" ใน JS เพียงประกาศ URL: "./data.php"
$ ('#table'). bootstraptable ({คอลัมน์: [{ฟิลด์: 'id', ชื่อเรื่อง: 'รายการ id'}, {ฟิลด์: 'ชื่อ', ชื่อเรื่อง: 'ชื่อรายการ'}, {ฟิลด์: 'ราคา', ชื่อ: 'ราคารายการ'}], ข้อมูล: -3. ด้วยวิธีนี้รหัสอื่น ๆ ทำอะไรส่วนหนึ่งของรหัสใช้แผงใน boostrap เพื่อจัดรูปแบบนั่นคือเพื่อฝังตารางในแผงควบคุม เอฟเฟกต์ของโต๊ะ bootstrap หลังจากรหัสแผงที่ลบเป็นเช่นนี้
เป็นเพียงว่าไม่มีแผง
4. รูปแบบของการส่งข้อมูลข้อมูลที่ได้รับจาก Bootstrap-Table อยู่ในรูปแบบ JSON โดยค่าเริ่มต้น
คุณจะเห็นด้านบนว่าที่อยู่พื้นหลังที่ร้องขอคือ: "./data.php" ลองดูที่เนื้อหาของมัน
<? php $ results [0] = array ("name" => "aoze", "pwd" => "20132588", "t_name" => "Zhang San"); $ results [1] = array ("name" => "lisi", "pwd" => "1234", "t_name" => "li si"); $ results [2] = array ("name" => "wangwu", "pwd" => "44455", "t_name" => "wang wu"); echo json_encode ($ ผลลัพธ์);?>มันง่ายมาก! แน่นอนว่านี่เป็นเพียงข้อมูลการทดสอบที่ฉันเขียนด้วยมือและแน่นอนว่าพบได้จากฐานข้อมูลในโครงการ
5. แน่นอนมันไม่เพียงพอที่จะแสดงข้อมูล เราจำเป็นต้องโต้ตอบกับตารางเช่นฟังก์ชั่นการลบและการปรับเปลี่ยน ในเวลานี้เราจำเป็นต้องใช้เหตุการณ์บางอย่างของโต๊ะ bootstrap ในกรณีข้างต้นฉันได้ฝังส่วนประกอบสองปุ่มในตารางดังแสดงในรูป
วิธีการใช้งานโมเสคนี้คือการเพิ่มบรรทัด data-toolbar = "#toolbar" ลงในคุณสมบัติของตาราง
มันหมายถึงการเพิ่มฉลากที่มี ID เป็นแถบเครื่องมือไปยังบรรทัดในแถบเครื่องมือ
ในการใช้งานโครงการนี้ของฉันคุณต้องใช้สองปุ่มนี้เพื่อดำเนินการที่สอดคล้องกันในแถวที่เลือกในตาราง
เขียนเหตุการณ์ที่เกี่ยวข้องก่อนอื่นผูกเหตุการณ์ทริกเกอร์ที่เลือกไปยังตารางจากนั้นรับข้อมูลของแถวที่เลือกผ่านฟังก์ชั่น getSelectrow
$ ('#teacher_table') บน ('click-row.bs.table', ฟังก์ชั่น (e, แถว, องค์ประกอบ) {$ ('. ความสำเร็จ'). RemoveClass ('ความสำเร็จ'); // ลบแถวที่เลือกก่อนหน้านี้เลือกสไตล์ $ (องค์ประกอบ). ฟังก์ชั่น getSelectedRow () {var index = $ ('#teacher_table') ค้นหา ('tr.success'). ข้อมูล ('ดัชนี'); // รับแถวที่เลือกคืน $ ('#teacher_table'). bootstraptable ('getData') [ดัชนี]; // ส่งคืนข้อมูลทั้งหมดในแถวที่เลือกหากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานตาราง bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น