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 02 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
js实现无缝滚动特效
Dec 20 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 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
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP strripos函数用法总结
2019/02/11 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
python select.select模块通信全过程解析
2017/09/20 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
集团公司人力资源部岗位职责
2014/01/03 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