bootstrap表格某一列值相同时_Bootstrap-table实现动态合并相同行(表格同名合并)
有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并。要是不是相同的就不合并。如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成的(只需要计算出所有相同元素出现的次数即可,不需要考虑是否紧挨着),但是当可以改变排序的时候,这个时候就有点儿问题了。可能表述的有点儿不明白,下面具体看图描述问题吧。
具体的需求,假设现在有三条记录,后台按照顺序x排好后传递给前台页面进行显示。
页面拿到数据后将相同行进行合并后可以得到右边图的效果,但是如果现在在页面选择了一个排序按钮后,现在的排序被打乱了,又该怎样去实现合并?
这里值得思考的是,后面每个列的最多的合并次数是基于前一个列的合并的次数来的,所以这里是个切入点,记录下第一列所有紧挨着的相同行内容出现的次数,然后遍历,去计算第二列所有紧挨着的相同行内容出现的次数,然后遍历,去计算第三列所有紧挨着的相同行内容出现的次数,依次下去。。。。。将每一列紧挨着的相同元素的次数都记录下来,然后拿到了这些次数,最后使用bootstrapTable自带的mergeCells方法去合并即可。越来越觉得数据结构以及算法重要性,最近太多写的程序都涉及到一些逻辑的算法,还是上学时要把这两个学好呀~~~~~~~
下面看看代码:
Created by IntelliJ IDEA.
User: Administrator
Date: 2018/6/20
Time: 14:21
To change this template use File | Settings | File Templates.
--%>
String scheme = request.getScheme();
String serverName = request.getServerName();
String contextPath = request.getContextPath();
int port = request.getServerPort();
//网站的访问跟路径
String baseURL = scheme + "://" + serverName + ":" + port
+ contextPath;
request.setAttribute("baseURL", baseURL);
%>
实现表格同名合并
$(function () {
//初始化Table
$('#table').bootstrapTable({
url: '${baseURL}/Views/cc.json',//请求后台的URL(*) 这里我用的是一个json文件
method: 'get',//请求方式(*)
toolbar: '#toolbar',//工具按钮用哪个容器
striped: true,//是否显示行间隔色
cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true,//是否显示分页(*)
sortable: false,//是否启用排序
sortOrder: "asc",//排序方式
//queryParams: queryParams,//传递参数(*)
sidePagination: "server",//分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1,//初始化加载第一页,默认第一页
pageSize: 10,//每页的记录行数(*)
pageList: [10, 25, 50, 100],//可供选择的每页的行数(*)
// search: true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端
contentType: "application/x-www-form-urlencoded",
strictSearch: true,
showColumns: true,//是否显示内容列下拉框
showRefresh: true,//是否显示刷新按钮
minimumCountColumns: 2,//最少允许的列数
clickToSelect: true,//是否启用点击选中行
//这里如果要固定表头的话 就把height开启
//height: 700,//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
width:'50%',
uniqueId: "id",//每一行的唯一标识,一般为主键列
showToggle: true,//是否显示详细视图和列表视图的切换按钮
cardView: false,//是否显示详细视图
detailView: false,//是否显示父子表
onLoadSuccess: function (data) {
//数据加载成功后 进行合并 这里我只是同名合并projName subProj phase 如果需要合并更多的字段 仿照添加对应的代码就可以了
mergeTable(data,"table");
},
columns: [
{
field: 'projName',
title: 'projName',
}, {
field: 'subProj',
title: 'subProj'
}, {
field: 'phase',
title: 'phase'
}, {
field: 'workItem',
title: 'workItem',
},
{
field: 'completion',
title: 'completion',
},
],
});
});
//全局变量 ***如果每次只是发送ajax请求对table进行局部更新,则每次要合并前前都应该清空这三个变量 不然全局变量会一值追加结果
var projNameCount="";
var subProjNameCount="";
var phaseCount="";
//合并表格
function mergeTable(data,tableId){
//每次合并表格前 都要将全局变量清空
projNameCount="";
subProjNameCount="";
phaseCount="";
mergeCells(data.rows,0,data.rows.length,"projName",$('#'+tableId));
//对projName,subProjName,phase的次数进行分割
//去掉末尾的逗号 有时候也可以不用去掉 还是去掉了我这里
projNameCount = projNameCount.substring(0,projNameCount.length-1);
subProjNameCount = subProjNameCount.substring(0,subProjNameCount.length-1);
phaseCount = phaseCount.substring(0,phaseCount.length-1);
//console.log(projNameCount+"+"+subProjNameCount+"+"+phaseCount);
var strArr1 = projNameCount.split(",");
var strArr2 = subProjNameCount.split(",");
var strArr3 = phaseCount.split(",");
//根据次数进行表格合并
//合并projName
var index = 0;
for(var i=0;i
var count = strArr1[i] * 1;
$('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"projName", colspan: 1, rowspan: count});
index += count;
}
//合并subProjName
var index = 0;
for(var i=0;i
var count = strArr2[i] * 1;
$('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"subProjName", colspan: 1, rowspan: count});
index += count;
}
//合并phaseName
var index = 0;
for(var i=0;i
var count = strArr3[i] * 1;
$('#'+tableId).bootstrapTable('mergeCells',{index:index, field:"phaseName", colspan: 1, rowspan: count});
index += count;
}
}
//排序后紧挨在一起 进行同名合并
/**
* 对于表格合并,首先要进行排序,即将同名的属性的记录排序紧挨在一起,这样才能最好的显示出合并想要的效果。
* 因为此方法是拿第一个数据与后面的数据依次比较,
* 例如,第一条记录的projName与第二条记录的projName来进行比较,两者相同,则继续第一条记录的projName与第三条记录的projName来进行比较,
* 当不相同时,记录下此projName对应的值出现的次数,然后再开始从第三条记录的projName与第四条记录的projName来进行比较,依次循环下去,记
* 录下相同内容的值出现的次数,到时候,再根据这些次数来进行合并
*
* 此方法主要是先拿到每个同名属性的值的相等次数,把次数利用全局变量存下来
*
* @param datas --表格数据,一般为表格的rows数据
* @param startIndex --开始下标
* @param size --从开始下标起,到size结束,遍历合并多少个
* @param fieldName --计算算哪个列
* @param target --table表格对象
*/
function mergeCells(datas,startIndex,size,fieldName,target) {
//console.log("startIndex:"+startIndex+"size:"+size+"---合并列:"+fieldName)
//声明一个数组计算相同属性值在data对象出现的次数和
//这里不能使用map,因为如果涉及到排序后,相同的属性并不是紧挨在一起,那么后面的次数会覆盖前面的次数,故这里用数组
var sortArr = new Array();
for (var i = startIndex; i < size ; i++) {
for (var j = i + 1; j < size; j++) {
if (datas[i][fieldName] != datas[j][fieldName]){
//相同属性值不同
if (j - i > 1) {
sortArr.push(j - i);
i = j - 1;
//如果是最后一个元素 把最后一个元素的次数也装进去
if(i == size-1-1){
sortArr.push(1);
}
}else{
sortArr.push(j - i);
//如果j是最后一个元素 把最后一个元素的次数装进去
if(j == size - 1){
sortArr.push(1);
}
}
break;
}else {
//相同属性值相同 直到最后一次的时候才会装 否则在他们的值不同时再装进去
if (j == size - 1) {
sortArr.push(j - i+1);
//这里的赋值感觉有点多余 算了现就这个样子吧 不影响功能
i = j;
}
}
}
}
//遍历数组,将值装追加到对应的字符串后面
for(var prop in sortArr){
/*这里在ie8上运行的时候 出现坑 最好遍历数组不要用for in 这里我用了就懒得换了
下面加上如果prop是indexOf就停止 就解决了ie8出现的问题*/
if(prop == "indexOf"){
continue;
}
if(fieldName == "projName"){
var count = sortArr[prop] * 1;
projNameCount += count +",";
}
if(fieldName == "subProjName"){
var count = sortArr[prop] * 1;
subProjNameCount += count +",";
}
if(fieldName == "phaseName"){
var count = sortArr[prop] * 1;
phaseCount += count +",";
}
}
for(var prop in sortArr){
if(prop == "indexOf"){
continue;
}
if(fieldName == "projName"){
//console.log("进入projName--此时开始index-"+startIndex+"--结束index--"+(startIndex+sortArr[prop])*1);
startIndex = 0;
//subProjName每次进去的startIndex为前面次数的和
if(subProjNameCount.length>0){
//console.log("subProjNameCount-"+subProjNameCount);
var temp = subProjNameCount.substring(0,subProjNameCount.length-1);
var strArr1 = temp.split(",");
for(var i=0;i
var count = strArr1[i] * 1;
startIndex += count;
}
}
if(sortArr[prop] >1){
mergeCells(datas,startIndex,startIndex+sortArr[prop],"subProjName",target);
}else{
//当projName的次数为1就不进入循环
subProjNameCount +=1+",";
phaseCount +=1+",";
}
}
if(fieldName == "subProjName"){
startIndex = 0;
if(phaseCount.length>0){
//console.log("phaseCount-"+phaseCount);
var temp = phaseCount.substring(0,phaseCount.length-1);
//phaseCount = phaseCount + ",";
var strArr1 = temp.split(",");
for(var i=0;i
var count = strArr1[i] * 1;
startIndex += count;
}
}
if(sortArr[prop] >1){
//console.log("进入subProj--此时开始index-"+startIndex+"--结束index--"+(startIndex+sortArr[prop])*1);
mergeCells(datas,startIndex,startIndex+sortArr[prop],"phaseName",target)
}else{
phaseCount +=1+",";
}
}
}
}
上面就是完整的代码了,效果图如下:(此代码只需要计算projName,subProj,phase的合并就可以了,后面workitem不需要再合并了,因为后台查询的就是每一条workitem记录)
其中对于bootstrap-table自带的合并单元格的方法,也是很好用的,也是基于此基础上才能完成。$('#table').bootstrapTable('mergeCells',{index:index, field:"projName", colspan: 1, rowspan: count});
bootstrap表格某一列值相同时_Bootstrap-table实现动态合并相同行(表格同名合并)相关推荐
- 计算机考试行高怎么设置,2017年职称计算机考试WPS教程:表格行高列宽的调整...
2017年职称计算机考试WPS教程:表格行高列宽的调整 导语:在WPS教程中的表格行高列宽的调整是怎样的呢?下面我么一起来看看相关的具体操作是怎样的吧.更多相关内容请上应届毕业生考试网查询. 表格行高 ...
- 对合并后的excel表格进行删除重复值和简单的排版
一.前言 首先,今天我们分享的文章还是采用office工具来完成,本人对office又特殊的癖好,主要是在我看来office比wps更好用.更适用,或许这只是个人喜欢:其次,通过对上篇博客的分享学习, ...
- 【Axure视频教程】固定中继器表格首行首列
今天教大家在Axure里如何制作固定中继器表格首行首列的原型模板,包括固定首行(标题行)和首列.固定首行(标题行)和前两列两个案例,因为是用中继器表格制作的,所以使用也非常方便,我们只需要在中继器表格 ...
- excel 0不显示但是无法计算机,win10系统excel表格不显示0值的操作方法
有关win10系统excel表格不显示0值的操作方法想必大家有所耳闻.但是能够对win10系统excel表格不显示0值进行实际操作的人却不多.其实解决win10系统excel表格不显示0值的问题也不是 ...
- JavaScript学习笔记:动态添加与删除表格行
文章目录 一.添加表格行与单元格 二.动态删除表格行与单元格 三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...
- php怎么给table添加背景,怎样对table和td设置背景实现表格边框
很多朋友都很苦恼表格样式怎么设置,今天就给大家详细讲解一下css表格样式怎么设置,之前说过三种方法,只对table设置边框,对td设置边框,对table和td技巧性设置表格边框现在给大家带来怎样对ta ...
- xlsx表格怎么筛选重复数据_excel表格如何筛选重复数据 在Excel表格的两列数据中提取不重复值的四种方法...
excel表格如何筛选重复数据 在Excel表格的两列数据中提取不重复值的四种方法,最近到了季度汇报的时候,掌握一手excel技能在此刻显得多么重要,为了是你的excel看起来更高大上,今天教大家设置 ...
- html 两个时间戳相减,表格里两列时间点如何相减
EXCEL表中如何让两列时间相减 两列时间,格式是常规,显示如:24时20分,如果我直接相减(比如C1=A1-B时间是特殊的数值形式,直接相减即可 Excel版本参考:2010 测试数据在A1和A2单 ...
- 多种方法实现从Excel表格的两列数据中提取不重复(唯一)值
在Excel表格中有两列数据如何提取不重复值,即从两列中提取不重复(唯一)值,本文指将两列中所有相同行的两个单元格数据连接后去掉重复项.大家可以看到在下图的A.B两列中,有部分行两个单元格中的数据相同 ...
最新文章
- php上传文件后定时删除,PHP根据条件定时删除文件代码
- 基因组与数据整合:DNA应用开发正在临近
- yolo opencv_如何使用Yolo,SORT和Opencv跟踪足球运动员。
- linux 找不到php命令,bash scp:未找到命令的解决方法
- python 片段_python片段程序
- OpenWrt网络结构
- vc_redist 各版本下载地址
- 大规模分布式系统架构与设计实战
- freemarker 数组转字符串_freemarker中的split字符串分割
- 使用三目表达式的踩坑记录
- 微端服务器添加文件,微端服务器配置
- sign in 与 log in ;登陆与登录
- 社会保障卡读取基本文件数据
- 银内胆保温杯的功效和作用
- 启用Desktop Central Cloud:以SaaS方式拥抱UEM !
- ITE sdK自定义事件接收流程
- 江苏机器人竞赛南航_第十届江苏省大学生机器人大赛
- 怎样给黑白照片上色?2个技能教你如何给黑白照片上色
- 求用户最大连续登陆天数mysql实现
- CLRS 17.3势能法
热门文章
- VS2017 error C3646: 未知重写说明符
- java 怎么把list流化_Java 中的数据流和函数式编程
- spring el表达式 if else_vue指令集合:v-for,v-show,v-if等
- 图片压缩大小java_压缩图片大小(Java源码)
- php向数据库添加数据失败,无法从PHP中的表单向数据库添加数据
- mysql延迟注入br_(原创)安全狗SQL注入绕过思路[sql注入waf绕过][sql注入bypass]
- vim尾部空格标红显示插件
- 分布式是什么,集群又是什么呢
- atlas安装需要kafka吗_客厅吸顶灯安装方法你知道吗?安装需要注意什么
- 关于量子计算机论文,终于,科学家们找到了只有量子计算机才能解决的问题