bootstrap table合并行数据并居中对齐效果


Posted in Javascript onOctober 17, 2018

本文实例为大家分享了bootstrap table合并行数据并居中对齐的具体代码,供大家参考,具体内容如下

渲染表格后进行数据行合并

onLoadSuccess: function (data) {
  $('#tableStyle').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3});
}

整体代码

$('#tableStyle').bootstrapTable({
      url: '/table/tableStyle',
      method:'post',
      pagination: true, //分页
      pageNumber:1,            //初始化加载第一页,默认第一页
      pageSize: 10,            //每页的记录行数(*)
      pageList: [10, 25, 50, 100],    //可供选择的每页的行数(*)
      search: false, //显示搜索框
      sidePagination: "server", //服务端处理分页
      onLoadSuccess: function (data) {
        $('#tableStyle').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3});
      },
      columns: [{
        field: '',
        checkbox:true
      }, {
        field: 'name',
        title: '名称'
      }, {
        field: 'price',
        title: '价格'
      }]
 });

合并后对td设置属性 vertical-align: middle;

展现图片

bootstrap table合并行数据并居中对齐效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
layui table 参数设置方法
Aug 14 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
IE9 elementUI文件上传的问题解决
Oct 17 #Javascript
vue src动态加载请求获取图片的方法
Oct 17 #Javascript
node实现分片下载的示例代码
Oct 17 #Javascript
在小程序开发中使用npm的方法
Oct 17 #Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 #Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 #Javascript
element-ui的回调函数Events的用法详解
Oct 16 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP多进程编程实例详解
2017/07/19 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery实现跨域
2015/02/03 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
如何用Python合并lmdb文件
2018/07/02 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
企业管理毕业生求职信范文
2014/03/07 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
九华山导游词
2015/02/03 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
JavaScript文档对象模型DOM
2021/11/20 Javascript