สิ่งประดิษฐ์ส่วนประกอบตารางตาราง bootstrap ของชุดองค์ประกอบ JS [บทสุดท้าย]

ชุดตาราง bootstrap:

คำอธิบายโดยละเอียดของ JS Table Component Artifact Table Table (เวอร์ชันพื้นฐาน)

สิ่งประดิษฐ์ส่วนประกอบตารางตาราง bootstrap ของชุดองค์ประกอบ JS [บทสุดท้าย]

สิ่งประดิษฐ์ส่วนประกอบตารางตาราง bootstrap ของชุดองค์ประกอบ JS [2. การสั่งซื้อโต๊ะแม่-ลูกและคอลัมน์แถว]

ตาราง Bootstrap มีข้อมูลที่มีน้ำหนักเบาและเต็มไปด้วยคุณสมบัติที่แสดงในรูปแบบตารางรองรับการเลือกเดี่ยวช่องทำเครื่องหมายการเรียงลำดับการเพจ, คอลัมน์แสดงผล/ซ่อน, ตารางการเลื่อนชื่อคงที่, การออกแบบที่ตอบสนอง, การโหลด Ajax การโหลดข้อมูล JSON

1. ผลการแสดงผล

1. รูปแบบตารางแถว

ตัวอย่างเช่นเรามีข้อกำหนดในการแสดงหน้าคำสั่งซื้อและคำสั่งซื้อที่มีสถานะต่างกันแสดงสีที่แตกต่างกันดังแสดงในรูป:

2. แก้ไขภายในบรรทัดแบบฟอร์ม

ในบทความแรกเพื่อนของอุทยานถามบล็อกเกอร์ว่าเขาสามารถสนับสนุนผลของการแก้ไขภายในอุตสาหกรรมและคำตอบคือใช่ มาดูเอฟเฟกต์กันเถอะ:

ก่อนแก้ไข

คลิกที่ข้อมูลเซลล์

หลังจากแก้ไขเสร็จสมบูรณ์

3. การรวมกันของแถวและคอลัมน์ของตาราง

บล็อกเกอร์คิดว่าเป็นเรื่องธรรมดามากสำหรับการควบรวมอันดับและอันดับโดยเฉพาะอย่างยิ่งเมื่อทำรายงานหน้า มาดูเอฟเฟกต์กันเถอะ:

หน้าปัจจุบันไม่สมบูรณ์คลิกเพื่อเข้าและดู แล้วล่ะ? เอฟเฟกต์ค่อนข้างดี

4. การส่งออกข้อมูลตาราง

เกี่ยวกับการส่งออกข้อมูลตารางตาราง bootstrap รองรับการส่งออกของสามโหมด: พื้นฐาน, ทั้งหมด, เลือก นั่นคือการส่งออกข้อมูลของหน้าปัจจุบันการส่งออกข้อมูลทั้งหมดและการส่งออกข้อมูลที่เลือก นอกจากนี้ยังรองรับการส่งออกไฟล์ประเภทต่าง ๆ เช่น Common Excel, XML, JSON และรูปแบบอื่น ๆ

ส่งออกหน้าปัจจุบันไปยัง Excel

ส่งออกข้อมูลทั้งหมดในตาราง

ส่งออกข้อมูลแถวที่เลือก

สำหรับการส่งออกไฟล์ประเภทอื่น ๆ มันจะเหมือนกับ Excel ดังนั้นเอฟเฟกต์จะไม่ปรากฏขึ้น

2. ตัวอย่างรหัสสไตล์ตารางแถว

เกี่ยวกับการตั้งค่าสไตล์ของแถวตารางฟังก์ชั่นอื่น ๆ เป็นฟังก์ชั่นพื้นฐานที่สุด ทำไมต้องใส่ไว้ในบทความที่สาม? เป็นเพราะบล็อกเกอร์คิดว่าฟังก์ชั่นนี้อาจใช้ทุกที่ แน่นอนว่าผลกระทบนั้นไม่ยาก นอกจากนี้คุณยังสามารถบรรลุสีพื้นหลังของ TR โดยใช้ jQuery แต่บล็อกเกอร์คิดว่าเนื่องจากตาราง bootstrap เป็นกลไกในการตั้งค่าสีพื้นหลังของแถวทำไมไม่ใช้ API ในตัว มาดูวิธีการใช้งาน

