bootstrap-table存在合并单元格怎么处理数据
效果如图:
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存在合并单元格怎么处理数据的更多相关文章
- react antd Table动态合并单元格
示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...
- python-利用xlrd模块中读取有合并单元格的excel数据
前言 对于excel中有合并单元格的情况,合并的单元格只能取到第一个单元格的值,合并的单元格后面的单元格内容的值为空,针对这个情况,写了下面一段代码实现, 对单元格进行判断,如果是传入的索引是合并单元 ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- 给bootstrap table设置行列单元格样式
1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...
- jQuery_easyUI 合并单元格 (DataGrid 数据表格)
<table id="dg" style="height:350px;z-index:-5555; " class="easyui-datagr ...
- css table之合并单元格
colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...
- display:table表格合并单元格
直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...
- table JS合并单元格
function _w_table_rowspan(_w_table_id,_w_table_colnum){ _w_table_firsttd = ""; _w_table_cu ...
- html table动态合并单元格 js方法
<script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...
随机推荐
- 微信小程序--家庭记账小账本(三)
家庭记账小账本打算先通过微信小程序来实现,昨天就去注册了解了一下微信小程序,感觉比较复杂而且困难.如何将ecplise源代码与小程序连接,如何建立数据库等等都困扰了我.查阅网上的资料也没有很大的进展. ...
- Java日志框架(二)
最流行的日志框架解决方案 按笔者理解,现在最流的日志框架解决方案莫过于SLF4J + LogBack.其有以下几个优点: LogBack 自身实现了 SLF4J 的日志接口,不需要 SLF4J 去做进 ...
- 代码生成器插件与Creator预制体文件解析
前言 之前写过一篇自动生成脚本的工具,但是我给它起名叫半自动代码生成器.之所以称之为半自动,因为我觉得全自动代码生成器应该做到两点:代码生成+自动绑定.之前的工具只做了代码生成,并没有做自动绑定,所以 ...
- Springboot常用的注解
1.@Controller主要用来修饰类,用来处理http请求 2.@ResponseBody主要用来修饰类和方法.返回字符串和json数据,不用来返回模板. 3.@RestController主要用 ...
- C#LeetCode刷题之#598-范围求和 II(Range Addition II)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3881 访问. 给定一个初始元素全部为 0,大小为 m*n 的矩阵 ...
- web安全之python延时注入
通过python代码编写的一个延时的sql注入脚本 首先我们导入了request请求库和string类型的库,通过库我们可以通过访问请求的方式访问url链接. url链接为注入链接地址这里我随便写的一 ...
- NumPy速查笔记(持续更新中)
目录 1 总览 2 ndarray 3 常用API 3.1 创建ndarray (1)将Python类似数组的对象转化成Numpy数组 (2)numpy内置的数组创建 (3)从磁盘中读取标准格式或者自 ...
- 面试中的老大难-mysql事务和锁,一次性讲清楚!
众所周知,事务和锁是mysql中非常重要功能,同时也是面试的重点和难点.本文会详细介绍事务和锁的相关概念及其实现原理,相信大家看完之后,一定会对事务和锁有更加深入的理解. 本文主要内容是根据掘金小册& ...
- HBA卡常用命令
HBA卡信息查看 查看对应的PCI设备lspci | grep LSI 如下:对应的HBA卡命令为sas3ircu 如下:对应的HBA卡使用sas2ircu 查看LSI控制器类型和型号 sas2irc ...
- kolla快速集成openstack-ocata和opencontrail-4.0.1.0单节点
参考链接: kolla快速集成openstack-ocata和opencontrail-4.0.1.0单节点 https://github.com/Juniper/contrail-docker/wi ...