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： 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
其中实现了分页以及数据查询，返回json数据，返回的json数据包括total、rows两个对象，total表示数据总数，rows表示需要显示的数据。MeterMeasureHistoryDateView如下，对应Table中的field值： 数据修改函数：数据删除函数：服务器删除后，前台通过bootstrap Table方法remove删除指定数据行。 目前就使用了这些，总结下学习过程，就是查官方文档、示例，看源码，并学会使用Chrome开发者工具，查看Sources和Network。 以上所述是小编给大家介绍的Bootstrap Table服务器分页与在线编辑应用总结。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
