[前端插件]Bootstrap Table服务器分页与在线编辑应用总结

先看Bootstrap Table应用效果：

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

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

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 = 0,
Timestamp = null
};

JsonResult js = new JsonResult();
js.Data = deletedData;

return js;

}

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

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