欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

单元格动态合并

程序员文章站 2022-06-08 16:03:48
...

前言

需求是第一生产力。实际业务中的表格往往各具特色的复杂,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这个变量同样也可以实现合并单元格效果。

项目地址:https://github.com/chenhongen...