先看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:

<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
<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="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>

HTML代码只需要 <table id="querylist" class="table table-striped"></table>

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

$('#submitgetdata').click(function () {
$('#msg').html('');
var begintime_ = $('#begintime').val();
var endtime_ = $('#endtime').val();
var err = ''; if (begintime_ == '' || endtime_ == ''){
err = '查询时间不能为空';
}else if(Date.parse(endtime_)-Date.parse(begintime_) < 0){
err = '查询时间设置错误';
} if (err) {
$('#msg').html(err + '!');
$('#msg').fadeIn(1000);
}
else {
$('#msg').html("正在提交!");
$('#querylist').bootstrapTable('refresh');
$('#msg').fadeOut(3000);
}
});

Table相关js:

$('#querylist').bootstrapTable({
columns: [{
field: 'MeterMeasureHistoryID',
title: 'ID',
sortable: true
}, {
field: 'Value',
title: '值',
editable: {
type: 'text',
validate: function(value) {
if($.trim(value) == '') {
return '测量值不能为空';
}
}
}
}, {
field: 'Timestamp',
title: '时间',
editable: {
type: 'text',
validate: function(value) {
if($.trim(value) == '') {
return '时间不能为空';
}else if(!Date.parse(value)){
return '时间设置错误';
}
}
}
},{
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参数设置表格的所有列以及每列的参数,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参数:

    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() ?
0 : this.options.pageSize * (this.options.pageNumber - 1);
}
}

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

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 条数据 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<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);
}

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

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

数据修改函数:

[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;
}

数据删除函数:

[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 = ,
Timestamp = null
}; JsonResult js = new JsonResult();
js.Data = deletedData; return js; }

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


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

关键字:Bootstrap,Bootstrap Table分页,X-editable

[前端插件]Bootstrap Table服务器分页与在线编辑应用总结的更多相关文章

  1. bootstrap table 服务器分页

    1.封装MODEL using System;using System.Collections.Generic;using System.Linq;using System.Text;using Sy ...

  2. bootstrap table 服务器端分页例子分享

    这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...

  3. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

  4. [转]Bootstrap table后端分页(ssm版)

    原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...

  5. Bootstrap table后端分页(ssm版)

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...

  6. 161222、Bootstrap table 服务器端分页示例

    bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...

  7. 好用的自适应表格插件-bootstrap table (支持固定表头)

    最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...

  8. C# Bootstrap table之 分页

    效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...

  9. [转]C# Bootstrap table之 分页

    本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...

随机推荐

  1. android安全:forceStopPackage对android的Alarm的影响

    也许一些使用alarmmanager做定时任务的同学遇到过这样的问题:设定alarm后,进入设置-->应用程序管理-->强行停止app后,定时任务就失效了. 简单的讲就是:force st ...

  2. iOS开发——使用OC篇&frame,bounds,center,position,anchorPoint总结

    frame,bounds,center,position,anchorPoint总结 图层的 position 属性是一个 CGPoint 的值,它指定图层相当于它父图层的位置, 该值基于父图层的坐标 ...

  3. Working with MTD Devices

    转:http://www.linuxforu.com/2012/01/working-with-mtd-devices/ Working with MTD Devices By Mohan Lal J ...

  4. c#读写ini配置文件示例

    虽然c#里都是添加app.config 并且访问也很方便 ,有时候还是不习惯用他.那么我们来做个仿C++下的那种ini配置文件读写吧     其他人写的都是调用非托管kernel32.dll.我也用过 ...

  5. JAVA WEB 作用域之间的区别

    JAVA WEB 作用域 1.page属性范围(pageContext) a.在一个页面设置的属性,跳转到其他页面就无法访问了(包括重定向和). 示例:pageScopeDemo01.jsp < ...

  6. IOS UItableView 滚动到底 触发事件

    开发过程中,在使用UItableView 总会遇到加载更多的问题,到底是手势响应瀑布流的方法好? 还是添加一个底端cell点击触发加载更多好?我也想有自己的判断.但是我们老板总说了算,没办法,谁叫我给 ...

  7. 关于 2dx v3.7 UIScale9Sprite的bug

    关于 2dx v3.7 UIScale9Sprite的bug 刚把引擎从js binding v3.0升级到v3.7,发现了一些bug,这里先说说关于scale9sprite的 1. 关于capIns ...

  8. 3. Android框架和工具之 xUtils(BitmapUtils)

    1. BitmapUtils 作用: 加载bitmap的时候无需考虑bitmap加载过程中出现的oom和android容器快速滑动时候出现的图片错位等现象: 支持加载网络图片和本地图片: 内存管理使用 ...

  9. arcgis gdb含下划线_和%的查询 by gisoracle

    XMMC LIKE '%\_%' ESCAPE '\'              by gisoracle 2015.1.25 XMMC LIKE  '%\%%' escape '\'         ...

  10. 【阿里云产品公测】Opensearch使用体验和评测

    作者:阿里云用户outofmemory 昨天晚上收到了阿里云发的邮件,Open search可以申请公测了,于是迫不及待申请了测试,审核人员很高效,过了不到俩小时给批下来了.  很开心,于是趁今天是周 ...