bootstrapTable实现合并相同列(fastadmin框架同样使用)

BootstrapTable 相同内容的数据单元格动态合并 BootstrapTable 相同内容的数据单元格动态合并 未合并前效果图: 表格初始化代码: $(function () { var options = { url: prefix + "/list", createUrl: prefix + "/add/{id}", exportUrl: prefix + "/export", updat.. 阅读详情

方法:调用mergeCells(data, fieldName, target),可以实现合并相同列


                var table = $("#table");

                // 初始化表格
                table.bootstrapTable({
                    url: $.fn.bootstrapTable.defaults.extend.index_url,
                    pk: 'id',
                    sortName: 'update_time',
                    search: false,
                    toolbar: '#toolbar',
                    commonSearch: true,
                    pageSize : 12,
                    searchFormVisible: true,
                    queryParams: function (params) {
                        //这里可以追加搜索条件
                        var filter = JSON.parse(params.filter);
                        var op = JSON.parse(params.op);
                        //这里可以动态赋值,比如从URL中获取admin_id的值,filter.admin_id=Fast.api.query('admin_id');
                        // filter.admin_id = 1;
                        if(filter.is_bujiao=='是')
                            filter.is_bujiao=1
                        if(filter.is_bujiao=='否')
                            filter.is_bujiao=0
                        op.username = "like";
                        params.filter = JSON.stringify(filter);
                        params.op = JSON.stringify(op);
                        return params;
                    },
                    columns: [
                        [  
                        {field: 'total_order_id', title: '总订单号',sortable: true,width: "150px",formatter: Table.api.formatter.search}
                        ]
                    ],
                    // 合并表格
                    onLoadSuccess: function (data) {
                        mergeCells(data, "total_order_id", $("#table"));
                        // 多个表格合并
                        // mergeCells(data, "total_order_id2", $("#table"));
                    },
                });

                // 为表格绑定事件
                Table.api.bindevent(table);

/**
 * 合并相同列
 * @param data  原始数据(在服务端完成排序)
 * @param fieldName 合并属性数组
 * @param target    目标表格对象
 */
function mergeCells(data, fieldName, target) {
    setTimeout(function () {
        if (data.rows.length == 0) {
            return;
        }
        var numArr = [];
        var number=0;
        var classzhi='dan';
        if( data.rows.length>1){
            for (let i = 0; i < data.rows.length; i++) {
                if(data.rows[i][fieldName]!='' && data.rows[i][fieldName]!='-'){
                    if(data.rows[i-1]){
                        if(data.rows[i-1][fieldName]!='' && data.rows[i-1][fieldName]!='-'){
                            if(data.rows[i-1][fieldName]==data.rows[i][fieldName]){
                                number++
                            }
                            else{
                                number=number+1
                                numArr.push({index:i-number,number:number,pan:'1'})
                                number=0
                            }
                        }
                    }
                    if(!data.rows[i+1]){
                        number=number
                        numArr.push({index:i-number,number:number+1,pan:'2'})
                        number=0
                    }else{
                        if(data.rows[i+1][fieldName]=='' || data.rows[i+1][fieldName]=='-'){
                            number=number
                            numArr.push({index:i-number,number:number+1,pan:'3'})
                            number=0
                        }
                    }
                }else{
                    numArr.push({index:i,number:1,pan:'4'})
                }
            }
        }else{
            numArr.push({index:0,number:1,pan:'5'})
        }
        // console.log(numArr);
        for (let x = 0; x < numArr.length; x++) {
            if(x%2){
                for(let y=0;y<numArr[x]['number'];y++){
                    $(target).children('tbody').children('tr').eq(numArr[x]['index']+y).css('background','#ccc')
                }
            }else{
                for(let y=0;y<numArr[x]['number'];y++){
                    $(target).children('tbody').children('tr').eq(numArr[x]['index']+y).css('background','#FFF')
                }
            }
            $(target).bootstrapTable('mergeCells', { index: numArr[x]['index'], field: fieldName, colspan: 1, rowspan: numArr[x]['number']});
        }
    },0)
}
fastdmin数据表格顶部添加合并行/底部合计行并且改变颜色 直接在新添加一个数据就可以,并且支持colspan属性来合并表格。我是直接在循环里面单独查询的,也可以直接结算好在前端不做循环计算。1.底部行需要单独写html代码,通过for循环做计算。2.需要的数据自行从控制器计算渲染到页面就可以获取到了。 阅读详情

相关推荐

编写SSH选课系统记录——bootstrap-table父子表的实现以及x-editable的使用

在编写选课系统的过程中,在如何展现课程对象和课程安排对象之间的关系这一方面,我采用了bootstrap-table中的父子表来实现。 考虑到自己学校的课程安排情况:同一个课程,会在不同的地点上课(机房/教室),有可能是两个老师授课,且一般都是一堂课持续两节(别的学院的实验课会持续整个半天)。 故一个课程可以对应多个课程安排。可以是在不同的地点、不同的时间、或者不同的老师。 我记得我们选选修课时,是...

weixin_40422360的博客 579

FastAdmin增加bootstrap-table-fixed-columns冻结表头,及完善排序、列宽、合并行等问题

使用FastAdmin快速创建应用管理系统有一段时间了,不得不说在一些中小型应用领域使用起来非常快捷、有效和实用,对于一些需要前期快速验证的项目也会是很好的选择。闲言少叙,以下总结最近一个表格前端效果的实战经验。 FastAdmin使用bootstrap-table作为前端表格的基础组件库,通常列表交互展示已经够用了,包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结,找...

穿拖鞋写程序 4950

php通过array_merge()函数合并两个数组的方法

本文实例讲述了php通过array_merge()函数合并两个数组的方法。分享给大家供大家参考。具体分析如下: php通过array_merge()函数合并两个数组,array_merge()是一个php函数,用于将两个或者多个数组合并,后一个数组会追加到前一个数组后面,并返回结果数组。它接受两个或两个以上的数组,并返回一个包含了所有元素的数组。 $first = array("aa", "bb", "cc"); $second = array(11,22,33); $third = array_merge($first, $second); foreach ( $third as $val

bootstrapTable实现合并相同行(fastadmin框架同样使用)

方法:调用mergeCells(data, fieldName, target),可以实现合并相同行 var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootst...

qq_40591925的博客 2481

Latex在VSCODE中编译报错`Recipe terminated with error. Retry building the project.

Latex在VSCODE中编译报错Recipe terminated with error. Retry building the project. 1 报错提示: Recipe terminated with error 2 报错原因 大概率的原因是因为latex没有添加到系统环境变量中,所有设置的编译工具没有办法找到才出现的这种情况 3 解决方案 请按照如下方式进行系统变量的添加 对windows,win+R 然后输入sysdm.cpl 在高级中选择环境变量 找到path环境变量,将txtlive中

呆呆象呆呆的博客 3万+

Fastadmin 子级菜单展开合并,分类父级归纳

这里踩过一个坑,fastadmin默认的展开合并预定义处理的变量是pid。所以建表时父级id需要是pid;当然不是pid也没关系,笔者这里是classify_id,多加一步处理一样能实现。

withoutfear的博客 1379

盘点天才少年稚晖君彭志辉的知识体系

一个杰出工程师的工作区间和装备

曲折旅程,艰难人生 2万+

FastAdmin table 跨行跨列处理

其中,在表头 columns 定义处,通过 rowspan 、colspan 来定义跨行跨列。在数据加载完成后,调用 mergeCellTable 方法,用于对列表数据跨行跨列处理。注意,列表数据从 index 序号 0 开始,field 用于定义涉及的表头字段。在开发中,需要对表格跨行跨列处理,也就是说,需要合并单元格;因此每项都是一行,如果有多项,你需要在 columns 中定义多个表头。另外,不管表头定义多少行,返回的结果,始终是一行表示所有表头。

tiger_web0的博客 765

win10+conda+pytorch-gpu安装

pytorch 官网上只有linux和Mac的程序包,没有windows系统的,但是windows系统还是可以用pytorch的。  github: https://github.com/peterjc123/pytorch-scripts 首先要安装anaconda: 推荐清华镜像 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ ...

一摩尔自由的博客 1万+

大数据知识面试题-Hadoop(2022版)

序列号 内容 链接 1 大数据知识面试题-通用(2022版) 待续… 2 大数据知识面试题-Hadoop(2022版) 待续… 3 大数据知识面试题-MapReduce和yarn(2022版) 待续… 4 大数据知识面试题-Zookeepr (2022版) 待续… 5 大数据知识面试题-Hive (2022版) 待续… 6 大数据知识面试题-Flume(2022版) 待续… 7 大数据知识面试题-Hbase(2022版) 待续… 8 大数据知识面试题-sqoop(....

拉格朗日的学习笔记 1万+

bootstraptable 动态合并列

实际C#项目中经常会涉及到需要对本地Excel文件进行操作,特别是一些包含数据记录、分析、汇总功能模块的项目。常用的操作Excel文件的方法主要有三个: 1. OleDb: 这种方式是把整个Excel文件当做一个数据源来进行数据的读取操作。 优点:实现方式简单,读取速度快; 缺点:读取Excel数据的过程不太灵活,对内存的占用比较高,当数据量变的很大时,容易由于内存空间不足导致内存溢...

2733

什么是 SAP PCE?

SAP Private Cloud Edition 是一种基于云计算的部署模式,它结合了公有云的灵活性和私有云的安全性,为企业提供了量身定制的云服务。在 PCE 环境中,SAP 托管和维护客户的应用系统(如 SAP S/4HANA、SAP SuccessFactors 或 SAP BW/4HANA),同时客户拥有更高的定制化权限。专属环境:每个客户在云中拥有独立的资源,这保障了更高的安全性和性能。全面托管:SAP 提供基础架构、系统管理和更新服务,降低了客户的运维成本。灵活扩展。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 2246

bootstrap表格动态合并行和列

/ 获取bootstrap的加载完毕的数据,dataList为表格id,mergeCells为boostrap自带的方法。//这其实就是bootstrap的mergeCells属性 自带的合并单元格。bootstrap表格数据加载完成是触发mergeCells()方法。// 初始化合并索引。

qq_54378364的博客 3331

第9章:Embedding、Pooling 与检索增强基础

本文介绍了律师事务所如何利用vLLM构建法律文档RAG系统,解决传统关键词检索在语义匹配上的不足。主要内容包括: 项目背景:传统Elasticsearch检索在法律术语上的低准确率问题,及多模型维护的复杂性; 技术方案:采用vLLM统一支持生成和向量化能力,通过语义向量检索提升相关性; 关键实现: 用vLLM的Embedding端点处理文档向量化 构建包含离线索引和在线检索的完整RAG流程 采用余弦相似度进行语义匹配 实践建议:切片大小选择、向量归一化处理、不同场景下的数据库选型等。

davidwang456的专栏 60

100天精通Python(基础篇)——第22天:eval 函数基础以及危险警告

1. eval()函数的概念 2. eval()函数语法 3. 命名空间 4. 使用实例 1. 基本的数学运算 2. 字符串重复 3. 将字符串转换成列表 4. 将字符串转换成字典 5. 将字符串转成元祖 6. 与其它函数结合使用 7. globals参数案例 8. locals参数案例 5. eval函数的危险之处(重中之中)

努力让自己发光,对的人才能迎着光而来 15万+

bootstrap表格动态合并列

bootstrap表格动态合并列 function mergeCells(data, fieldName, colspan, target, sameFiled) { var sortMap = {}; for (var i = 0; i < data.length; i++) { for (var prop in data[i]) { if (prop == fieldName) {

weixin_46389242的博客 1784

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

bootstraptable合并列

合并列

somdip的博客 1234

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

【Bootstrap Table】表格列合并 && 设置表格内容为勾选框

效果:1.列合并: 1.1写在$('#bootstrap-table').bootstrapTable中 onLoadSuccess: function () {//当所有数据被加载时触发处理函数 var data = $('#bootstrap-table').bootstrapTable('getData', true);//获取当前页数据 mergeCells(data,'number',1,$('#bootstrap-table'

请赐教 1415

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

table.bootstrapTable动态合并行和列方法

【代码】table.bootstrapTable动态合并行和列方法。

qq_42270198的博客 958

table根据相同内容动态合并单元格

4、最开始的时候在网上找了很多种方法,都涉及到用var tb= document.getElementId('tb)来获取table数据,但是尝试了多种方法都无法获得tb.rows的数据,因此放弃用获取ID的方式。本篇中记录的方式是亲测有用的。

cyx924的博客 2288

bootstrap table实现合并单元格效果(亲测有效)

在bootstrapTable加载成功执行,如。

bingmoujs的博客 1792

bootstrap-table 两列对应合并

1、获取数据后先进行排序 // 表格数据处理 function compare(property) { //数组排序 return function(a, b) { var value1 = a[property]; var value2 = b[property]; return value1 - value2; } } var mould = res.resul...

weixin_42575028的博客 2618

fastadmin phpOffice exlcel 常用操作

【代码】fastadmin phpOffice exlcel 常用操作。

calix1818的博客 486

bootstrap 合并表格

@param data 原始数据(在服务端完成排序)* @param fieldName 合并属性数组。* @param target 目标表格对象。

qq_30863945的博客 670

bootstrap-table 合并单元格

if (value!= lock) { // 上一个值与当前值不一致时需要重新设置key。* @param {*} condition 根据哪个条件进行合并,可忽略,默认使用fieldName值。* @param {*} fieldName 需要合并的字段名同表格配置的field值。//声明一个map计算相同属性值在data对象出现的次数和。* @param {*} colspan 合并多少列。* @param {*} target 表格实例。* @param {*} data 表格数据。

qq_33275928的博客 1323
上一篇: Fastadmin操作栏按钮自定义添加及条件限制隐藏显示
下一篇: php工作中常用的方法总结
withoutfear
博客等级 码龄13年 541粉丝 79原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值