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


Posted in Javascript onAugust 08, 2016

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

<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上。

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

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

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

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

以上所述是小编给大家介绍的Bootstrap Table服务器分页与在线编辑应用总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 #Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 #Javascript
用js读写cookie的简单方法(推荐)
Aug 08 #Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 #Javascript
js中遍历Map对象的简单实例
Aug 08 #Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 #Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 #Javascript
You might like
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php中使用websocket详解
2016/09/23 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
python and or用法详解
2019/06/26 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python for i in range ()用法详解
2020/09/18 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
公司中秋节活动方案
2014/02/12 职场文书
求职自荐信的格式
2014/04/07 职场文书
爱心捐书倡议书
2015/04/27 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python