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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
javascript 触发事件列表 比较不错
Sep 03 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
详解wow.js中各种特效对应的类名
Sep 13 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
原生js 实现表单验证功能
Feb 08 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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
Zerg建筑一览
2020/03/14 星际争霸
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
简单实现php上传文件功能
2017/09/21 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
js实现3D照片墙效果
2019/10/28 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
zookeeper python接口实例详解
2018/01/18 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python爬虫增加访问量的方法
2019/08/22 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python 求向量的余弦值操作
2021/03/04 Python
安全生产实施方案
2014/02/23 职场文书
企业金融服务方案
2014/06/03 职场文书
环保口号大全
2014/06/12 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
募捐感谢信
2015/01/22 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
详解Redis瘦身指南
2021/05/26 Redis