单元格动态合并

前言

需求是第一生产力。实际业务中的表格往往各具特色的复杂，N行N列的简单表格基本满足不了需求。今天跟大家分享的“成果”就来源于实际项目需求。因为我的项目基于MINIUI开发，所以这是一个站在巨人肩膀上的果实。但也不局限于仅仅在MINIUI上才能使用，分享的是合并单元格的一种生成思路。只要您能满足以下三个条件同样也能变着法儿地适用：①能取得表格中所有数据；②能取得指定行列数数据；③能够渲染表格。演示地址：http://chenhongen.github.io/MergeCells/

一、需求描述

将单个单个填有相同值的单元格合并展示，延伸的说即单元格合并，只要你讲想要合并的单元格填入相同值即可被合并。一般的表格控件也都开发了静态合并单元格的功能，在此基础上实现动态合并就相对容易，只要你自己制定一定的规则。

二、思路剖析

基本规则：*相同值合并*；更多规则参见演示地址小标题。基本合并情况可分为3种：行合并、列合并、块合并。对于一个单独的单元格而言，有且仅有这3种之一的情况。那么如果它同时既满足行合并又满足列合并呢？是行合并还是列合并呢？规则是我们自己定的，在多种条件都满足的情况，你可以根据条件限制来维持你的规则。比如以上这种情况，我定义的规则是只列合并不行合并。）当你能取到所有数据（数组形式），又能取到单个数据时，同时往X轴、Y轴方向循环遍历推进，生成需要合并的JSON数组传值给静态合并。当然，实际情况远远不止这些，详细的还是请大家看我的源码。这里提一点就是，有的时候在一张表格中，虽然他们值相同，但是你不想将其合并（如都是空白格的）。这个时候你可以给想要合并的单元格嵌套一层HTML标签，如：、等等。在取到单元格数据、合并之前判断数值是否包含标签来决定最终是否合并。

三、衍生handsontable

handsontable是一款开源的、效果近似Execl表格控件。下载它的demo后可看到有一个静态合并的例子：merge_cells.html。也是通过传递指定格式的JSON数组实现的静态合并。我们可以通过以上的思路在后台构件好JSON数组后返回复制给hot.mergeCells这个变量同样也可以实现合并单元格效果。

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

关键字：JavaScript, 合并, 单元, 表格

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！