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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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下Memcached入门实例解析
2015/01/05 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
php array_map()函数实例用法
2021/03/03 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
javascript显示选择目录对话框的代码
2008/11/10 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
javascript 闭包详解
2015/02/15 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
bootstrap table小案例
2016/10/21 Javascript
微信小程序开发探究
2016/12/27 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
python使用cookielib库示例分享
2014/03/03 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
服务明星事迹材料
2014/12/29 职场文书
评先进个人材料
2014/12/29 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
GPU服务器的多用户配置方法
2022/07/07 Servers