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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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中图片等比缩放的实例
2013/03/24 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
javaScript基础详解
2017/01/19 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
python单链表实现代码实例
2013/11/21 Python
Python实现全局变量的两个解决方法
2014/07/03 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
关于Python解包知识点总结
2020/05/05 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
2014年上半年工作自我评价
2014/01/18 职场文书
安全生产检查通报
2014/01/29 职场文书
客服专员岗位职责
2014/02/28 职场文书
平安家庭事迹材料
2014/12/20 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书