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 ...
随机推荐
- ItelliJ Idea 2019提交TFVC变更，系统提示Validation must be performed before checking in
问题描述 全新安装的Idea 2019,从Azure DevOps Server 2019 (原名TFS)的TFVC代码库下载文件,正常. 修改代码后,签入,系统提示"Validation ...
- linux 链接mysql并覆盖数据
--链接mysql 命令格式: mysql -h 主机地址 -u 用户名 -p --按回车输入密码 --在服务器里登录到数据库里 ,使用某个库,gtmc 代表数据库名称 use gtmc --覆盖数据 ...
- SpringCloud的阿里巴巴相关开源组件
Sentinel 阿里巴巴开源产品,把流量作为切入点,从流量控制.熔断降级.系统负载保护等多个维度保护服务的稳定性. Nacos 阿里巴巴开源产品,一个更易于构建云原生应用的动态服务发现.配置管理和服 ...
- colmap编译过程中出现，无法解析的外部符号错误 “__cdecl google::base::CheckOpMessageBuilder::ForVar1(void)”
错误提示: >colmap.lib(matching.obj) : error LNK2019: 无法解析的外部符号 "__declspec(dllimport) public: cl ...
- Linux中用postfix搭建邮件服务器实战详解
Linux中用postfix搭建邮件服务器实战详解 postfix是Wietse Venema在IBM的GPL协议之下开发的MTA(邮件传输代理)软件.Postfix试图更快.更容易管理.更安全,同时 ...
- SAP 如何得到交货单上的序列号清单？
SAP 如何得到交货单上的序列号清单? 以内向交货单为例(外向交货单方法了类似)予以说明. 1)VL33N,在交货单显示界面, 但是没办法通过这个界面里导出序列号清单. 2),只能通过查表的方式导出序 ...
- 听说看了这篇文章就彻底搞懂了什么是OPC（上）
从2000年初以来,我们就一直在使用OPC软件互操作性标准,而那些正准备踏入和想要踏入工业自动化领域的人们却对这些含义感到困惑. 所以在本中,我将系统地为你梳理OPC知识. OPC首字母缩写词代表什么 ...
- LeetCode——Employees Earning More Than Their Managers
The Employee table holds all employees including their managers. Every employee has an Id, and there ...
- 【原创】Airflow调用talend
核心原理 因为talend job build出来是一个可直接运行的程序,可以通过shell命名启动job进程,因此可以使用airflow的bashoperator调用生成好的talend job包里 ...
- Linux 配置Java环境
下载jdk安装包 安装Java环境之前,首先要到 官网下载地址 下载我们需要的jdk安装包,根据我们Linux系统的位数来选择需要下载的包,我的Linux是64位的,所以我下载的64位的jdk安装包. ...