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下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
浅析VUE防抖与节流
Nov 24 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
MySQL 日期时间函数常用总结
2012/06/12 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python使用配置文件过程详解
2019/12/28 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
英语故事演讲稿
2014/04/29 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
好人好事演讲稿
2014/09/01 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
行政司机岗位职责
2015/04/10 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书