資訊專欄INFORMATION COLUMN
摘要：一般的表格控件也都開發(fā)了靜態(tài)合并單元格的功能，在此基礎(chǔ)上實現(xiàn)動態(tài)合并就相對容易，只要你自己制定一定的規(guī)則。對于一個多帶帶的單元格而言，有且僅有這種之一的情況。在取到單元格數(shù)據(jù)合并之前判斷數(shù)值是否包含標(biāo)簽來決定最終是否合并。
前言
需求是第一生產(chǎn)力。實際業(yè)務(wù)中的表格往往各具特色的復(fù)雜，N行N列的簡單表格基本滿足不了需求。今天跟大家分享的“成果”就來源于實際項目需求。因為我的項目基于MINIUI開發(fā)，所以這是一個站在巨人肩膀上的果實。但也不局限于僅僅在MINIUI上才能使用，分享的是合并單元格的一種生成思路。只要您能滿足以下三個條件同樣也能變著法兒地適用：①能取得表格中所有數(shù)據(jù)；②能取得指定行列數(shù)數(shù)據(jù)；③能夠渲染表格。 演示地址：http://chenhongen.github.io/MergeCells/一、需求描述
將單個單個填有相同值的單元格合并展示，延伸的說即單元格合并，只要你講想要合并的單元格填入相同值即可被合并。一般的表格控件也都開發(fā)了靜態(tài)合并單元格的功能，在此基礎(chǔ)上實現(xiàn)動態(tài)合并就相對容易，只要你自己制定一定的規(guī)則。二、思路剖析
基本規(guī)則：*相同值合并*；更多規(guī)則參見演示地址小標(biāo)題。 基本合并情況可分為3種：行合并、列合并、塊合并。 對于一個多帶帶的單元格而言，有且僅有這3種之一的情況。那么如果它同時既滿足行合并又滿足列合并呢？是行合并還是列合并呢？規(guī)則是我們自己定的，在多種條件都滿足的情況，你可以根據(jù)條件限制來維持你的規(guī)則。比如以上這種情況，我定義的規(guī)則是只列合并不行合并。） 當(dāng)你能取到所有數(shù)據(jù)（數(shù)組形式），又能取到單個數(shù)據(jù)時，同時往X軸、Y軸方向循環(huán)遍歷推進(jìn)，生成需要合并的JSON數(shù)組傳值給靜態(tài)合并。 當(dāng)然，實際情況遠(yuǎn)遠(yuǎn)不止這些，詳細(xì)的還是請大家看我的源碼。這里提一點就是，有的時候在一張表格中，雖然他們值相同，但是你不想將其合并（如都是空白格的）。這個時候你可以給想要合并的單元格嵌套一層HTML標(biāo)簽，如：、等等。在取到單元格數(shù)據(jù)、合并之前判斷數(shù)值是否包含標(biāo)簽來決定最終是否合并。
三、衍生handsontable
handsontable是一款開源的、效果近似Execl表格控件。下載它的demo后可看到有一個靜態(tài)合并的例子：merge_cells.html。 也是通過傳遞指定格式的JSON數(shù)組實現(xiàn)的靜態(tài)合并。我們可以通過以上的思路在后臺構(gòu)件好JSON數(shù)組后返回復(fù)制給hot.mergeCells這個變量同樣也可以實現(xiàn)合并單元格效果。
項目地址：https://github.com/chenhongen...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86358.html
摘要：需求合并相鄰行內(nèi)容相同的單元格。概念指定單元格縱向跨越的行數(shù)。 1.需求 合并相鄰行內(nèi)容相同的單元格。 2.概念 rowspan指定單元格縱向跨越的行數(shù)。如rowspan被設(shè)為3，這表示該單元格必須跨越三行（本身一行，加上另外兩行） 3.公共方法 /** * 單元格合并方法,增加rowspan屬性 * @param data 要處理的數(shù)據(jù) * @param nam...
摘要：需求合并相鄰行內(nèi)容相同的單元格。概念指定單元格縱向跨越的行數(shù)。 1.需求 合并相鄰行內(nèi)容相同的單元格。 2.概念 rowspan指定單元格縱向跨越的行數(shù)。如rowspan被設(shè)為3，這表示該單元格必須跨越三行（本身一行，加上另外兩行） 3.公共方法 /** * 單元格合并方法,增加rowspan屬性 * @param data 要處理的數(shù)據(jù) * @param nam...
摘要：過去工作中使用較多，碰到并解決了各種大大小小的問題，總結(jié)出這樣一篇文章，一方面記錄自己踩過的坑，一方面與大家分享，讓大家少走彎路，并不斷完善之，歡迎大家去上面和提交，不斷補充和優(yōu)化，打造最全面的開發(fā)解決方案地址原文地址基礎(chǔ)小試牛刀引用文 過去工作中使用PHPExcel較多，碰到并解決了各種大大小小的問題，總結(jié)出這樣一篇文章，一方面記錄自己踩過的坑，一方面與大家分享，讓大家少走彎路，并不...
摘要：因為我們項目中首要的是單元格拆分的，因此以拆分為例。使用函數(shù)對表格組件的表格列配置數(shù)據(jù)進(jìn)行動態(tài)改造，普通單元格渲染標(biāo)簽呈現(xiàn)數(shù)據(jù)，要拆分的單元格渲染原生標(biāo)簽最后隱藏嵌套表格的邊框及調(diào)整相關(guān)原生表格樣式。 最近在開發(fā)的Vue項目中，使用了iview第三方UI庫;對于表格組件的需求是最多的，但是在一些特定場景下，發(fā)現(xiàn)iview的表格組件沒有單元格合并與拆分的API，搜了一下發(fā)現(xiàn)很多同學(xué)提問關(guān)...
閱讀 918·2021-10-13 09:39
閱讀 3571·2021-09-26 10:16
閱讀 2932·2019-08-30 15:54
閱讀 1070·2019-08-30 14:22
閱讀 2913·2019-08-29 15:39
閱讀 3289·2019-08-27 10:52
閱讀 838·2019-08-26 13:59
閱讀 1750·2019-08-26 12:20
