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 相关文章推荐
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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
mysql 全文搜索 技巧
2007/04/27 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
js使用心得分享
2015/01/13 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
学习vue.js计算属性
2016/12/03 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
Django如何使用redis作为缓存
2020/05/21 Python
区分python中的进程与线程
2020/08/13 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
影视艺术学院毕业生自荐信
2013/11/13 职场文书
应届生自我鉴定
2013/12/11 职场文书
教师档案管理制度
2014/01/23 职场文书
科研先进个人典型材料
2014/01/31 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
高二学生评语大全
2014/04/25 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
单位委托函范文
2015/01/29 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
vue elementUI批量上传文件
2022/04/26 Vue.js