zaizaizhao / tini-table

基础功能

• 初始化单元格
• 基础合并单元格
• 单元格内容编辑
• 新增一行
• 新增一列
• 新增行考虑合并单元格
• 新增列考虑合并单元格
• 合并已合并单元格
• 删除行
• 删除列
• 删除合并单元格所在行和列
• 删除合并单元格对应行和列
• 单元格长宽可拖拉

性能优化

• 给部分操作加节流
• 优化单元格编辑操作，使用普通html元素代替textarea实现编辑
• 双击后光标自动锁定单元格末尾
• 表格宽高不能受合并单元格影响

高级优化

• 抽取组件
• 独立表格渲染为render函数，与组件分离
• canvas替代js渲染

定义表格组件_TiniTableElement_

表格组件接收值

rows	表格的行数
cols	表格的列数

生成初始表格数据

    /**
     * 初始化表格参数
     * @param rows 
     * @param cols 
     * @param content 
     */
    const TableInit = <T>(rows:number,cols:number,content:T):T[][]=> {
        const res = [];
        for(let i = 0; i < rows; i++){
            const temp = [];
            for(let j = 0; j < cols; j++){
                temp.push(content);
            }
            res.push([...temp])
        }
        return res;
    }

效果

:::

禁用文字选中效果

td {
    text-align: left;
    padding: 8px; 
    user-select:none;
    border: 1px solid black; /* 添加底部横线 */
  }

实现表格选中效果

定义以下属性

isMouseDown	记录鼠标是否按下
startCell	记录开始的单元格
endCell	记录结束的单元格

使用三个事件mousedown，mouseover，mouseup来实现单元格的选中

实现表格单元格编辑效果

现双击某个单元格，该单元格变为可点击状态。

方案1：采用textarea实现，textarea需要更改样式，实现起来复杂

方案2：采用div实现

元素是一个通用的块级容器，用于组织和布局其他 HTML 元素。当设置 contenteditable="true" 时，

元素会变为可编辑状态，用户可以在其中输入和编辑文本，类似于一个简单的富文本编辑器。

实现表格选中后光标定位到文字的最后

function set_focus(el: HTMLElement) {
  console.log(el);
  el.contentEditable = 'true'
  const range = document.createRange();
  range.selectNodeContents(el);
  range.collapse(false);
  const sel = window.getSelection();
  sel!.removeAllRanges();
  sel!.addRange(range);
}

实现表格合并

实现表格合并的关键是采用表格的rowSpan和colSpan属性。

1. 将开始的单元格的rowSpan和colSpan分别设置为选中单元格区域的跨行数和跨列数。
2. 隐藏其它的单元格 这里的开始的单元格总是最小索引值对应的那个单元格