[发明专利]web表格数据拖拽复制方法、设备及存储介质

说明书

本发明涉及一种web表格数据拖拽复制方法、设备及存储介质，包括以下步骤：监听捕获主体表格上发生鼠标点击或键盘敲击事件；如果是单元格鼠标点击事件，将选择器组件呈现在表格界面上，在被点击的单元格周围绘制渲染第一选取框；在鼠标按下选择器组件上的拖拽句柄组件时，将选中单元格中的值保存到中间寄存变量中；当完成拖拽后，捕获拖拽终止点单元格的坐标，绘制渲染第二选取框；第二选取框绘制完成后，将中间寄存变量的值设定到第二选取框框选的单元格中。本发明实现将静态展示的web表格转变为可直接交互编辑的动态表格；并且将桌面电子表格应用编辑操作习惯，迁移到web表格上，使web表格的编辑像桌面电子表格一样直观、方便。

技术领域

本发明涉及web应用前端开发领域，尤其是涉及一种实现web表格数据拖拽复制的方法及装置。

背景技术

结构化信息数据的展示和编辑是web应用开发中经常涉及的问题。HTML的table元素标签(包括tabletrtd等)是实现前端表格组件基本技术手段。这些元素标签原生支持的技术特性用以实现二维数据信息的展示是比较简单方便的，但不支持修改编辑。应用开发中涉及到表格修改编辑的功能需求时，常规的实现办法：1.通过按钮触发弹出对话框，将表格中要编辑修改的一行或多行数据提取到对话框包含的表单中，进行编辑，然后再提交保存；2.将整个表格包含在表单元素中，表格单元格中内嵌可与用户交互编辑文本框组件，数据作为文本框组件的值用于展示和编辑。这些方法实现的编辑功能都不能达到桌面电子表格应用(例如Excel)那样直接和直观，特别是将连续的多个单元格修改为相同的数据时，现有方法要么要逐个单元格修改，要么是提交表单再转换到表格对应的单元格中，不能像桌面电子表格应用那样直接在连续的单元格中拽复制，比较便利的实现表格的修改编辑。

发明内容

本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种web表格数据拖拽复制方法及装置。

本发明的目的可以通过以下技术方案来实现：

作为本发明的第一方面，提供一种web表格数据拖拽复制方法，所述方法包括以下步骤：

构建主体表格和选择器组件；

监听捕获并识别主体表格上发生鼠标点击或键盘敲击事件；

如果是单元格鼠标点击事件，将选择器组件呈现在表格界面上，并根据捕获的单元格坐标定位值，将选择器组件定位到事件单元格，在被点击的单元格周围绘制渲染第一选取框；

在鼠标按下选择器组件上的拖拽句柄组件时，获取选中单元格中的值，并将其保存到中间寄存变量中；

当完成拖拽后，捕获到拖拽终止点单元格的坐标，重新计算选取范围，并绘制渲染第二选取框；

当拖拽操作与第二选取框绘制完成后，将中间寄存变量的值设定到第二选取框框选的单元格中。

进一步的，所述主体表格使用HTML的table元素构建渲染。

进一步的，所述选择器组件使用HTML的容器元素构建。

进一步的，所述选择器组件在表格初始化的时候，随同主体表格一同加载，并定位在表格视口范围内；

所述选择器组件加载时，其内边框略大于一个常规单元格外边框的尺寸；

所述选择器组件置于主体表格图层下。

进一步的，所述鼠标和键盘事件监听绑定在主体表格的第一个父容器上。

进一步的，所述选取框的绘制渲染具体步骤包括：

设定选择器组件边框为设定的可见颜色；

根据被点击的单元格实际大小调整选择器组件边框长宽尺寸；

选择器组件内容部位设定为透明。