ก่อนอื่นให้ดูที่เอฟเฟกต์ของตาราง bootstrap:
ตารางใช้เพื่อแสดงข้อมูลในฐานข้อมูล ข้อมูลถูกโหลดจากเซิร์ฟเวอร์ผ่าน AJAX ในขณะเดียวกันฟังก์ชั่นการเพจก็ถูกนำไปใช้โดยเซิร์ฟเวอร์เพื่อหลีกเลี่ยงการเพจไคลเอ็นต์และประสบการณ์ผู้ใช้ที่เกิดจากการโหลดข้อมูลจำนวนมากไม่ดี นอกจากนี้คุณยังสามารถตั้งค่าเวลาเริ่มต้นและสิ้นสุดของการสอบถามข้อมูลเพื่อสอบถามข้อมูลในช่วงเวลาที่กำหนด ฟังก์ชั่นการแก้ไขออนไลน์ถูกนำไปใช้โดยขยายตาราง bootstrap และใช้ X-Editable
มีสองวิธีในการใช้ตาราง bootstrap:
1. ตั้งค่าแอตทริบิวต์ข้อมูลสำหรับตารางธรรมดา
2. เปิดใช้งานปลั๊กอินตาราง bootstrap ผ่าน JavaScript
วิธีแรกนั้นสะดวกมาก แต่ฉันชอบวิธีที่สองซึ่งสามารถแยก JS และ HTML และรหัส JS สามารถนำกลับมาใช้ใหม่ได้
เอกสารของตาราง bootstrap ค่อนข้างละเอียด แต่มีเนื้อหาเฉพาะบางอย่างที่ต้องพบในรหัสตัวอย่าง ฯลฯ
โพสต์แรกรหัสการใช้งานสำหรับด้านหน้าและแบ็กเอนด์จากนั้นแนะนำรายละเอียด
ไฟล์ทรัพยากรที่ต้องการโดยแผนกต้อนรับส่วนใหญ่รวมถึงสไตล์ที่เกี่ยวข้องกับ bootstrap3, JS, CSS ที่เกี่ยวข้องกับตาราง bootstrap, JS และรูปแบบ Bootstrap3 ที่ใช้ X-Editable-based และ JS: JS:
<link rel = "stylesheet" href = "../ สินทรัพย์/bootstrap/css/bootstrap.min.css"> <link rel = "stylesheet" href = "../ สินทรัพย์/bootstrap-table/src/bootstrap-table.css" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.cs"><script src =" ../ สินทรัพย์/jQuery.min.js "> </script> <สคริปต์ src = "../ สินทรัพย์/bootstrap/js/bootstrap.min.js"> </script> <script src = "../ assets/bootstrap-table/src/bootstrap-table.js"> </script> <script src = "../ ทรัพย์สิน/bootstrap-table/src/ส่วนขยาย/แก้ไข/bootstrap-table.js"> </script> <script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable
ความต้องการรหัส HTML เท่านั้น
<table id = "querylist"> </table>
รหัส JS, รหัสที่เกี่ยวข้องกับการสืบค้นเวลาหลังจากตั้งเวลาการสืบค้นอย่างถูกต้องข้อมูลจะถูกรีเฟรชผ่านวิธีการบูตสแตรปตาราง:
$ ('#submentgetData') คลิก (function () {$ ('#msg'). html (''); var begintime_ = $ ('#begintime'). val (); var endtime_ = $ ('#endtime') val (); if (date.parse (endtime _)-date.parse (begintime_) <0) {err = 'ข้อผิดพลาดการตั้งค่าเวลาสอบถาม'; $ ('#querylist'). bootstary ('Refresh');JS ที่เกี่ยวข้องกับตาราง:
$ ('#querylist'). bootstraptable ({คอลัมน์: [{ฟิลด์: 'metermeasurehistoryid', ชื่อเรื่อง: 'id', cortable: true}, {ฟิลด์: 'ค่า', ชื่อ: 'ค่า', แก้ไขได้: {ประเภท: }, {ฟิลด์: 'timestamp', title: 'time', แก้ไขได้: {type: 'text', การตรวจสอบ: ฟังก์ชัน (ค่า) {ถ้า ($. trim (value) == '') {return 'เวลาไม่สามารถว่างเปล่า'}}}}}}}}}}}}}}}} Formatter: ฟังก์ชั่น (ค่า, row, {var s = '<a class = "save" href = "javascript: void (0)"> บันทึก </a>'; 'metermeasurehistoryid', sortorder: 'desc', pagination: true, sidepagination: 'เซิร์ฟเวอร์', pagenumber: 1, หน้า: 5, pagelist: [5, 10, 20], queryparams: function (params) {return {meterid: $ ('#meterid') Begintime: $ ('#begintime'). val (), endtime: $ ('#endtime'). val ()}}, url: '/analyze/getjsonhistorydatas' '/analyze/editMeterMeasureHistoryData', ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {แจ้งเตือน ('แก้ไขสำเร็จ');}}); }, 'คลิก. remove': ฟังก์ชั่น (e, ค่า, แถว, ดัชนี) {$ .ajax ({ประเภท: "โพสต์", ข้อมูล: แถว, url: '/วิเคราะห์/deleteMeterMeasureHistoryData', ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) ค่า: [row.metermeasurehistoryid]});}}); -พารามิเตอร์คอลัมน์ตั้งค่าคอลัมน์ทั้งหมดของตารางและพารามิเตอร์ของแต่ละคอลัมน์ ฟิลด์สอดคล้องกับค่าคีย์ของข้อมูลที่ส่งคืนโดย JSON และพารามิเตอร์คอลัมน์ในตาราง bootstrap; ชื่อคอลัมน์แสดงตามชื่อเรื่อง การตั้งค่าที่สามารถเรียงลำดับได้จะถูกจัดเรียงตามคอลัมน์ปัจจุบัน Formatter ตั้งค่ารูปแบบของแต่ละเซลล์ในคอลัมน์ การตั้งค่าที่แก้ไขได้คือวิธีการแก้ไขของเซลล์คอลัมน์ปัจจุบันและสามารถตั้งค่าวิธีการตรวจสอบการตรวจสอบได้
ดังนั้นตารางจริงจึงถูกตั้งค่าเป็นสี่คอลัมน์เรียงลำดับตามคอลัมน์แรกคอลัมน์ 2 และ 3 สามารถแก้ไขได้ประเภทถูกตั้งค่าเป็นข้อความและสามารถใช้ประเภทอื่น ๆ ได้ตามต้องการ ข้อมูลการตรวจสอบคอลัมน์ที่สองไม่สามารถว่างเปล่าและค่าอินพุตการตรวจสอบคอลัมน์ที่สามคือเวลา เนื้อหาของคอลัมน์ 1, 2 และ 3 มาจากข้อมูล JSON ที่ส่งคืนโดยเซิร์ฟเวอร์ คอลัมน์ที่สี่คือการดำเนินการข้อมูลในแถวปัจจุบันและเหตุการณ์การฟังจะถูกเพิ่มเข้ามาและเชื่อมโยงกับหน้าต่าง
SortName ถูกตั้งค่าเป็นค่าฟิลด์ในคอลัมน์ 1;
SortOrder ถูกตั้งค่าเป็นลำดับย้อนกลับ
การปนเปื้อนเป็นจริงสำหรับการปนเปื้อน;
SidePagination หมายถึงการแบ่งแยกเซิร์ฟเวอร์;
Pagenumber ระบุหน้าเริ่มต้นเริ่มต้น;
Pagesize แสดงจำนวนข้อมูลที่แสดงต่อหน้า
Pagelist แสดงจำนวนข้อมูลเพิ่มเติมของข้อมูลที่แสดงต่อหน้า
QueryParams หมายความว่าแต่ละพารามิเตอร์ที่ส่งไปยังเซิร์ฟเวอร์สามารถเพิ่มลงในพารามิเตอร์ที่คุณต้องการ
URL คือที่อยู่คำขอของข้อมูล
ตรวจสอบ bootstrap-table.js และคุณสามารถดูพารามิเตอร์พารามิเตอร์เริ่มต้น:
Bootstraptable.prototype.initserver = ฟังก์ชั่น (เงียบ, การสืบค้น) {var that = this, data = {}, params = {pagesize: this.options.pagesize === this.options.formatallrows ()? this.options.totalrows: this.options.pagesize, pagenumber: this.options.pagenumber, searchtext: this.searchtext, sortname: this.options.sortname, sortorder: this.options.sortorder}; if (! this.options.url) {return; } if (this.options.queryparamstype === 'limit') {params = {search: params.searchtext, sort: params.sortname, order: params.sortorder}; if (this.options.pagination) {params.limit = this.options.pagesize === this.options.formatallrows ()? this.options.totalrows: this.options.pagesize; params.offset = this.options.pagesize === this.options.formatallrows ()?: this.options.pagesize * (this.options.pagenumber - 1); -พื้นหลังเซิร์ฟเวอร์ใช้ฟังก์ชั่นสามฟังก์ชั่นหนึ่งคือการโหลดตามข้อมูลรวมถึงการแก้ไขและลบข้อมูล
Public ActionResult getJsonHistoryDatas () {var displayStart = int.parse (คำขอ ["Offset"]); var displayLength = int.parse (คำขอ ["pagesize"]); var meterid = int.parse (คำขอ ["meterid"]); คำสั่งซื้อ var = คำขอ ["sortorder"]; var historyDatas = db.meTermeasurehistories โดยที่ (p => p.metermeasure.meterid == meterid) orderbyDescending (p => p.timestamp) ข้าม (DisplayStart) Take (displayLength) .tolist (); // แสดงข้อมูล displayLength ล่าสุดถ้า ("asc" == order) {historydatas = db.metermeasurehistories โดยที่ (p => p.metermeasure.meterid == meterid) orderby (p => p.timestamp) ข้าม (DisplayStart) Take (DisplayLength) .tolist (); // แสดงข้อมูล DisplayLength ที่เร็วที่สุด} int historyDatatotal = db.metermeasurehistories โดยที่ (p => p.metermeasure.meterid == meterid) .count (); // จำนวนข้อมูลทั้งหมด // การกรองเวลาถ้า (! string.isnullorempty (คำขอ ["Begintime"])) {DateTime Begintime = DateTime.parse dateTime endtime = dateTime.parse (คำขอ ["endtime"]); HistoryDatas = db.meTermeasurehistories โดยที่ (p => p.metermeasure.meterid == meterid) โดยที่ (p => p.timestamp> Begintime && p.timestamp <endtime) orderbyDescending (p => p.timestamp) ข้าม (DisplayStart) Take (displayLength) .tolist (); // แสดงข้อมูลแถบความยาว displaylength ล่าสุดถ้า ("asc" == order) {historyDatas = db.metermeasurehistories โดยที่ (p => p.metermeasure.meterid == meterid) โดยที่ (p => p.timestamp> Begintime && p.timestamp <endtime) orderby (p => p.timestamp) ข้าม (DisplayStart) Take (DisplayLength) .tolist (); // แสดงข้อมูล DisplayLength ที่เร็วที่สุด} historyDatatotal = db.metermeasurehistories โดยที่ (p => p.metermeasure.meterid == meterid) โดยที่ (p => p.timestamp> Begintime && p.timestamp <Endtime) .count (); // จำนวนข้อมูลทั้งหมด} รายการ <metermeasurehistorydataviewiewiewmodels> listmetermeasurehistories = รายการใหม่ foreach (รายการ var ใน historydatas) {listmetermeasurehistories.add (metermeasurehistorydataviewmodels ใหม่ {metermeasurehistoryid = item.metermeasurehistoryid, value = item.value, timestamp = item.timestamp.tostring ()}); } string JSondatatable = jsonConvert.serializeObject (ใหม่ {total = historyDatatotal, rows = listmetermeasurehistories}); ส่งคืนเนื้อหา (JSondatatable);}มันใช้การเพิกถอนและสืบค้นข้อมูลและส่งคืนข้อมูล JSON ข้อมูล JSON ที่ส่งคืนรวมถึงวัตถุสองชิ้น: ทั้งหมดและแถว ทั้งหมดแสดงถึงจำนวนข้อมูลทั้งหมดและแถวแสดงถึงข้อมูลที่จะแสดง MeterMeasureHistoryDateView มีดังนี้ซึ่งสอดคล้องกับค่าฟิลด์ในตาราง:
ชั้นเรียนสาธารณะ metermeasurehistorydataviewmodels {public int metermeasurehistoryid {get; ชุด; } ค่าสองครั้งสาธารณะ {get; ชุด; } timestamp สตริงสาธารณะ {get; ชุด; -ฟังก์ชั่นการปรับเปลี่ยนข้อมูล:
[httppost] สาธารณะ jsonResult editMeterMeasureHistoryData () {var meterestehistoryid = int.parse (คำขอ ["metermeasurehistoryid"]); var meterestehistoryValue = double.parse (คำขอ ["value"]); var meterestehistorytime = dateTime.parse (คำขอ ["timestamp"]); var meterestehistoryindb = db.metermeasurehistory.find (meterestehistoryid); Meteresteasurehistoryindb.value = MeteresteasurehistoryValue; Meteresteasurehistoryindb.timestamp = meteresteasurehistorytime; db.savechanges (); VAR เปลี่ยน DATA = ใหม่ metermeasurehistoryDataviewModels {metermeasurehistoryid = meteresteasurehistoryindb.metermeasurehistoryid, ค่า = meteresteasurehistoryindb.value, timestamp = meteresteasurehistoryindb.timestamp.tostring ()}; JsonResult JS = new JsonResult (); js.data = json (เปลี่ยนดาตา); กลับ js;}ฟังก์ชั่นการลบข้อมูล:
[httppost] สาธารณะ jsonresult deletemetermeasurehistorydata () {var meterestehistoryid = int.parse (คำขอ ["metermeasurehistoryid"]); db.metermeasurehistory.remove (db.metermeasurehistory.find (meterestehistoryid)); db.savechanges (); var deletedData = ใหม่ metermeasurehistorydataviewModels {metermeasurehistoryid = meteresteasurehistoryid, ค่า = 0, timestamp = null}; JsonResult JS = new JsonResult (); js.data = deletedData; กลับ js;}หลังจากลบเซิร์ฟเวอร์เบื้องหน้าจะลบแถวข้อมูลที่ระบุผ่านวิธีการบูตสแตรปตาราง
ฉันใช้สิ่งเหล่านี้ในขณะนี้ เพื่อสรุปกระบวนการเรียนรู้ฉันกำลังค้นหาเอกสารอย่างเป็นทางการตัวอย่างดูซอร์สโค้ดและเรียนรู้ที่จะใช้เครื่องมือนักพัฒนา Chrome เพื่อดูแหล่งที่มาและเครือข่าย
ข้างต้นเป็นบทสรุปของการแบ่งหน้าเซิร์ฟเวอร์เซิร์ฟเวอร์ bootstrap และแอปพลิเคชันการแก้ไขออนไลน์ที่แนะนำโดยโปรแกรมแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!