单元格动态合并
前言
需求是第一生产力。实际业务中的表格往往各具特色的复杂,N行N列的简单表格基本满足不了需求。今天跟大家分享的“成果”就来源于实际项目需求。因为我的项目基于MINIUI开发,所以这是一个站在巨人肩膀上的果实。但也不局限于仅仅在MINIUI上才能使用,分享的是合并单元格的一种生成思路。只要您能满足以下三个条件同样也能变着法儿地适用:①能取得表格中所有数据;②能取得指定行列数数据;③能够渲染表格。
演示地址:http://chenhongen.github.io/MergeCells/
一、需求描述
将单个单个填有相同值的单元格合并展示,延伸的说即单元格合并,只要你讲想要合并的单元格填入相同值即可被合并。一般的表格控件也都开发了静态合并单元格的功能,在此基础上实现动态合并就相对容易,只要你自己制定一定的规则。
二、思路剖析
基本规则:*相同值合并*;更多规则参见演示地址小标题。
基本合并情况可分为3种:行合并、列合并、块合并。
对于一个单独的单元格而言,有且仅有这3种之一的情况。那么如果它同时既满足行合并又满足列合并呢?是行合并还是列合并呢?规则是我们自己定的,在多种条件都满足的情况,你可以根据条件限制来维持你的规则。比如以上这种情况,我定义的规则是只列合并不行合并。)
当你能取到所有数据(数组形式),又能取到单个数据时,同时往X轴、Y轴方向循环遍历推进,生成需要合并的JSON数组传值给静态合并。
当然,实际情况远远不止这些,详细的还是请大家看我的源码。这里提一点就是,有的时候在一张表格中,虽然他们值相同,但是你不想将其合并(如都是空白格的)。这个时候你可以给想要合并的单元格嵌套一层HTML标签,如:<i></i>、<span></span>等等。在取到单元格数据、合并之前判断数值是否包含标签来决定最终是否合并。
三、衍生handsontable
handsontable是一款开源的、效果近似Execl表格控件。下载它的demo后可看到有一个静态合并的例子:merge_cells.html。
也是通过传递指定格式的JSON数组实现的静态合并。我们可以通过以上的思路在后台构件好JSON数组后返回复制给hot.mergeCells这个变量同样也可以实现合并单元格效果。
JAVA WEB
java web开发之路
推荐阅读
jodconvert的亚子
F项目需要滚动播放视频、文档(Excel/Word...)功能,使用jodconverter将文档转成pdf,结合pdfjs实现。由于个人独立开发,只要结果,故选型自由。后端Spring boot,前端阿里飞冰。可以直接使用jodconverter的starter:
花田土著赞 1阅读 4.3k
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 31阅读 7.1k评论 5
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 19阅读 2k评论 2
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 1.9k
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!
SegmentFault思否赞 20阅读 5.6k评论 10
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...
边城赞 18阅读 7.6k评论 3
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...
原谅我一生不羁放歌搞文艺赞 14阅读 19.8k评论 9
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。