單元格動態合并

JasinYip 發布于2019-08-21 10:53 / 2449人閱讀

摘要：一般的表格控件也都開發了靜態合并單元格的功能，在此基礎上實現動態合并就相對容易，只要你自己制定一定的規則。對于一個多帶帶的單元格而言，有且僅有這種之一的情況。在取到單元格數據合并之前判斷數值是否包含標簽來決定最終是否合并。

前言

需求是第一生產力。實際業務中的表格往往各具特色的復雜，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合并單元格列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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