เมื่อเริ่มต้นตาราง

 // เริ่มต้นตาราง $ ('#tb_order'). bootstraptable ({url: '/tablestyle/getOrder', // คำขอ url (*) วิธี: 'get', // วิธีการร้องขอ (*) // แท็กเครื่องมือ: '#toolbar', // ในการตั้งค่าคุณสมบัตินี้ (*) การแบ่งหน้า: จริง, // ไม่ว่าจะแสดงเพจ (*) สามารถจัดเรียงได้: เท็จ, // ไม่ว่าจะเปิดใช้งาน SortOrder: "ASC", // วิธีการเรียงลำดับ queryParams: otableInit.QueryParams, // parameters (pagination pagination Page to Load, หน้าแรกเริ่มต้นหน้า: 10, // จำนวนแถวบันทึกต่อหน้า (*) Pagelist: [10, 25, 50, 100], // จำนวนแถวต่อหน้าเพื่อเลือก (*) การค้นหา: จริง // การค้นหาตารางจะแสดงความจริงหรือไม่ จริง // ปุ่มรีเฟรชแสดงขั้นต่ำคอลัมน์: 2, // จำนวนคอลัมน์ต่ำสุดที่อนุญาตให้คลิกที่: จริง, // ที่จะเปิดใช้งานคลิกเลือกความสูงของแถว: 500, // ความสูงของสาย, หากไม่ได้ตั้งค่าแอตทริบิวต์ความสูง ปุ่มสลับสำหรับมุมมองโดยละเอียดและรายการมุมมอง CardView: FALSE, // การดูรายละเอียดรายละเอียดรายละเอียด: เท็จ, // ทำ table-child table rowstyle: ฟังก์ชั่น (แถว, ดัชนี) {// มี 5 ค่าที่นี่แสดงสีใน 5 ['active', 'success', 'ข้อมูล', 'คำเตือน' {strclass = 'ความสำเร็จ'; // นอกจากนี้ยังมีการใช้งาน} อื่นถ้า (row.order_status == "ลบ") {strclass = 'อันตราย';} {return {};} return {classes: strclass}}, คอลัมน์: 'order_type', ชื่อเรื่อง: 'ประเภทคำสั่ง'}, {ฟิลด์: 'order_status', ชื่อเรื่อง: 'สถานะคำสั่ง'}, {ฟิลด์: 'หมายเหตุ', ชื่อเรื่อง: 'หมายเหตุ'},]});

