单元格动态兼并

媒介

需求是第一生产力。现实营业中的表格每每各具特色的庞杂,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…

    原文作者:花田土著
    原文地址: https://segmentfault.com/a/1190000005690608
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