单元格动态合并

JasinYip 发布于2019-08-21 10:53 / 2443人阅读

摘要：一般的表格控件也都开发了静态合并单元格的功能，在此基础上实现动态合并就相对容易，只要你自己制定一定的规则。对于一个多带带的单元格而言，有且仅有这种之一的情况。在取到单元格数据合并之前判断数值是否包含标签来决定最终是否合并。

前言

需求是第一生产力。实际业务中的表格往往各具特色的复杂，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...

GPU云服务器云服务器 html的合并单元格合并单元格单元格合并asp table单元格选中合并 html合并单元格列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86358.html

javascript动态合并纵向单元格

摘要：需求合并相邻行内容相同的单元格。概念指定单元格纵向跨越的行数。 1.需求合并相邻行内容相同的单元格。 2.概念 rowspan指定单元格纵向跨越的行数。如rowspan被设为3，这表示该单元格必须跨越三行（本身一行，加上另外两行） 3.公共方法 /** * 单元格合并方法,增加rowspan属性 * @param data 要处理的数据 * @param nam...

沈建明 2019-08-23 15:10 评论0 收藏0
javascript动态合并纵向单元格

摘要：需求合并相邻行内容相同的单元格。概念指定单元格纵向跨越的行数。 1.需求合并相邻行内容相同的单元格。 2.概念 rowspan指定单元格纵向跨越的行数。如rowspan被设为3，这表示该单元格必须跨越三行（本身一行，加上另外两行） 3.公共方法 /** * 单元格合并方法,增加rowspan属性 * @param data 要处理的数据 * @param nam...

laznrbfe 2019-08-02 14:13 评论0 收藏0
打造最全面的PHPExcel开发解决方案

摘要：过去工作中使用较多，碰到并解决了各种大大小小的问题，总结出这样一篇文章，一方面记录自己踩过的坑，一方面与大家分享，让大家少走弯路，并不断完善之，欢迎大家去上面和提交，不断补充和优化，打造最全面的开发解决方案地址原文地址基础小试牛刀引用文过去工作中使用PHPExcel较多，碰到并解决了各种大大小小的问题，总结出这样一篇文章，一方面记录自己踩过的坑，一方面与大家分享，让大家少走弯路，并不...

ThinkSNS 2019-06-28 13:46 评论0 收藏0
iview Table表格组件无法拆分单元格的解决思路

摘要：因为我们项目中首要的是单元格拆分的，因此以拆分为例。使用函数对表格组件的表格列配置数据进行动态改造，普通单元格渲染标签呈现数据，要拆分的单元格渲染原生标签最后隐藏嵌套表格的边框及调整相关原生表格样式。最近在开发的Vue项目中，使用了iview第三方UI库;对于表格组件的需求是最多的，但是在一些特定场景下，发现iview的表格组件没有单元格合并与拆分的API，搜了一下发现很多同学提问关...

songze 2019-08-23 11:46 评论0 收藏0