ในความเป็นจริงโฟกัสอยู่ที่พารามิเตอร์นี้:

    Rowstyle: ฟังก์ชั่น (แถว, ดัชนี) {// มี 5 ค่าที่นี่แสดงถึงสีใน 5 ['active', 'ความสำเร็จ', 'ข้อมูล', 'คำเตือน', 'อันตราย']; var strclass = ""; ถ้า (row.order_status == " = 'danger';} else {return {};} return {classes: strclass}},

ตาราง bootstrap รองรับสีพื้นหลังแถวของตารางใน 5 คือ 'active', 'ความสำเร็จ', 'ข้อมูล', 'คำเตือน', 'อันตราย' สำหรับแต่ละสีพื้นหลังที่สอดคล้องกันคุณสามารถดูได้โดยเรียกใช้รหัส เกี่ยวกับค่าผลตอบแทนของวิธีนี้บล็อกเกอร์ยังศึกษามันเป็นเวลานานเมื่อเขาใช้มันเป็นครั้งแรก ตามกฎของตาราง bootstrap จำเป็นต้องส่งคืนประเภทวัตถุ JSON-format เช่น: {คลาส: strclass}

3. ตัวอย่างการแก้ไขรหัสในบรรทัดแบบฟอร์ม

เกี่ยวกับการแก้ไขตารางไฟล์ JS หลายไฟล์ที่ต้องขยายออกไปโดยใช้ตาราง bootstrap

1. แนะนำไฟล์ JS เพิ่มเติม

 <link rel = "stylesheet" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"><script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script><script src =" ~/content/bootstrap-table/ส่วนขยาย

2. เมื่อกำหนดตารางในหน้า CSHTML ให้เพิ่มสองแอตทริบิวต์

 <table id = "tb_departments"> <thead> <tr> <th data-field = "name" data-editable = "true"> ชื่อแผนก </th> <th data-field = "ParentName"> แผนกที่เหนือกว่า </th> <th data-field = "ระดับ" data-editable = "true"> descriptor </th> </tr> </tead> </table>

หากมีการเริ่มต้นใน JS วิธีการเขียนมีดังนี้:

 {ฟิลด์: "ชื่อ", ชื่อเรื่อง: "ชื่อ", แก้ไขได้: จริง}

3. ลงทะเบียนแก้ไขและบันทึกเหตุการณ์เมื่อเริ่มต้นตารางใน JS

 $ ('#tb_departments'). bootstarpable ({url: '/editable/getDepartment', // คำขอ url (*) วิธี: 'get', // วิธีการร้องขอ (*) แถบเครื่องมือ: '#toolbar', // ในการตั้งค่าคุณสมบัตินี้ (*) การแบ่งแยก: จริง, // ไม่ว่าจะแสดงการเพจ (*) ที่สามารถจัดเรียงได้: เท็จ, // ไม่ว่าจะเปิดใช้งาน sortorder: "asc", // วิธีการเรียงลำดับ queryparams: otableinit.queryparams, // parameters (*) sidepagination: "เซิร์ฟเวอร์" หน้าแรกเริ่มต้นหน้า: 10, // จำนวนของระเบียนต่อหน้า (*) oneDitablesave: ฟังก์ชั่น (ฟิลด์, แถว, oldValue, $ el) {$ .ajax ({ประเภท: "โพสต์", url: "/แก้ไข/แก้ไข", ข้อมูล: {strjson: json.stringify (แถว) สำเร็จ ");}}, ข้อผิดพลาด: function () {การแจ้งเตือน (" ข้อผิดพลาด ");}, เสร็จสมบูรณ์: ฟังก์ชัน () {}});}});

ประเด็นสำคัญคือดูการจัดการเหตุการณ์นี้

 OneDitablesave: ฟังก์ชั่น (ฟิลด์, แถว, oldValue, $ el) {$ .ajax ({ประเภท: "โพสต์", url: "/แก้ไข/แก้ไข", ข้อมูล: {strjson: json.stringify (แถว)}, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล, สถานะ) {Alert ("ข้อผิดพลาด");}, เสร็จสมบูรณ์: function () {}});}

วิธีการที่สอดคล้องกันจำเป็นต้องจัดการตรรกะที่บันทึกไว้ด้วยตัวเอง ฟิลด์พารามิเตอร์ทั้งสี่, แถว, oldValue และ $ el สอดคล้องกับชื่อของคอลัมน์ปัจจุบันวัตถุข้อมูลของแถวปัจจุบันค่าก่อนการอัปเดตและวัตถุ jQuery ของเซลล์ปัจจุบันที่แก้ไข

4. ตัวอย่างของรหัสการรวมแถวและคอลัมน์

ฟังก์ชั่นการรวมคอลัมน์แถวของตารางไม่จำเป็นต้องมีการอ้างอิงถึงไฟล์ JS อื่น ๆ ต้องใช้ Table Colspan และ Rowspan ในหน้า CSHTML เท่านั้นเพื่อให้ได้มัน

1. หน้า cshtml

 <table id = "tb_report"> <thead> <tr> <th colspan = "4" data-valign = "กลาง" data-align = "center"> q1 </th> <th colspan = "4" data-valign = "กลาง" data-align = "center"> ไตรมาส </th> <th data-field = "TotalCount" Rowspan = "2" data-valign = "กลาง" data-allign = "center"> สรุปประจำปี </th> </tr> <tr> <th data-field = "Jancount" data-align = "center" data-align = "center"> febcount </th> <th data-field = "Marcount" data-align = "center"> มีนาคม </th> <th data-field = "Firstquarter" data-align = "center"> firstquarter </th> <th datata-field = "Aprcount data-align = "center"> อาจ </th> <th data-field = "JunCount" data-align = "center"> Jun </th> <th data-field = "Secondquarter" data-allign = "center"> ไตรมาส </th> <th data-field = "julCount data-field = "sepcount" data-align = "center"> ก.ย. </th> <th data-field = "Thirdquarter" data-allign = "center"> ไตรมาสที่ 3 </th> <th data-field = "octCount" data-align = "center"> ตุลาคม </th> data-align = "center"> ธันวาคม </th> <th data-field = "forthquarter" data-align = "center"> ไตรมาสที่ 4 </th> </tr> </thead> </table>

2. ไม่มีการเริ่มต้น JS พิเศษ

 $ ('#tb_report'). bootstraptable ({url: '/groupcolumns/getReport', // คำขอ URL (*) วิธี: 'รับ', // วิธีการร้องขอ (*) แถบเครื่องมือ: '#ToolBar' จำเป็นต้องตั้งค่าคุณสมบัตินี้ (*) การแบ่งแยก: จริง, // ไม่ว่าจะเป็นการแสดง pagination (*) sortorder: "asc", // วิธีการเรียงลำดับ queryparams: otableinit.queryparams, // พารามิเตอร์ผ่าน (*) sidepagination: "เซิร์ฟเวอร์" // จำนวนบรรทัดบันทึกต่อหน้า (*) ผู้เขียน Pagelist: [10, 25, 50, 100], // จำนวนแถวต่อหน้าเพื่อเลือก (*)});

แล้วมันง่ายไหม? แน่นอนว่าบางคนบอกว่าคุณสามารถใช้แอตทริบิวต์ตารางเพื่อตั้งค่า URL การแบ่งหน้าและข้อมูลอื่น ๆ โดยไม่ต้องใช้การเริ่มต้น JS โดยตรงใน CSHTML แน่นอนถ้าเราดู API ของมันเราจะพบว่าแต่ละแอตทริบิวต์มันเริ่มต้นสอดคล้องกับแอตทริบิวต์ของตาราง พิมพ์

หากแบบฟอร์มของคุณไม่มีกิจกรรมพิเศษที่จะจัดการไม่มีปัญหาเลย

5. ตัวอย่างรหัสการส่งออกข้อมูลตาราง

ฟังก์ชั่นการส่งออกของข้อมูลตารางยังต้องการการสนับสนุน JS เพิ่มเติม

1. แนะนำไฟล์ JS เพิ่มเติม

 <script src = "~/content/bootstrap-table/extensions/export/bootstrap-table-export.js"> </script> <script src = "// rawgit.com/hhurz/tableexport.jquery.plugin/master/tableexport.js"

2. เมื่อ JS เริ่มต้น

 $ ('#tb_departments'). bootstarpable ({url: '/export/getDepartment', // คำขอ url (*) วิธี: 'get', // วิธีการร้องขอ (*) แถบเครื่องมือ: '#toolbar', // ในการตั้งค่าคุณสมบัตินี้ (*) การแบ่งหน้า: จริง, // ไม่ว่าจะแสดงเพจ (*) สามารถจัดเรียงได้: เท็จ, // ไม่ว่าจะเปิดใช้งาน SortOrder: "ASC", // วิธีการเรียงลำดับ queryParams: otableInit.QueryParams, // การผ่านพารามิเตอร์ โหลด, หน้าแรกเริ่มต้นหน้า: 10, // จำนวนบรรทัดบันทึกต่อหน้า (*) ผู้เขียน Pagelist: [10, 25, 50, 100], // จำนวนแถวต่อหน้าเพื่อเลือก (*) clicktoselect: จริง, showexport: จริง, // คือการส่งออก: 'ชื่อ', ชื่อเรื่อง: 'ชื่อแผนก'}, {ฟิลด์: 'parentName', ชื่อเรื่อง: 'แผนกที่เหนือกว่า'}, {ฟิลด์: 'ระดับ', ชื่อเรื่อง: 'ระดับแผนก'}, {ฟิลด์: 'desc', ชื่อ: 'คำอธิบาย'},]});

มาดูประเด็นสำคัญ: คุณลักษณะทั้งสองนี้

 ShowExport: จริง // ว่าจะแสดง ExportDatatype: "BASIC", // BASIC ',' All ',' SELECTED'.SHOWEXPORT หมายความว่าจะแสดงปุ่มส่งออก, ExportDatatype หมายความว่าโหมดที่ส่งออกเป็นหน้าปัจจุบันข้อมูลทั้งหมดหรือข้อมูลที่เลือก

6. สรุป

ข้างต้นคือผลกระทบของฟังก์ชั่นและรหัสง่าย ๆ ในการใช้งาน บล็อกเกอร์พบว่ามีปัญหาหลายประการที่ต้องแก้ไข

1. ฟังก์ชั่นของการแก้ไขแบบอินไลน์คือการส่งแต่ละเซลล์ไปยังพื้นหลังซึ่งจะทำให้เกิดการดำเนินการบ่อยครั้งของฐานข้อมูลและรู้สึกไม่เหมาะสม ฉันไม่รู้ว่ามีวิธีที่ดีกว่าในการส่งแต่ละบรรทัดไปยังพื้นหลังหรือไม่

2. แม้ว่าฟังก์ชั่นการส่งออกจะมีประโยชน์มาก แต่น่าเสียดายที่เบราว์เซอร์ IE ไม่รองรับ บล็อกเกอร์ได้ลองตัวอย่างบนเว็บไซต์อย่างเป็นทางการแล้วและดูเหมือนว่า IE ไม่สามารถส่งออกได้ ที่จะตรวจสอบ

ข้างต้นเป็นเนื้อหาที่เกี่ยวข้องของส่วนประกอบตาราง bootstrap table component [บทสุดท้าย] ของชุดองค์ประกอบ JS ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!