bootstrap-table动态合并相同行和列的方法

先看看效果：

var getData = ctx + "demo/table/list";$("#table").bootstrapTable({dataType : "json",method : 'post',cache : false,url : getData,columns : [{checkbox : true},{field : 'userId',title : '用户ID'},{field : 'userCode',title : '用户编号'},{field : 'userName',title : '用户姓名'},{field : 'userPhone',title : '用户手机'},{field : 'userEmail',title : '用户邮箱'},{field : 'userBalance',title : '用户余额'},{title : '操作',align : 'center',formatter : function(value, row, index) {var actions = [];actions.push('<a class="btn btn-danger btn-xs" href="javascript:;" onclick="remove(this)"><i class="fa fa-remove"></i>删除</a>');return actions.join('');}} ],onLoadSuccess : function(data) {var data = $('#table').bootstrapTable('getData', true);//合并单元格mergeCells($('#table'), data, "userName", 1);mergeCells($('#table'), data, "userPhone", 1);mergeCells($('#table'), data, "userEmail", 1);//mergeColspan($('#table'), data, [ "userId","userCode" ]);//列合并}});/*** 合并行* @param data 原始数据(在服务端完成排序)* @param fieldName 合并属性名称* @param colspan 合并列* @param target 目标表格对象*/function mergeCells(target, data, fieldName, colspan) {//声明一个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;}}}for ( var prop in sortMap) {console.log(prop, sortMap[prop])}var index = 0;for ( var prop in sortMap) {var count = sortMap[prop] * 1;$(target).bootstrapTable('mergeCells', {index : index,field : fieldName,colspan : colspan,rowspan : count});index += count;}}/*** 合并列* @param data  原始数据（在服务端完成排序）* @param fieldName 合并属性数组* @param target    目标表格对象*/function mergeColspan(target, data, fieldNameArr) {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});}}

bootstrap-table动态合并相同行和列的方法相关推荐

Table中合并相同内容列+Excel中合并相同内容列。
Table中合并相同内容列的方法比较好办,网上代码也很多,参照了一些把它封装成jquery 插件,调用起来还是蛮好用的. 这个地方稍微修改了下,有的时候td中内容虽然一样,但是数据库中的value却是 ...
java导出Excel(POI模式 Ajax下载 Post传参) bootstrap table getVisibleColumns获取显示的列
工具类 (正式使用) package com.qyj.utils;import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson. ...
bootstarp js设置列隐藏_bootstrap table getHiddenColumns获取隐藏的列的方法
bootstrap table getHiddenColumns获取隐藏的列的方法 bootstrap table getHiddenColumns获取表格隐藏的列,即获取哪些列当前不可见的列,因为有 ...
bootstrap table 动态列数据加载（一）
bootstrap table 动态列数据加载(一) 我想把所有的收费项目作为表头,不固定死收费项目,数据库中有啥就显示啥. 动态数据加载时,不能用bean的嵌套,源码中加载表头和数据是分开的,第几列 ...
php列出mysql表格,php列出mysql表所有行和列的方法
本文实例讲述了php列出mysql表所有行和列的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: Selecting Data $user = "root"; ...
pandas drop 删除行和列的方法
pandas drop 删除行和列的方法文章目录 pandas drop 删除行和列的方法删除行按行索引删除删除单行删除多行删除列按列索引删除(列本来是没有索引的,用df.columns ...
[转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
bootstrap table 怎么实现前两列固定冻结？
$("#Table").bootstrapTable('destroy').bootstrapTable({pagination: true,//分页minimumCountCol ...
pandas 选取行和列的方法
本文介绍在 pandas 中如何读取数据行列的方法.数据由行和列组成,在数据库中,行被称作记录 (record),列被称作字段 (field).回顾一下我们对记录和字段的获取方式:比较常见的,字段根据 ...
table 表格合并行或列
合并单元格 <table><tbody><tr><th colspan="2">我是占位符</th><th col ...

bootstrap-table动态合并相同行和列的方法

bootstrap-table动态合并相同行和列的方法相关推荐

最新文章

热门文章