Mari pertama -tama lihat efek dari tabel bootstrap:
Tabel digunakan untuk menampilkan data dalam database. Data dimuat dari server melalui AJAX. Pada saat yang sama, fungsi paging diimplementasikan oleh server untuk menghindari paging klien dan pengalaman pengguna yang disebabkan oleh pemuatan yang buruk dari sejumlah besar data. Anda juga dapat mengatur waktu mulai dan akhir dari permintaan data untuk meminta data untuk rentang waktu tertentu. Fungsi pengeditan online diimplementasikan dengan memperluas tabel bootstrap dan menggunakan X-diedit.
Ada dua cara untuk menggunakan tabel bootstrap:
1. Atur atribut data untuk tabel biasa;
2. Aktifkan plug-in tabel bootstrap melalui JavaScript.
Metode pertama sangat nyaman, tetapi saya lebih suka metode kedua, yang dapat memisahkan JS dan HTML, dan kode JS dapat digunakan kembali.
Dokumentasi tabel bootstrap relatif rinci, tetapi ada beberapa konten spesifik yang perlu ditemukan dalam kode sampel, dll.
Pertama memposting kode implementasi untuk bagian depan dan backend, dan kemudian memperkenalkannya secara rinci.
File sumber daya yang diperlukan oleh meja depan terutama mencakup gaya yang berhubungan dengan bootstrap3, JS, CSS terkait meja bootstrap, JS, dan gaya berbasis bootstrap3 berbasis X-editied dan JS:
<tautan rel = "stylesheet" href = "../ aset/bootstrap/css/bootstrap.min.css"> <tautan rel = "stylesheet" href = "../ aset/bootstrap/src/bootstrap-table. href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-Editable/css/bootstrap-Edited.css"> <script src =" ../ aset/jQuery.min.js "> </skrip> <skrip src = "../ aset/bootstrap/js/bootstrap.min.js"> </script> <script src = "../ aset/bootstrap-table/src/bootstrap-able.js"> </skrip> <script src = "../ aset/bootstrap-table/src/extensions/editing/bootstrap-table.js"> </script> <script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-Ededitable/js/bootstrap-deditable.jsited.jsiting.jsiting.jsiting.jsited"> editied
Kode HTML hanya perlu
<Table ID = "QueryList"> </able>
Kode JS, kode terkait kueri waktu, setelah waktu kueri diatur dengan benar, data disegarkan melalui metode tabel bootstrap:
$ ('#submitgetData'). Klik (function () {$ ('#msg'). html (''); var beginTime_ = $ ('#beginTime'). val (); var endtime_ = $ ('endtime'). Val (); var err = ''; if endtime_ = $ ('endtime'). Val (); var err = ''; if endTime_ == '#endtime'). Val (); var err = ''; iferime_ == '' if (date.parse (endtime _)-date.parse (begintime_) <0) {err = 'kesalahan pengaturan waktu query'; $ ('#QueryList'). Bootstraptable ('Refresh');JS Terkait Tabel:
$('#querylist').bootstrapTable({ columns: [{ field: 'MeterMeasureHistoryID', title: 'ID', sortable: true }, { field: 'Value', title: 'value', editable: { type: 'text', validate: function(value) { if($.trim(value) == '') { return 'Measured value cannot be empty'; } } } } }, {field: 'timestamp', title: 'time', edited: {type: 'text', validate: function (value) {if ($. trim (value) == ') {return' tidak dapat kosong '; Formatter: Nilai, baris, indeks) {var s = '<a class = "save" href = "javascript: void (0)"> simpan </a>'; 'MetermeasheHistoryId', SortOrder: 'Desc', Pagination: True, Sidepagination: 'Server', Pagenumber: 1, PageSize: 5, Pagelist: [5, 10, 20], QueryParams: Function, Params) {return {meterid: $ ('#meterid'). begintime: $ ('#begintime'). val (), endtime: $ ('#endtime'). val ()}}, url: '/analyze/getjsonhistorydatas'});window.operateEvents = {' klik .save ': function (e, value, row, index) {$ .aJax '/Analisis/EditMetermeReHistoryData', Success: Function (data) {alert ('Modified berhasil'); }, 'klik .remove': function (e, value, row, index) {$ .Ajax ({type: "post", data: row, url: '/analisis/deletemetermeRehistoryData', Success: function (data) {ware ('hapus dengan sukses'); $ ('#querylist'). [row.metermearhistoryid]});}}); }};Parameter kolom mengatur semua kolom tabel dan parameter setiap kolom. Bidang sesuai dengan nilai kunci data yang dikembalikan oleh JSON dan parameter kolom dalam tabel bootstrap; Nama kolom ditampilkan sesuai dengan judul; Pengaturan yang dapat diurutkan diurutkan sesuai dengan kolom saat ini; Formatter menetapkan format masing -masing sel di kolom; Pengaturan yang dapat diedit adalah metode pengeditan sel kolom saat ini, dan metode verifikasi validasi juga dapat diatur.
Oleh karena itu, tabel aktual diatur ke empat kolom, diurutkan sesuai dengan kolom pertama, kolom 2 dan 3 dapat diedit, tipe diatur ke teks, dan jenis lain dapat digunakan sesuai kebutuhan. Data verifikasi kolom kedua tidak dapat kosong, dan nilai input verifikasi kolom ketiga adalah waktu; Isi kolom 1, 2, dan 3 berasal dari data JSON yang dikembalikan oleh server; Kolom keempat adalah operasi data pada baris saat ini, dan acara mendengarkan OperateEvents ditambahkan, dan terikat ke jendela.
Sortname diatur ke nilai bidang di kolom 1;
SortOrder diatur ke urutan terbalik;
Pagination benar untuk pagination;
Sidepagination mewakili pagination server;
Pagenumber menunjukkan halaman start default;
PageSize mewakili jumlah data yang ditampilkan per halaman;
Pagelist mewakili jumlah data opsional yang ditampilkan per halaman;
QueryParams berarti bahwa setiap parameter yang dikirim ke server dapat ditambahkan ke parameter yang Anda butuhkan;
URL adalah alamat permintaan data.
Periksa bootstrap-table.js dan Anda dapat melihat parameter params default:
Bootstraptable.prototype.Initserver = function (silent, query) {var that = this, data = {}, params = {pagesize: this.options.pagesize === this.options.FormatLrows ()? 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 = {pencarian: 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.FormatLrows () ?: this.options.pagesize * (this.options.pagenumber - 1); }}Latar belakang server mengimplementasikan tiga fungsi, satu adalah memuat berdasarkan data, serta memodifikasi dan menghapus data.
public actionResult getjsonhistoryDatas () {var displayStart = int.parse (permintaan ["offset"]); var displayLength = int.parse (permintaan ["halaman"]); var meterId = int.parse (permintaan ["meterid"]); var order = request ["sortOrder"]; var historyDatas = db.metermeasheHistories. Di mana (p => p.metermeasure.meterid == meterid). OrderByDescending (p => p.timestamp). Lewati (DisplayStart). Ambil (DisplayLength) .tolist (); // Tampilkan DisplayLength Data IF ("ASC" == order) {historyDatas = db.metermeureHistories. Di mana (p => p.metermeasure.meterid == meterid). Orderby (p => p.timestamp). Lewati (DisplayStart). Ambil (DisplayLength) .TOLIST (); // Tampilkan DisplayLength Data} int historyDataTotal = DB.METERMERMEASHEHISTORIES. Di mana (p => p.metermeasure.meterid == meterid) .count (); // Jumlah total data // penyaringan waktu jika (! String.isnullorEmpty (permintaan ["begintime"])) {datetime begintime = dateTime.parse (permintaan ["begintime"]); Datetime endtime = datetime.parse (permintaan ["endtime"]); HistoryDatas = db.metermeasheHistories. Di mana (p => p.metermeasure.meterid == meterid). Di mana (p => p.timestamp> beginTime && p.timestamp <endtime). OrderByDescending (p => p.timestamp). Lewati (DisplayStart). Ambil (displayLength) .tolist (); // Tampilkan DisplayLength Strip Data IF ("ASC" == order) {historyDatas = db.metermeReHistories. Di mana (p => p.metermeasure.meterid == meterid). Di mana (p => p.timestamp> beginTime && p.timestamp <endtime). Orderby (p => p.timestamp). Lewati (DisplayStart). Ambil (DisplayLength) .TOLIST (); // Tampilkan DisplayLength Data} HistoryDataTotal = DB.METERMERTERHISTORIES. Di mana (p => p.metermeasure.meterid == meterid). Where (p => p.timestamp> begintime && p.timestamp <endtime) .count (); // Jumlah total data} Daftar <MetermeasureHistoryDataviewModels> ListMetermeReTehistories = Daftar baru <metermeashistoryDataviewModels> (); foreach (item var di historyDatas) {listMetermeReHistories.add (MetermeasheHistoryDataviewModels {MetermeasHeHistoryId = item.metermeRehistoryId, value = item.Value, timestamp = item.Timestamp.ToString ()}); } string jsondataTable = jsonConvert.serializeObject (baru {Total = historyDataTotal, rows = listMetermeReHeHistories}); Kembalikan konten (jsondatatable);}Ini mengimplementasikan pagination dan kueri data, dan mengembalikan data JSON. Data JSON yang dikembalikan mencakup dua objek: total dan baris. Total mewakili jumlah total data, dan baris mewakili data yang akan ditampilkan. MetermeasheHistoryDateView adalah sebagai berikut, sesuai dengan nilai bidang pada tabel:
kelas publik MetermeasheHistoryDataviewModels {public int metermeasheHistoryId {get; mengatur; } Nilai ganda publik {get; mengatur; } public string timestamp {get; mengatur; }}Fungsi Modifikasi Data:
[Httppost] public JSONRESULT editmetermeRehistoryData () {var meterestehistoryid = int.parse (permintaan ["metermeasheHistoryId"]); var meterestehistoryValue = double.parse (permintaan ["value"]); var meterestehistorytime = datetime.parse (permintaan ["timestamp"]); var meterestehistoryIndB = db.metermearehistory.find (meterestehistoryid); meteresteasheHistoryIndB.value = meteresteureHistoryValue; meteresteasheHistoryIndB.timestamp = meteresteureHistorytime; db.savechanges (); var changeNdata = MetermeasHeHistoryDataviewModels baru {MetermeasHeHistoryId = meteresteashistoryIndb.metermearhistoryid, value = meteresteureHistoryIndB.value, timestamp = meteresteHeHistoryIndB.timestamp.tostring ()}; JSONRESULT JS = JSONRESULT baru (); js.data = json (perubahandata); mengembalikan js;}Fungsi Penghapusan Data:
[Httppost] public JSONRESULT deletemetermeRehistoryData () {var meterestehistoryid = int.parse (permintaan ["metermeasheHistoryId"]); db.metermearhistory.remove (db.metermearehistory.find (meterestehistoryid)); db.savechanges (); var deletedData = MetermeasHeHistoryDataviewModels baru {MetermeasHeHistoryId = metereseReHistoryId, value = 0, timestamp = null}; JSONRESULT JS = JSONRESULT baru (); js.data = deleteddata; mengembalikan js;}Setelah server dihapus, latar depan menghapus baris data yang ditentukan melalui metode tabel bootstrap.
Saya telah menggunakan hal -hal ini saat ini. Untuk meringkas proses pembelajaran, saya mencari dokumen resmi, contoh, melihat kode sumber, dan belajar menggunakan alat pengembang Chrome untuk melihat sumber dan jaringan.
Di atas adalah ringkasan pagination server tabel bootstrap dan aplikasi pengeditan online yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!