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 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
MooTools 1.2介绍
Sep 14 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
深入理解Promise.all
Aug 08 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
使用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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
从php核心代码分析require和include的区别
2011/01/02 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python中static相关知识小结
2018/01/02 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python中int与str互转方法
2018/07/02 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
pandas去除重复列的实现方法
2019/01/29 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
毕业生自荐书
2014/02/02 职场文书
思想品德自我评价
2014/02/04 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
学生评语集锦
2015/01/04 职场文书
终止劳动合同通知书
2015/04/16 职场文书
中标通知书格式
2015/04/17 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server
Python echarts实现数据可视化实例详解
2022/03/03 Python