Bootstrap Table服务器分页与在线编辑应用总结

前端之家收集整理的这篇文章主要介绍了Bootstrap Table服务器分页与在线编辑应用总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先看应用效果:

表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好。还可以设置查询数据的起止时间,查询一定时间范围的数据。在线编辑功能通过扩展Bootstrap Table实现,使用X-editable实现。

Bootstrap Table有两种使用方式:

1.对普通的 table 设置 data 属性;

2.通过JavaScript 来启用 Bootstrap Table 插件。

第一种方式很方便,但是我更倾向于第二种方法,可以做到JS和HTML的分离,并且JS代码可以复用。

Bootstrap Table的文档比较详细,但是有一些具体内容还得看示例代码等。

先贴出前台和后台的实现代码,再具体介绍。

前台需要的资源文件,主要有Bootstrap3相关样式、js以及bootstrap Table相关css、js以及X-editable基于Bootstrap3的样式、js:

HTML代码只需要

JS代码,时间查询相关代码,查询时间设置正确后,通过bootstrap Table方法refresh重新加载数据:

Table相关js:

修改成功'); } }); },'click .remove': function (e,url: '/Analyze/DeleteMeterMeasureHistoryData',success: function (data) { alert('删除成功'); $('#querylist').bootstrapTable('remove',{ field: 'MeterMeasureHistoryID',values: [row.MeterMeasureHistoryID] }); } }); } };

columns参数设置表格的所有列以及每列的参数,field对应json返回数据的键值以及在Bootstrap Table中的列参数;title对应显示的列名称;sortable设置按着当前列排序;formatter设置列中每个单元格格式;editable设置当前列单元格的编辑方式,还可以设置validate验证方式。

因此实际表格设置为四列,依据第1列排序,2、3列是可以编辑的,type设置为text,可以根据需要使用其他的type,第2列验证数据不能为空,第3列验证输入值是时间;1、2、3列的内容来自服务器返回的json数据;第4列是对当前行的数据操作,并且加入监听事件operateEvents,绑定到window上。

sortName设置为第1列field值;

sortOrder设置为逆序;

pagination为true表示分页

sidePagination为server表示服务器分页

pageNumber表示默认起始页;

pageSize表示每页显示数据个数;

pageList表示可选的每页显示数据个数;

queryParams表示每次发送给服务器的参数,可以添加自己需要的参数;

url是数据的请求地址。

查看bootstrap-table.js,可以看到默认params参数:

服务器后台实现三个功能,一个是根据数据加载,以及数据修改删除

p.MeterMeasure.MeterID == meterID). OrderByDescending(p => p.Timestamp). Skip(displayStart). Take(displayLength).ToList();//显示最近的 displayLength 条数据 if ("asc" == order) { historyDatas = db.MeterMeasureHistories. Where(p => p.MeterMeasure.MeterID == meterID). OrderBy(p => p.Timestamp). Skip(displayStart). Take(displayLength).ToList();//显示最早的 displayLength 条数据 } int historyDataTotal = db.MeterMeasureHistories. Where(p => p.MeterMeasure.MeterID == meterID).Count();//数据总条数 //时间过滤 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 条数据 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 条数据 } historyDataTotal = db.MeterMeasureHistories. Where(p => p.MeterMeasure.MeterID == meterID). Where(p => p.Timestamp > begintime && p.Timestamp < endtime).Count();//数据总条数 } List ListMeterMeasureHistories = new List(); 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); }

其中实现了分页以及数据查询,返回json数据,返回的json数据包括total、rows两个对象,total表示数据总数,rows表示需要显示的数据。MeterMeasureHistoryDateView如下,对应Table中的field值:

viewmodels { public int MeterMeasureHistoryID { get; set; } public double Value { get; set; } public string Timestamp { get; set; } }

数据修改函数

viewmodels { MeterMeasureHistoryID = metermeasurehistoryInDb.MeterMeasureHistoryID,Value = metermeasurehistoryInDb.Value,Timestamp = metermeasurehistoryInDb.Timestamp.ToString() }; JsonResult js = new JsonResult(); js.Data = Json(changedData); return js; }

数据删除函数

viewmodels { MeterMeasureHistoryID = metermeasurehistoryid,Value = 0,Timestamp = null }; JsonResult js = new JsonResult(); js.Data = deletedData; return js; }

服务器删除后,前台通过bootstrap Table方法remove删除指定数据行。

目前就使用了这些,总结下学习过程,就是查官方文档、示例,看源码,并学会使用Chrome开发者工具,查看Sources和Network。

以上所述是小编给大家介绍的Bootstrap Table服务器分页与在线编辑应用总结。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/bootstrap/46723.html

猜你在找的Bootstrap相关文章