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 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
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
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python实现从订阅源下载图片的方法
2015/03/11 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
德国高性价比网上药店:medpex
2017/07/09 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
机械电子工程毕业生自荐信
2013/11/23 职场文书
运动会邀请函范文
2014/02/06 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
地雷战观后感
2015/06/09 职场文书
小学生安全教育主题班会
2015/08/12 职场文书