效果如图:

js文件如下:

$(function () {
initTable() $('#load_vip').change(function () {
$
.ajax({
type: 'POST',
url: '/nginx/config/diff',
data: {'load_vip': $(this).val()},
dataType: 'json',
})
.done(res => {
$('#mytable').bootstrapTable('load', res.table_list);
mergeCells(res.table_list, "diff_result");
})
.fail(res => {
})
}) function mergeCells(data, fieldName) {
// 声明一个map计算相同属性值在data对象出现的次数和
var sortMap = {};
for (var i = 0; i < data.length; i++) {
for (var prop in data[i]) {
if (prop === fieldName) {
var key = data[i][prop];
if (sortMap.hasOwnProperty(key)) {
sortMap[key] = sortMap[key] * 1 + 1;
} else {
sortMap[key] = 1;
}
break;
}
}
}
var index = 0;
for (var prop in sortMap) {
var count = sortMap[prop] * 1;
$('#mytable').bootstrapTable('mergeCells', {
index: index,
field: fieldName,
colspan: 1,
rowspan: count
});
index += count;
}
} function initTable() {
var columnsdata = [[
{field: 'instance_ip', title: "实例ip", sortable: true, align: 'center'},
{field: 'load_vip', title: "负载vip", sortable: true, align: 'center'},
{field: 'role', title: "角色", sortable: true, align: 'center'},
{field: 'start_time', title: "进程开始时间", sortable: true, align: 'center'},
{field: 'init_num', title: "进程数量", sortable: true, align: 'center'},
{
field: 'verify',
title: "校验结果",
sortable: true,
align: 'center',
formatter: function (value, row, index) {
if (value === '待修改') {
return `<span class="label label-default">待修改</span>`
} else if (value === '校验通过') {
return `<span class="label label-success">校验成功</span>`
} else {
return `<span class="label label-danger">校验失败</span>`
}
}
},
{field: 'diff_result', title: "主备配置对比", align: 'center', valign: "middle"}],
[] // 这里columnsdata必须为数组嵌套数组,且第二个为空数组才会出现图上效果
]; //初始化表格,动态从服务器加载数据 $('#mytable').bootstrapTable({ cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) sortable: false, //是否启用排序 showColumns: false, //是否显示列筛选按钮 showRefresh: false, //是否显示刷新按钮 clickToSelect: false, //是否启用点击选中行 // uniqueId: "ID", //每一行的唯一标识,一般为主键列  columns: columnsdata, pagination: false, }); } });

html

<table id="mytable" style="font-size:10px;" class="table table-bordered table-striped"></table>

bootstrap-table存在合并单元格怎么处理数据的更多相关文章

  1. react antd Table动态合并单元格

    示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...

  2. python-利用xlrd模块中读取有合并单元格的excel数据

    前言 对于excel中有合并单元格的情况,合并的单元格只能取到第一个单元格的值,合并的单元格后面的单元格内容的值为空,针对这个情况,写了下面一段代码实现, 对单元格进行判断,如果是传入的索引是合并单元 ...

  3. react ,ant Design UI中table组件合并单元格并展开详情的问题

    需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢?  单元格合并?  还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...

  4. 给bootstrap table设置行列单元格样式

    1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...

  5. jQuery_easyUI 合并单元格 (DataGrid 数据表格)

    <table id="dg" style="height:350px;z-index:-5555; " class="easyui-datagr ...

  6. css table之合并单元格

    colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...

  7. display:table表格合并单元格

    直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  8. table JS合并单元格

    function _w_table_rowspan(_w_table_id,_w_table_colnum){ _w_table_firsttd = ""; _w_table_cu ...

  9. html table动态合并单元格 js方法

    <script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...

随机推荐

  1. javascript逻辑判断与循环笔记

        短路运算(逻辑中断)     1.短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果的时候就不再继续运算右边的表达式的值     2.逻辑与 &&     如果 ...

  2. Tomcat Windows 开机自启

    在命令提示符中,进入 tomcat 的 bin 目录,执行命令,注册服务 service.bat install 在"服务"中,将 tomcat 服务设为自动

  3. Django中间件之实现Admin后台IP白名单

    Django自带的Admin管理后台很方便,但是实际生产环境真的会有挺多安全问题的,在admin的安全防护这方面,我之前就研究实现了给admin加上登录验证码和限流功能,可以参考这篇文章: 不过就在内 ...

  4. 敏捷工具:Scrum板与Kanban如何抉择?敏捷工具:Scrum板与Kanban如何抉择?

    Scrum板作为一种工具,主要应用于Scrum团队的敏捷项目管理,能够帮助团队更新任务进度,促进团队信息共享,及时发现任务过程中的异常现象,从而查漏补缺.团队在每日站会时会通过Scrum板来直观地展示 ...

  5. C#LeetCode刷题之#859-亲密字符串​​​​​​​​​​​​​​(Buddy Strings)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3973 访问. 给定两个由小写字母构成的字符串 A 和 B ,只要 ...

  6. MyBatis使用LocalDateTime遇到的一系列问题

    问题 在Mybaits中传入参数为LocalDateTime,查询发现结果集为空,插入时发现时间相差13小时 测试 新建工程,新建测试库(主要此处新工程使用的JDBC为mysql-connector- ...

  7. SpringMVC常见问题Error configuring application listener of class org.springframework.web.context.ContextLoaderListenejava.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener

    六月 20, 2018 9:43:34 下午 org.apache.catalina.core.StandardContext listenerStart 严重: Error configuring ...

  8. 微信小程序setData局部刷新列表

    利用setData局部刷新列表 当列表管理加载到第几页时,这个list的数据有十几条的,如果重新setData的话就要重新刷新和渲染列表, 这是个比较麻烦的事,当数据量大时,就会造成白屏, 这时就要局 ...

  9. J20航模遥控器开源项目系列教程(二)使用说明 | 遥控器制作完成了,怎么用?

    我们的开源宗旨:自由 协调 开放 合作 共享 拥抱开源,丰富国内开源生态,开展多人运动,欢迎加入我们哈~ 和一群志同道合的人,做自己所热爱的事! 项目开源地址:https://github.com/C ...

  10. 第7章 Spark SQL 的运行原理(了解)

    第7章 Spark SQL 的运行原理(了解) 7.1 Spark SQL运行架构 Spark SQL对SQL语句的处理和关系型数据库类似,即词法/语法解析.绑定.优化.执行.Spark SQL会先将 ...