bootstrap 合并单元格之mergeCells属性合并

bootstrap 合并单元格之mergeCells属性合并bootstrap合并单元格之mergeCells属性合并合并单元格有多种实现方式本文是根据bootstrap自带的mergeCells属性实现的单元格合并,原理是根据有规律的排序数据然后在展示层根据数据行数合并,这样的劣势是数据一定要有规律事先要排序还有一种是比较灵活的是事先处理好数据合并成一行,然后自己去展示层设计怎么展示,而且不用考虑分页问题,详情在我的…

大家好,又见面了,我是你们的朋友全栈君。

bootstrap 合并单元格之mergeCells属性合并

合并单元格有多种实现方式  本文是根据bootstrap 自带的mergeCells属性实现的单元格合并,

原理是根据有规律的排序数据  然后在展示层根据数据行数 合并,这样的劣势是 数据一定要有规律  事先要排序

还有一种是比较灵活的 是事先处理好数据合并成一行,然后自己去展示层设计怎么展示,而且不用考虑分页问题 ,详情在 我的另一篇文章 bootstrap 合并单元格

很简单的合并 不过还要考虑分页问题   不过还是要注意排序 在请求返回数据时 必须保准需要的数据有规律的排序

onLoadSuccess: function (data) {
			mergeCells(data,  1, $('.bootstrap-table'));
		},

onLoadSuccess  意思是数据加载成功时触发

function mergeCells(data, colspan, target) {
    
    //设置初始行数
	var num =0;
	
    for (var i = 0; i < data.rows.length; i++) {
        //这其实就是bootstrap的mergeCells属性 自带的合并单元格
    	  $(target).bootstrapTable('mergeCells', {index: num, field: 'orgName', colspan: 1, rowspan: 2});
		  $(target).bootstrapTable('mergeCells', {index: num, field: 'merchantId', colspan: 1, rowspan: 2});
		  $(target).bootstrapTable('mergeCells', {index: num, field: 'checkDate', colspan: 1, rowspan: 2});
            //我这里是设置每两行合并
		  num =num+2;
     
    }
}

 

然后我们来看看效果

bootstrap 合并单元格之mergeCells属性合并

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/125032.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • sqlite database browser 下载_SQLiteDeveloper

    sqlite database browser 下载_SQLiteDeveloper介绍一个SQLitepc端工具,可以查看SQLite

  • 一个中科大差生的8年程序员工作总结

    一个中科大差生的8年程序员工作总结今年终于从大菊花厂离职了,离职前收入大概60w不到吧,在某乎属于比较差的,今天终于有空写一下自己的职场故事,也算是给自己近8年的程序员工作做个总结复盘。近8年有些事情做对了,也有更多事情做错了,在这里记录一下,希望能够给后人一些帮助吧,也欢迎私信交流。文笔不好,见谅,有些细节记不清了,如果有出入,就当是我编的这个故事吧。PS:有几个问题先在这里解释一下,评论就不一一回复了1、关于差生,我本人在科大时确实成绩偏下,差生主要讲这一点,没其他意思。2、因为买房是我人生中的大事,我认为需要记录和总结一下

    2022年10月16日
  • idea激活码永久【注册码】

    idea激活码永久【注册码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • datagrip 2021.5激活码[在线序列号]

    datagrip 2021.5激活码[在线序列号],https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • idea 2021.11.3激活码_最新在线免费激活

    (idea 2021.11.3激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~09…

  • ffmpeg h264解码器提取

    ffmpeg h264解码器提取ffmpeg包含了很多的音视频解码器,本文试图通过对ffmpeg的简单分析提取h264解码器.使用ffmpeg解码可以参考ffmpeg源码下的doc/examples/decoding_encoding.c 1.首先设置解码器参数(avcodec_find_decoder(CODEC_ID_H264)将decode函数指针为h264_decoder,即

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号