bootstrap table合并行数据并居中对齐效果
本文实例为大家分享了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实现合并相同行
本文实例为大家分享了bootstrapTable实现合并相同行的具体代码,供大家参考,具体内容如下 方法:调用mergeCells(data, fieldName, target),可以实现合并相同行 var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, pk: 'id', sortName: 'update_time',
-
bootstrap table实现横向合并与纵向合并
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 先上html代码 <div id="test" class="table-responsive" style="padding: 0;overflow:auto;"> <table id="resourceTable" style="min-width:1500px;" class="table
-
bootstrap table实现合并单元格效果
本文实例为大家分享了客户端运用bootstrapTable 的mergeCells属性合并单元格来达到报表分析展示的直观效果. JavaScript代码 声明mergeCells函数,如: /** * 合并单元格 * @param data 原始数据(在服务端完成排序) * @param fieldName 合并属性名称 * @param colspan 合并列 * @param target 目标表格对象 */ function mergeCells(data,fieldName,colspa
-
bootstrap table合并行数据并居中对齐效果
本文实例为大家分享了bootstrap table合并行数据并居中对齐的具体代码,供大家参考,具体内容如下 渲染表格后进行数据行合并 onLoadSuccess: function (data) { $('#tableStyle').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3}); } 整体代码 $('#tableStyle').bootstrapTable({ url: '/table/tableStyle
-
JS组件Bootstrap Table表格多行拖拽效果实现代码
前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态 二.需求分析 通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的
-
bootstrap table实现iview固定列的效果实例代码详解
因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>左右两侧固定列,中间内容可以横向拖动</title> <link rel="stylesheet" hr
-
BootStrap table实现表格行拖拽效果
本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码,供大家参考,具体内容如下 不上图了 首先还是得添加三个文件,自己上网搜搜就行 <script src="~/Content/bootstrap-table/jquery.tablednd.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table-reorder-rows.js">
-
BootStrap Table 设置height表头与内容无法对齐的问题
首先说下我遇到的问题,就是设置表格的height后先加载所有数据再隐藏除第一条外的数据(即只显示第一条数据)发现表头与内容无法对齐,在网上也找了很多解决方法,但效果都不太理想,最后还是老老实实调样式,发现我们所看到的表头就是".fixed-table-header"这样一个div,而原来的表头因为margin-top而看不见了,而这个表头与内容是对齐的,因此就可以设置".fixed-table-header"的每一个"th"的宽度来实现对齐,于是
-
bootstrap table服务端实现分页效果
实现bootstrap table服务端实现分页demo,具体内容如下 首页index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-wi
-
JS组件Bootstrap Table表格行拖拽效果实现代码
一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2
-
Bootstrap table列上下移动效果
本文实例为大家分享了Bootstrap table列上下移动效果的具体代码,供大家参考,具体内容如下 排序 1. 按钮排序 点击排序按钮,页面的序号变为可点击的方向键,实现手动排序(第一行没有下箭头,最后一行没有上尖头) 实现方式 1.击则“编辑”,改变内容 <button class="btn btn-info editBtn" style="display:inline-block" onclick="handleTableEditBtn(thi
-
第一次动手实现bootstrap table分页效果
先上图吧,这就是bootstrap table分页效果图 上代码(这一部分是工具栏的,还包括slider滑动条) <div class="box-body"> <div class="row"> <div class="form-group col-xs-3" style="width: 432px;"> <label for="SendUser" class=&q
-
JS表格组件神器bootstrap table使用指南详解
bootstrap table详细使用指南分享,供大家参考,具体内容如下 1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能.目前在github上已经有2600多个Star,可见其受欢迎程度.其官方网站地址为:http://bootstrap-table.wenz
随机推荐
- 2个比较经典的PHP加密解密函数分享
- 详解jQuery停止动画——stop()方法的使用
- setup.exe microsoft.exe SP00LV.exe手动查杀
- .net中实现listBox左右移动
- c#模拟平抛运动动画的方法详解
- 使用PHP制作新闻系统的思路
- 浅析PHP Socket技术
- 红黑树的使用详解
- js实现兼容PC端和移动端滑块拖动选择数字效果
- jQuery Ajax实现跨域请求
- JavaScript定时显示广告代码分享
- 101个脚本之建立linux回收站的脚本
- 基于Android实现仿QQ5.0侧滑
- C# listview添加combobox到单元格的实现代码
- Android计步模块实例代码(类似微信运动)
- Android开发 -- UI界面之threme和style
- 详解eclipse中Maven工程使用Tomcat7以上插件的方法
- 利用nginx + node在阿里云部署https的步骤详解
- PHP 获取某年第几周的开始日期和结束日期的实例
- spring集成redis cluster详解