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 = ...
随机推荐
- “随手记”开发记录day04
今天完成了添加收入和支出的页面,其实挺简单的就是里面的那个图表有些难搞,你得把每个图标和文字对应起来 挺费事的 话不多说,上效果 其中点击旋转按钮转换收入支出是我们找了好久才找出来这个方法的,太不容易 ...
- C语言学习笔记之数组与指针的关系
首先,大家先需知道一个关于基类型的概念 基类型:组成一个新类型的基础类型 这句话是什么意思呢?举个例子: int a[3] = {1,2,3}; 上面是由三个int类型的数组成一个新的类型也就是数组, ...
- spring boot项目集成zuul网关
1 zuul简介 Zuul 的官方介绍是 “Zuul is the front door for all requests from devices and web sites to the back ...
- 内网 Maven 编译
内网 Maven 编译 有个特殊的需求,在不联网的情况下编译 Java 项目. 想到两种方案: 搭建 Nexus 私有镜像仓库. 直接把依赖 jar包 放在编译机的 maven 本地库中. 步骤简述 ...
- java 模拟斗地主发牌洗牌
一 模拟斗地主洗牌发牌 1.案例需求 按照斗地主的规则,完成洗牌发牌的动作. 具体规则: 1. 组装54张扑克牌 2. 将54张牌顺序打乱 3. 三个玩家参与游戏,三人交替摸牌,每人17张牌,最后三张 ...
- IDEA 非常重要的一些设置项 → 一连串的问题差点让我重新用回 Eclipse !
开心一刻 建筑行业内,我看过的最凶残笑话(IT行业内好一致!) 上联:一天晚上两个甲方三更半夜四处催图只好周五加班到周六早上七点画好八点传完九点上床睡觉十分痛苦 下联:十点才过九分甲方八个短信七个电话 ...
- 搭建Elasticsearch Logstash Kibana 日志系统
分布式系统下由于日志文件分布在不同的系统上,分析比较麻烦,通过搭建elk日志系统,可快速排查日志信息. Elasticsearch是大数据处理框架,使用的分布式存储,可存储海量数据:基于Lucense ...
- 震惊!ConcurrentHashMap里面也有死循环,作者留的“彩蛋”?
JDK BUG 这篇文章,聊一下我最近才知道的一个关于 JDK 8 的 BUG 吧. 首先说一下我是怎么发现这个 BUG 的呢? 大家都知道我对 Dubbo 有一定的关注,前段时间 Dubbo 2.7 ...
- 浅谈个人学DP的经历和感受
动态规划的定义! 首先,我们看一下官方定义:定义:动态规划算法是通过拆分问题,定义问题状态和状态之间的关系,使得问题能够以递推(或者说分治)的方式去解决.动态规划算法的基本思想与分治法类似,也是将待求 ...
- IOS 单例崩溃分析 2014-12-10 15:46:36
单例模式是常用的模式,但是在单例应用中偶或引发崩溃让人匪夷所思.其实真的是单例引起的吗?未必.但是现象都指向了是单例引起的.今天我亲身经历了看似崩溃在单例上的一个例子,但实则不是,今天做个记录用于今后 ...