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获取文本框中字符长度的代码
Sep 29 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
java必学必会之static关键字
Dec 03 Javascript
深入探讨前端框架react
Dec 09 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
很棒的vue弹窗组件
May 24 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
浅谈React Event实现原理
Sep 20 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
JavaScript实现音乐播放器
Aug 14 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
一个php作的文本留言本的例子(五)
2006/10/09 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
pandas实现选取特定索引的行
2018/04/20 Python
python绘制多个曲线的折线图
2020/03/23 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
酒店辞职信怎么写
2015/02/27 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技
python playwright之元素定位示例详解
2022/07/23 Python