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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
详解Vue router路由
Nov 20 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
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP钩子实现方法解析
2019/05/21 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
JS中数据结构之栈
2019/01/01 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
Django多数据库联用实现方法解析
2020/11/12 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
全球性的女装店:storets
2019/06/12 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
公司授权委托书范本
2014/04/03 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
小数乘法教学反思
2016/02/22 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python