ตาราง Bootstrap มีน้ำหนักเบาและมีคุณสมบัติที่หลากหลายที่แสดงในรูปแบบตารางรองรับการเลือกเดี่ยวช่องทำเครื่องหมายการเรียงลำดับการเพจ, คอลัมน์แสดงผล/ซ่อน, ตารางการเลื่อนชื่อคงที่, การออกแบบที่ตอบสนอง, การโหลด AJAX โหลดคอลัมน์ที่เรียงลำดับและการใช้งาน
ชุดตาราง bootstrap:
คำอธิบายโดยละเอียดของ JS Table Component Artifact Table Table (เวอร์ชันพื้นฐาน)
สิ่งประดิษฐ์ส่วนประกอบตารางตาราง bootstrap ของชุดองค์ประกอบ JS [บทสุดท้าย]
สิ่งประดิษฐ์ส่วนประกอบตารางตาราง bootstrap ของชุดองค์ประกอบ JS [2. การสั่งซื้อโต๊ะแม่-ลูกและคอลัมน์แถว]
1. ผลการแสดงผล
วันนี้ฉันจะเปลี่ยนวิธีการต่อไปนี้เล็กน้อย มาดูเอฟเฟกต์การใช้งานก่อนจากนั้นแนะนำการใช้งานรหัสและข้อควรระวังในภายหลัง มาเลยส่งการเรนเดอร์:
1. การแสดงตารางพ่อและลูกชาย
2. การสั่งซื้อแถว
ก่อนสั่งซื้อ
ลากบรรทัดเพื่อเรียงลำดับไปยังบรรทัดแรก
3. การสั่งซื้อคอลัมน์
ก่อนสั่งซื้อ
ลากชื่อคอลัมน์เรียงลำดับ
หลังจากสั่งซื้อ
2. คำอธิบายโดยละเอียดเกี่ยวกับรหัสตารางพ่อ-ลูก
ในบทก่อนหน้าเราแนะนำการใช้งานขั้นพื้นฐานของตาราง bootstrap เมื่อเริ่มต้นตารางจะมีคุณสมบัติ "Detailview" ตั้งค่าเป็นจริงและคุณสามารถเห็นไอคอนในรูปของ "+" ที่ด้านหน้าของแต่ละแถว การคลิกไอคอนนี้จะกระตุ้นเหตุการณ์ที่โหลด Subtable นี่คือหลักการทั่วไป มาดูรหัสกันเถอะมันง่ายมาก
1. เริ่มต้นตารางและลงทะเบียนบรรทัดเพื่อขยายเหตุการณ์
$ ("#tb_powerset"). bootstraptable ({url: '/api/menuapi/getParentMenu', วิธี: 'รับ', Detailview: true, // parent และ table table // sidepagination: 'เซิร์ฟเวอร์', หน้า: 10, pageList: 'menu_url', title: 'url url'}, {field: 'parent_id', ชื่อ: 'เมนูแม่'}, {ฟิลด์: 'menu_level', ชื่อ: 'ระดับผู้ชาย'},], // การลงทะเบียนเหตุการณ์ที่โหลด subtablesลองดูที่พารามิเตอร์สามตัวของฟังก์ชันวิธีการที่สอดคล้องกัน (ดัชนี, แถว, $ รายละเอียด) ของเหตุการณ์การโหลด subtable onexpandrow
ดัชนี: ดัชนีแถวของแถวปัจจุบันของตารางหลัก
แถว: วัตถุข้อมูล JSON ของแถวปัจจุบันของตารางหลัก
$ รายละเอียด: วัตถุ TD ในแถวใหม่ที่สร้างขึ้นภายใต้แถวปัจจุบัน
พารามิเตอร์ที่สามมีความสำคัญอย่างยิ่งเนื่องจากตาราง subtable ที่สร้างขึ้นถูกโหลดในวัตถุ $ รายละเอียด ตาราง bootstrap สร้างวัตถุ $ รายละเอียดสำหรับเราจากนั้นเราเพียงแค่ต้องเติมด้วยตารางที่เราต้องการ
2. มาดูวิธี oinit.initsubtable ()
// เริ่มต้น subtable (loop ไร้สาย) oinit.initsubtable = ฟังก์ชั่น (ดัชนี, แถว, $ รายละเอียด) {var parentid = row.menu_id; var cur_table = $ detail.html ('<table> </table>') ค้นหา ('table'); $ (cur_table). 'get', queryParams: {straperentid: parentid}, ajaxoptions: {strparentid: parentid}, clicktoselect: true, detailview: true, // ตาราง parent-child imentiD: "menu_id", pagesize: 10, pagelist: [10, 25], คอลัมน์: ชื่อ '}, {ฟิลด์:' menu_url ', ชื่อเรื่อง:' url url '}, {ฟิลด์:' parent_id ', ชื่อ:' เมนูแม่ '}, {ฟิลด์:' menu_level ', ชื่อเรื่อง:' ระดับเมนู '},] {oinit.initsubtable (ดัชนี, แถว, $ subdetail);}});};จากนี้เราจะเห็นได้ว่าหลักการของการสร้างตารางย่อยคือการสร้างวัตถุตาราง cur_table จากนั้นลงทะเบียนการเริ่มต้นตารางของวัตถุนี้ ไม่ใช่เรื่องง่ายมาก ~~
3. คำอธิบายโดยละเอียดของรหัสการสั่งซื้อบรรทัด
รหัสการสั่งซื้อบรรทัดนั้นง่ายกว่าลองมาดูกันเถอะ
1. จำเป็นต้องมีการอ้างอิงเพิ่มเติมสองรายการ
<script src = "~/content/jQuery-ui-1.11.4.custom/external/jQuery.tablednd.js"> </script> <script src = "~/content/bootstrap-table/extensions
2. เมื่อกำหนดตารางในหน้า CSHTML ให้เพิ่มสองแอตทริบิวต์
<table id = "tb_order" data-use-row-attr-func = "true" data-reordeable-rows = "true"> </table>
จากนั้นไม่จำเป็นต้องทำการแก้ไขใด ๆ เมื่อเริ่มต้นตาราง JS และตารางที่โหลดสามารถรับรู้ฟังก์ชั่นการสั่งซื้อแถว
4. คำอธิบายโดยละเอียดของรหัสการสั่งซื้อคอลัมน์
คล้ายกับลำดับบรรทัด การสั่งซื้อคอลัมน์ใช้ดังนี้:
1. อ้างอิง JS และ CSS เพิ่มเติมสองสามรายการ
<script src = "~/content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"> </script> <link rel = "stylesheet" href = "../ essets.css.css"> <link rel = "Stylesheet" href = "https://rawgit.com/akottr/dragtable/master/dragtable.css"> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js" src = "https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"> </script> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js" src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
2. เมื่อกำหนดตารางในหน้า CSHTML ให้เพิ่มแอตทริบิวต์
<table id = "tb_departments" data-reordeable-columns = "true"> </table>
ไม่จำเป็นต้องมีการแก้ไขที่อื่น ตารางที่โหลดสามารถรับรู้การสั่งซื้อคอลัมน์ ง่ายไหม?
5. การควบคุมการกรอง
ในขั้นต้นบทความนี้กำลังจะจบลงฉันจำได้ว่ามีฟังก์ชั่นการค้นหาในบทก่อนหน้า ดูเหมือนว่าฟังก์ชั่นการค้นหาไม่สามารถใช้งานได้เมื่อใช้เพจเซิร์ฟเวอร์ ดังนั้นฉันจึงจำได้ว่าฉันมีฟังก์ชั่นคล้ายกับการกรองแต่ละคอลัมน์ใน CS มาก่อน บล็อกเกอร์อยากรู้อยากเห็นอีกครั้ง Table Bootstrap มีการกรองประเภทนี้ในแต่ละคอลัมน์ในตารางหรือไม่ดังนั้นฉันจึงตรวจสอบเอกสาร ผลลัพธ์เป็นจริงและมีบางอย่างจริงๆ ~~ มาดูกันเถอะ
1. แสดงการเรนเดอร์
2. ตัวอย่างรหัส
(1) แนะนำ JS พิเศษ
<script src = "~/content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"> </script>
(2) กำหนดคุณลักษณะตารางและแอตทริบิวต์ส่วนหัว
<table id = "tb_roles" data-filter-control = "true"> <thead> <tr> <th data-field = "role_name" data-filter-control = "เลือก"> ชื่อบทบาท </th> <th data-field = "คำอธิบาย" data-filter-control = "input"> บทบาทเริ่มต้นบทบาท </th> </tr> </tead> </table>
เนื่องจากคุณลักษณะของส่วนหัวของตารางถูกกำหนดไว้ที่นี่จึงไม่จำเป็นต้องกำหนดคอลัมน์เมื่อเริ่มต้น JS
(3) การเริ่มต้น JS
$ ('#tb_roles'). bootstraptable ({url: '/role/getrole', วิธี: 'get', แถบเครื่องมือ: '#toolbar', ลาย: จริง, แคช: เท็จ, ลาย: จริง, pagination: จริง SidePagination: "เซิร์ฟเวอร์", หน้า: 10, pagelist: [10, 25, 50, 100], ค้นหา: จริง, showcolumns: จริง, showrefresh: จริง, minimumcountcolumns: 2, clicktoselect: true,});ในตอนแรกบล็อกเกอร์คิดว่าการค้นหาประเภทนี้อาจเป็นเพียงการเพจผู้ใช้ไคลเอนต์ แต่หลังจากการดีบักมันไม่ใช่กรณี เงื่อนไขการค้นหาดั้งเดิมสามารถส่งผ่านไปยังเซิร์ฟเวอร์ผ่าน JSON มาดูกระบวนการดีบักกัน
รับพารามิเตอร์ในพื้นหลังและ deserialize พวกเขา
ด้วยวิธีนี้เราสามารถผ่านเงื่อนไขการสืบค้นได้ดีไปยังพื้นหลัง ดีมากและทรงพลัง สิ่งนี้จะกำจัดปัญหาในการขยายฟังก์ชั่นการค้นหาตาราง ~~
6. สรุป
ข้างต้นเป็นแอปพลิเคชันส่วนขยายของตาราง bootstrap อาจไม่สมบูรณ์และมีการใช้งานขั้นสูงบางอย่างที่ไม่ได้แนะนำเช่นการรวมแถวและคอลัมน์การแช่แข็งแถวและคอลัมน์ ฯลฯ
เนื้อหาข้างต้นเป็นความรู้ที่เกี่ยวข้องของสิ่งประดิษฐ์ส่วนประกอบตารางตาราง bootstrap [2. พ่อและลูกชายและคำสั่งซื้อแถวและคอลัมน์] แนะนำให้รู้จักกับคุณโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!