Bootstrap Table服務(wù)器分頁與在線編輯應(yīng)用總結(jié)
先看Bootstrap Table應(yīng)用效果:
表格用來顯示數(shù)據(jù)庫中的數(shù)據(jù),數(shù)據(jù)通過AJAX從服務(wù)器加載,同時(shí)分頁功能有服務(wù)器實(shí)現(xiàn),避免客戶端分頁,在加載大量數(shù)據(jù)時(shí)造成的用戶體驗(yàn)不好。還可以設(shè)置查詢數(shù)據(jù)的起止時(shí)間,查詢一定時(shí)間范圍的數(shù)據(jù)。在線編輯功能通過擴(kuò)展Bootstrap Table實(shí)現(xiàn),使用X-editable實(shí)現(xiàn)。
Bootstrap Table有兩種使用方式:
1.對(duì)普通的 table 設(shè)置 data 屬性;
2.通過JavaScript 來啟用 Bootstrap Table 插件。
第一種方式很方便,但是我更傾向于第二種方法,可以做到JS和HTML的分離,并且JS代碼可以復(fù)用。
Bootstrap Table的文檔比較詳細(xì),但是有一些具體內(nèi)容還得看示例代碼等。
先貼出前臺(tái)和后臺(tái)的實(shí)現(xiàn)代碼,再具體介紹。
前臺(tái)需要的資源文件,主要有Bootstrap3相關(guān)樣式、js以及bootstrap Table相關(guān)css、js以及X-editable基于Bootstrap3的樣式、js:
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css"> <link rel="stylesheet" > <script src="../assets/jquery.min.js"></script> <script src="../assets/bootstrap/js/bootstrap.min.js"></script> <script src="../assets/bootstrap-table/src/bootstrap-table.js"></script> <script src="../assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script> <script src="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
HTML代碼只需要
<table id="querylist" class="table table-striped"></table>
JS代碼,時(shí)間查詢相關(guān)代碼,查詢時(shí)間設(shè)置正確后,通過bootstrap Table方法refresh重新加載數(shù)據(jù):
$('#submitgetdata').click(function () { $('#msg').html(''); var begintime_ = $('#begintime').val(); var endtime_ = $('#endtime').val(); var err = ''; if (begintime_ == '' || endtime_ == ''){ err = '查詢時(shí)間不能為空'; }else if(Date.parse(endtime_)-Date.parse(begintime_) < 0){ err = '查詢時(shí)間設(shè)置錯(cuò)誤'; } if (err) { $('#msg').html(err + '!'); $('#msg').fadeIn(1000); } else { $('#msg').html("正在提交!"); $('#querylist').bootstrapTable('refresh'); $('#msg').fadeOut(3000); } });
Table相關(guān)js:
$('#querylist').bootstrapTable({ columns: [{ field: 'MeterMeasureHistoryID', title: 'ID', sortable: true }, { field: 'Value', title: '值', editable: { type: 'text', validate: function(value) { if($.trim(value) == '') { return '測(cè)量值不能為空'; } } } }, { field: 'Timestamp', title: '時(shí)間', editable: { type: 'text', validate: function(value) { if($.trim(value) == '') { return '時(shí)間不能為空'; }else if(!Date.parse(value)){ return '時(shí)間設(shè)置錯(cuò)誤'; } } } },{ field: 'operation', title: '操作', formatter:function(value,row,index){ var s = '<a class = "save" href="javascript:void(0)">保存</a>'; var d = '<a class = "remove" href="javascript:void(0)">刪除</a>'; return s+' '+d; }, events: 'operateEvents' }], sortName: 'MeterMeasureHistoryID', sortOrder: 'desc', pagination: true, sidePagination: 'server', pageNumber: 1, pageSize: 5, pageList: [5, 10, 20], queryParams: function (params) { return { meterID: $('#meterid').val(), pageSize: params.limit, offset: params.offset, sortOrder: params.order, begintime: $('#begintime').val(), endtime: $('#endtime').val() } }, url: '/Analyze/GetJsonHistoryDatas' }); window.operateEvents = { 'click .save': function (e, value, row, index) { $.ajax({ type: "post", data: row, url: '/Analyze/EditMeterMeasureHistoryData', success: function (data) { alert('修改成功'); } }); }, 'click .remove': function (e, value, row, index) { $.ajax({ type: "post", data: row, url: '/Analyze/DeleteMeterMeasureHistoryData', success: function (data) { alert('刪除成功'); $('#querylist').bootstrapTable('remove', { field: 'MeterMeasureHistoryID', values: [row.MeterMeasureHistoryID] }); } }); } };
columns參數(shù)設(shè)置表格的所有列以及每列的參數(shù),field對(duì)應(yīng)json返回?cái)?shù)據(jù)的鍵值以及在Bootstrap Table中的列參數(shù);title對(duì)應(yīng)顯示的列名稱;sortable設(shè)置按著當(dāng)前列排序;formatter設(shè)置列中每個(gè)單元格格式;editable設(shè)置當(dāng)前列單元格的編輯方式,還可以設(shè)置validate驗(yàn)證方式。
因此實(shí)際表格設(shè)置為四列,依據(jù)第1列排序,2、3列是可以編輯的,type設(shè)置為text,可以根據(jù)需要使用其他的type,第2列驗(yàn)證數(shù)據(jù)不能為空,第3列驗(yàn)證輸入值是時(shí)間;1、2、3列的內(nèi)容來自服務(wù)器返回的json數(shù)據(jù);第4列是對(duì)當(dāng)前行的數(shù)據(jù)操作,并且加入監(jiān)聽事件operateEvents,綁定到window上。
sortName設(shè)置為第1列field值;
sortOrder設(shè)置為逆序;
pagination為true表示分頁;
sidePagination為server表示服務(wù)器分頁;
pageNumber表示默認(rèn)起始頁;
pageSize表示每頁顯示數(shù)據(jù)個(gè)數(shù);
pageList表示可選的每頁顯示數(shù)據(jù)個(gè)數(shù);
queryParams表示每次發(fā)送給服務(wù)器的參數(shù),可以添加自己需要的參數(shù);
url是數(shù)據(jù)的請(qǐng)求地址。
查看bootstrap-table.js,可以看到默認(rèn)params參數(shù):
BootstrapTable.prototype.initServer = function (silent, query) { 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); } }
服務(wù)器后臺(tái)實(shí)現(xiàn)三個(gè)功能,一個(gè)是根據(jù)數(shù)據(jù)加載,以及數(shù)據(jù)修改和刪除。
public ActionResult GetJsonHistoryDatas() { var displayStart = int.Parse(Request["offset"]); var displayLength = int.Parse(Request["pageSize"]); var meterID = int.Parse(Request["MeterID"]); var order = Request["sortOrder"]; var historyDatas = db.MeterMeasureHistories. Where(p => p.MeterMeasure.MeterID == meterID). OrderByDescending(p => p.Timestamp). Skip(displayStart). Take(displayLength).ToList();//顯示最近的 displayLength 條數(shù)據(jù) if ("asc" == order) { historyDatas = db.MeterMeasureHistories. Where(p => p.MeterMeasure.MeterID == meterID). OrderBy(p => p.Timestamp). Skip(displayStart). Take(displayLength).ToList();//顯示最早的 displayLength 條數(shù)據(jù) } int historyDataTotal = db.MeterMeasureHistories. Where(p => p.MeterMeasure.MeterID == meterID).Count();//數(shù)據(jù)總條數(shù) //時(shí)間過濾 if (!String.IsNullOrEmpty(Request["begintime"])) { DateTime begintime = DateTime.Parse(Request["begintime"]); DateTime endtime = DateTime.Parse(Request["endtime"]); historyDatas = db.MeterMeasureHistories. Where(p => p.MeterMeasure.MeterID == meterID). Where(p => p.Timestamp > begintime && p.Timestamp < endtime). OrderByDescending(p => p.Timestamp). Skip(displayStart). Take(displayLength).ToList();//顯示最近的 displayLength 條數(shù)據(jù) if ("asc" == order) { historyDatas = db.MeterMeasureHistories. Where(p => p.MeterMeasure.MeterID == meterID). Where(p => p.Timestamp > begintime && p.Timestamp < endtime). OrderBy(p => p.Timestamp). Skip(displayStart). Take(displayLength).ToList();//顯示最早的 displayLength 條數(shù)據(jù) } historyDataTotal = db.MeterMeasureHistories. Where(p => p.MeterMeasure.MeterID == meterID). Where(p => p.Timestamp > begintime && p.Timestamp < endtime).Count();//數(shù)據(jù)總條數(shù) } List<MeterMeasureHistoryDataViewModels> ListMeterMeasureHistories = new List<MeterMeasureHistoryDataViewModels>(); foreach (var item in historyDatas) { ListMeterMeasureHistories.Add(new MeterMeasureHistoryDataViewModels { MeterMeasureHistoryID = item.MeterMeasureHistoryID, Value = item.Value, Timestamp = item.Timestamp.ToString() }); } string jsonDataTable = JsonConvert.SerializeObject( new { total = historyDataTotal, rows = ListMeterMeasureHistories }); return Content(jsonDataTable); }
其中實(shí)現(xiàn)了分頁以及數(shù)據(jù)查詢,返回json數(shù)據(jù),返回的json數(shù)據(jù)包括total、rows兩個(gè)對(duì)象,total表示數(shù)據(jù)總數(shù),rows表示需要顯示的數(shù)據(jù)。MeterMeasureHistoryDateView如下,對(duì)應(yīng)Table中的field值:
public class MeterMeasureHistoryDataViewModels { public int MeterMeasureHistoryID { get; set; } public double Value { get; set; } public string Timestamp { get; set; } }
數(shù)據(jù)修改函數(shù):
[HttpPost] public JsonResult EditMeterMeasureHistoryData() { var metermeasurehistoryid = int.Parse(Request["MeterMeasureHistoryID"]); var metermeasurehistoryvalue = double.Parse(Request["Value"]); var metermeasurehistorytime = DateTime.Parse(Request["Timestamp"]); var metermeasurehistoryInDb = db.MeterMeasureHistories.Find(metermeasurehistoryid); metermeasurehistoryInDb.Value = metermeasurehistoryvalue; metermeasurehistoryInDb.Timestamp = metermeasurehistorytime; db.SaveChanges(); var changedData = new MeterMeasureHistoryDataViewModels { MeterMeasureHistoryID = metermeasurehistoryInDb.MeterMeasureHistoryID, Value = metermeasurehistoryInDb.Value, Timestamp = metermeasurehistoryInDb.Timestamp.ToString() }; JsonResult js = new JsonResult(); js.Data = Json(changedData); return js; }
數(shù)據(jù)刪除函數(shù):
[HttpPost] public JsonResult DeleteMeterMeasureHistoryData() { var metermeasurehistoryid = int.Parse(Request["MeterMeasureHistoryID"]); db.MeterMeasureHistories.Remove(db.MeterMeasureHistories.Find(metermeasurehistoryid)); db.SaveChanges(); var deletedData = new MeterMeasureHistoryDataViewModels { MeterMeasureHistoryID = metermeasurehistoryid, Value = 0, Timestamp = null }; JsonResult js = new JsonResult(); js.Data = deletedData; return js; }
服務(wù)器刪除后,前臺(tái)通過bootstrap Table方法remove刪除指定數(shù)據(jù)行。
目前就使用了這些,總結(jié)下學(xué)習(xí)過程,就是查官方文檔、示例,看源碼,并學(xué)會(huì)使用Chrome開發(fā)者工具,查看Sources和Network。
以上所述是小編給大家介紹的Bootstrap Table服務(wù)器分頁與在線編輯應(yīng)用總結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- bootstrap table 服務(wù)器端分頁例子分享
- 第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁效果
- Bootstrap table分頁問題匯總
- Bootstrap table兩種分頁示例
- BootStrap中Table分頁插件使用詳解
- BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁應(yīng)用小結(jié)
- 基于SpringMVC+Bootstrap+DataTables實(shí)現(xiàn)表格服務(wù)端分頁、模糊查詢
- 解決JS組件bootstrap table分頁實(shí)現(xiàn)過程中遇到的問題
- bootstrap table分頁模板和獲取表中的ID方法
- bootstrap Table服務(wù)端處理分頁(后臺(tái)是.net)
相關(guān)文章
JS判斷字符串是否為整數(shù)的方法--簡(jiǎn)單的正則判斷
今天小編就為大家分享一篇JS判斷字符串是否為整數(shù)的方法--簡(jiǎn)單的正則判斷,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-07-07JS中使用apply方法通過不同數(shù)量的參數(shù)調(diào)用函數(shù)的方法
這篇文章主要介紹了JS中使用apply方法通過不同數(shù)量的參數(shù)調(diào)用函數(shù)的方法的相關(guān)資料,需要的朋友可以參考下2016-05-05微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法
這篇文章主要給大家介紹了關(guān)于微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法,在小程序中使用時(shí)間選擇器時(shí),獲取到的時(shí)間可能是一個(gè)時(shí)間戳,這并不是我們想要的,這時(shí)候我們得將獲取到的時(shí)間戳進(jìn)行轉(zhuǎn)換,需要的朋友可以參考下2023-10-10解決wx.onMenuShareTimeline出現(xiàn)的問題
本文主要介紹解決wx.onMenuShareTimeline出現(xiàn)的問題,這里提供了示例代碼作為參考,有需要的小伙伴可以參考下2016-08-08微信小程序連接數(shù)據(jù)庫與WXS的使用方法詳細(xì)介紹
這篇文章主要介紹了微信小程序連接數(shù)據(jù)庫與WXS的使用方法,微信小程序是騰訊內(nèi)部的產(chǎn)品,不能直接打開一個(gè)外部的鏈接,但是騰訊為開發(fā)者封裝好了API用來請(qǐng)求一個(gè)網(wǎng)站的內(nèi)容或者服務(wù),感興趣的同學(xué)可以參考下2023-12-12IE中document.createElement的iframe無法設(shè)置屬性name的解決方法
這篇文章主要介紹了IE中document.createElement的iframe無法設(shè)置屬性name的解決方法,需要的朋友可以參考下2015-09-09JavaScript學(xué)習(xí)教程之cookie與webstorage
這篇文章主要給大家介紹了關(guān)于JavaScript學(xué)習(xí)教程之cookie與webstorage的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06