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 写类方式之九
Jul 05 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
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_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
python进程与线程小结实例分析
2018/11/11 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python、Javascript中的闭包比较
2015/02/04 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
读书心得体会
2013/12/28 职场文书
运动会100米解说词
2014/01/23 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
海洋科学专业求职信
2014/08/10 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
罗马假日观后感
2015/06/08 职场文书
2015双创工作总结
2015/07/24 职场文书
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
利用Python实时获取steam特惠游戏数据
2022/06/25 Python