ตาราง bootstrap ตารางที่มีน้ำหนักเบาบน Bootstrap สามารถมีฟังก์ชั่นที่มีประสิทธิภาพเช่นส่วนหัวตารางคงที่, เดี่ยว/การตรวจสอบ, การเรียงลำดับ, การเพจ, การค้นหาและส่วนหัวของตารางที่กำหนดเองซึ่งสามารถปรับปรุงประสิทธิภาพการพัฒนาและลดเวลาในการพัฒนาได้ดีขึ้น
1. คำอธิบายปลั๊กอิน: ตาราง bootstrap แสดงรูปแบบตารางข้อมูลให้การสนับสนุนที่หลากหลาย, กล่องวิทยุ, กล่องกาเครื่องหมาย, การเรียงลำดับ, เพจ ฯลฯ ดาวน์โหลดปลั๊กอิน
2. ฟีเจอร์:
ได้รับการพัฒนาขึ้นอยู่กับ Bootstrap 3 (รองรับ Bootstrap 2 ด้วย)
อินเทอร์เฟซตอบสนอง
ส่วนหัวคงที่
กำหนดค่าได้อย่างเต็มที่
สนับสนุนคุณลักษณะข้อมูล
แสดง/ซ่อนคอลัมน์
แสดง/ซ่อนส่วนหัวของตาราง
รับข้อมูล JSON โดยใช้ AJAX
คลิกที่ส่วนหัวของตารางเพื่อจัดเรียงให้เรียบง่าย
รองรับการแสดงคอลัมน์ที่กำหนดเอง
รองรับเดี่ยว/reselect
ฟังก์ชั่นการเพจที่ทรงพลัง
สนับสนุนการจัดวางนามบัตร
สนับสนุนหลายภาษา
3. วิธีใช้:
1) แนะนำไลบรารี bootstrap (หากโครงการของคุณยังไม่ได้ใช้) และ bootstrap-table.css ในแท็กหัวของหน้า HTML
<link rel = "stylesheet" href = "bootstrap.min.css"> <link rel = "stylesheet" href = "bootstrap-table.css">
2) แนะนำไลบรารี jQuery, ห้องสมุด bootstrap (หากโครงการของคุณยังไม่ได้ใช้) และ bootstrap-table.js ก่อนที่แท็กหัวหรือแท็กตัวถูกปิด (แนะนำ)
<script src = "jQuery.min.js"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-table.js"> </script>
3) ระบุแหล่งข้อมูลนี่คือสองวิธี
วิธีที่ 1: ผ่านแท็กแอตทริบิวต์ข้อมูล
การตั้งค่า data-toggle = "ตาราง" ในตารางปกติเปิดใช้งานตาราง bootstrap โดยไม่ต้องเขียน JavaScript
<table data-toggle = "table" data-url = "data.json"> <tead> ... </tead> </bable>
วิธีที่ 2: ตั้งค่าแหล่งข้อมูลผ่าน JavaScript
เปิดใช้งานตารางด้วยแอตทริบิวต์ ID ผ่าน JavaScript
$ ('#table'). bootstraptable ({url: 'data.json'});:4. คำอธิบายข้อผิดพลาด:
เมื่อตั้งค่าฟอร์แมตฟิลด์โดยใช้วิธีแอตทริบิวต์แท็กฉันพบว่าไม่มีผลและ ภาพไม่ชัดเจน คุณสามารถดาวน์โหลดตัวอย่างสำหรับการวิจัยและดาวน์โหลดที่อยู่ได้โดยตรง
ตัวอย่างเช่น: <th data-field = "sex" data-formatter = "format_sex"> เพศ </th>
1) เหตุผล:
Bootstrap-table.js Line 399 เฉพาะ formatter typeof เท่านั้นที่เป็นฟังก์ชันในรหัส
2) วิธีแก้ปัญหา:
แก้ไขบล็อกรหัสบนบรรทัด 399:
ก่อนการแก้ไข
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (value, item);}หลังจากการแก้ไข:
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (value, item); } อื่นถ้า (typeof that.header.formatters [j] === 'string') {ถ้า (typeof window [that.header.formatters [j]] === 'function') {value = window [that.header.formatters [j]] (value, item); -หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นวิธีการใช้งานของตาราง bootstrap ที่ใช้ร่วมกันกับคุณ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับคุณที่จะเชี่ยวชาญวิธีการใช้งานของตาราง bootstrap