Bootstrap-table实现动态合并相同行
Bootstrap-table 表格合并相同名字的列
@编写function()
/**
* 合并行
* @param data 原始数据（在服务端完成排序）
* @param fieldName 合并属性名称数组
* @param colspan 列数
* @param target 目标表格对象
*/
function mergeCells(data, fieldName, colspan, target) {
if (data.length == 0) {
alert("不能传入空数据");
return;
}
var numArr = [];
var value = data[0][fieldName];
var num = 0;
for (var i = 0; i < data.length; i++) {
if (value != data[i][fieldName]) {
numArr.push(num);
value = data[i][fieldName];
num = 1;
continue;
}
num++;
}
var merIndex = 0;
for (var i = 0; i < numArr.length; i++) {
$(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] })
merIndex += numArr[i];
}
}
完整代码：html/js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="@{/common/bootstrap/css/bootstrap.css}" rel="stylesheet"/>
<link th:href="@{/common/bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>
<link th:href="@{/common/bootstrap/css/bootstrap-combined.min.css}" rel="stylesheet"/>
<link th:href="@{/common/bootstrap/css/layoutit.css}" rel="stylesheet"/>
<link th:href="@{/common/bootstrap-table/bootstrap-table.css}" rel="stylesheet"/>
<style>
.main{
background: #999999; }
body{margin：0；padding：0；}
</style>
</head>
<body >
<div class="main">
<div style="text-align: center"><h2>table</h2></div> <table id="example" border="1">
</table>
</div>
<!-- 全局js -->
<script th:src="@{/common/jquery/jquery.min.js}"></script>
<script th:src="@{/common/bootstrap/js/bootstrap.js}"></script>
<script th:src="@{/common/bootstrap-table/bootstrap-table.js}"></script>
<script th:src="@{/common/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript">
init();
function init(){ $('#example').bootstrapTable({
url: '/init/table',
method: 'get',
striped: true,
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显示行间隔色
//search : "true",
uniqueId: "ID",
pageSize: "25",
pagination: true, // 是否分页
sortable: true, // 是否启用排序
search:true,
showColumns: true,
showRefresh: true,
onLoadSuccess: function (data) {
// mergeColspan(data,"name" , $('#example'));//列合并
mergeCells(data, "name", 1, $('#example'));//行合并 },
columns: [
[
{
"title": "指 标",
"halign":"center",
"align":"center",
"colspan": 2
},
{
"title": "姓 名",
"halign":"center",
"align":"center"
},
{
"title": "别 名",
"halign":"center",
"align":"center" }
],
[
{
field: 'name',
title: '姓 名'
},
{
field: 'id',
title: 'id'
},
{
field: 'firstName',
title: '姓名'
},
{
field: 'lastName',
title: '别名'
}
]
]
});
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
} } /**
* 合并行
* @param data 原始数据（在服务端完成排序）
* @param fieldName 合并属性名称数组
* @param colspan 列数
* @param target 目标表格对象
*/
function mergeCells(data, fieldName, colspan, target) {
if (data.length == 0) {
alert("不能传入空数据");
return;
}
var numArr = [];
var value = data[0][fieldName];
var num = 0;
for (var i = 0; i < data.length; i++) {
if (value != data[i][fieldName]) {
numArr.push(num);
value = data[i][fieldName];
num = 1;
continue;
}
num++;
}
var merIndex = 0;
for (var i = 0; i < numArr.length; i++) {
$(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] })
merIndex += numArr[i];
}
} /* /!**
* 合并列
* @param data 原始数据（在服务端完成排序）
* @param fieldName 合并属性数组
* @param target 目标表格对象
*!/
function mergeColspan(data, fieldNameArr, target) {
if (data.length == 0) {
alert("不能传入空数据");
return;
}
if (fieldNameArr.length == 0) {
alert("请传入属性值");
return;
}
var num = -1;
var index = 0;
for (var i = 0; i < data.length; i++) {
num++;
for (var v in fieldNameArr) {
index = 1;
if (data[i][fieldNameArr[v]] != data[i][fieldNameArr[0]]) {
index = 0;
break;
}
}
if (index == 0) {
continue;
}
$(target).bootstrapTable('mergeCells', { index: num, field: fieldNameArr[0], colspan: fieldNameArr.length, rowspan: 1 });
}
}
*/ </script>
</body>
</html>
！！！！！！！！！！！！上面的这个合并行的方法有点问题 ： 下面这个方法是可以的 ！！！！！！！！！
/*
合并行
@param data 原始数据（在服务端完成排序）
@param fieldName 合并属性名称数组
@param colspan 列数
@param target 目标表格对象
*/
function mergeCells(data, fieldName, colspan, target) {
if (data.length == 0) {
alert("不能传入空数据");
return;
}
var numArr = [];
var value = data[0][fieldName];
var num = 0;
for (var i = 0; i < data.length; i++) {
if (value != data[i][fieldName]) {
numArr.push(num);
value = data[i][fieldName];
num = 1;
continue;
}
num++;
}
if (typeof (value) != "undefined" && value != "") {
numArr.push(num);
}
var merIndex = 0;
for (var i = 0; i < numArr.length; i++) {
$(target).bootstrapTable('mergeCells',
{
index: merIndex,
field: fieldName,
colspan: colspan,
rowspan: numArr[i]
})
merIndex += numArr[i];
}
}
Bootstrap-table实现动态合并相同行的更多相关文章
- Bootstrap-table实现动态合并相同行(表格同名合并)
写在前面: 有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成 ...
- easyui-datagrid合并相同行功能扩展
//合并相同行$.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(func ...
- bootstrap table插件动态加载表头
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
- easyui datagrid 合并相同行
$.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () ...
- awk之特征相同行的合并 ~转
awk之特征相同行的合并 文本: 1001 hisk01 1001 hisk02 1001 hisk03 1002 hisk04 1002 hisk05 1002 hisk06 1003 ...
- [转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
- 表格组件神器：bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十三节--RBAC模式及ABP权限管理（附送福利）
ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...
- JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
随机推荐
- VBA基础 - 分支和循环
概要 编程语言的基础除了数据类型, 就是控制结构了. 所谓控制结构, 主要就是分支和循环. 分支 废话不说, 直接示例代码: 单条件判断 1 Sub Test() 2 If 2 > 1 Then ...
- Jenkins自动发送邮件配置及定时构建
前言 在配置之前,我们需要安装好Jenkins,对于如何安装不在赘述,看我之前一篇安装教程(或者找度娘,教程很多).接下来我们开始详细讲解build运行完成后自动发送邮件和定时自动构建build 系统 ...
- windows xp 安装后不能能ping，浏览器不能上网
windows xp MSDN版本 下载地址: ed2k://|file|zh-hans_windows_xp_home_with_service_pack_3_x86_cd_x14-92408.is ...
- ndt算法学习
NDT算法原理: NDT算法的基本思想是先根据参考数据(reference scan)来构建多维变量的正态分布, 如果变换参数能使得两幅激光数据匹配的很好,那么变换点在参考系中的概率密度将会很大. 因 ...
- 匿名函数和for_each用法
匿名函数,C++11的 for_each 用法 #include <iostream> #include <algorithm> #include "testClas ...
- Vue全选和全不选
HTML代码: <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> ...
- POJ-1129 DFS染色+四色原理的应用
OJ-ID: POJ-1129 author: Caution_X date of submission: 20190927 tags: DFS+四色原理的应用 descri ...
- maven项目配置使用jdk1.8进行编译的插件
在使用Maven插件编译Maven项目的时候报了这样一个错:[Java source1.5不支持diamond运算符,请使用source 7或更高版本以启用diamond运算符],这里记录下出现这个错 ...
- Python getopt 模块
Python getopt 模块 getopt模块,是配合sys.argv使用的一个扩展.他可以接收终端的参数.格式扩展为“-n” 或 “--n”两种类型,下面是具体解释. 使用 improt get ...
- express捕获全局异常的三种方法
场景 express的路由里抛出异常后,全局中间件没办法捕获,需要在所有的路由函数里写try catch,这坑爹的逻辑让人每次都要多写n行代码 官方错误捕获中件间代码如下 app.use(functi ...