table 模仿 Excel 拖拽選取功能

最近因公司需求

須要編寫 Excel 合併單元格，拖拽選取單元格，拖拽改變單元格大小等功能

因公司使用框架是公司一位大佬寫的

因此爲了可以與公司項目有較好的黏合性，須要使用 js 或 jquery 開發

而在網上基本找不到大佬分享的代碼，更多的是叫別人使用插件

雖然有找到一位網友分享的代碼，可是由於這位網友的代碼放在不少 td 的 table 裏會出現卡頓，性能較差，因此不採用

後來決定本身開發。。。

示例

github地址

技術難點

• table 裏 td 合併的問題
• 拖拽選擇 td 時，若是碰到合併後的 td 還須要判斷是否還有選擇到其餘 td

實現思路

1. 先把 table 轉成數組，合併的單元格須要按如下方式插入

// 如下 merge 表明此標籤 「 <td colSpan="3" rowSpan="3">123</td> 」

let table_arr = [
    [td, td, td, td, td, td, ....],
    [td, td, td, td, td, td, ....],
    [td, td, merge, merge, merge, td, ....],
    [td, td, merge, merge, merge, td, ....],
    [td, td, merge, merge, merge, td, ....],
    [td, td, td, td, td, td, ....],
    ....
]
複製代碼

2. 給每一個 td 遍歷設置惟一標識，在這裏我使用了 dataset 來設置

// 給 td 設置惟一標識
function setTdSpan (table_arr) {
    setTimeout(() => {
        table_arr.forEach((row, row_i) => {
            row.forEach((col, col_i) => {
                let row_num = row_i
                let col_num = col_i
                if (col.rowSpan > 1) row_num = row_i - col.rowSpan + 1
                if (col.colSpan > 1) col_num = col_i - col.colSpan + 1
                $(col).attr('data-tdspan', `${row_num}-${col_num}`)
                $(col).attr('data-endtdspan', `${row_i}-${col_i}`)
            })
        })
    })
}
複製代碼

3. 而後根據鼠標按下，移動，彈起位置，獲取到單元格 td 的下標

4. 而後就計算某個下標 td 到某個下標 td，計算出的選擇框大小、位置

5. 最後給選擇框設置 css 屬性

結束

最後歡迎你們來指出問題，一塊兒學習

以爲不錯的也能夠給俺一個 star，愛你兄弟 ^▽^