CN116522027A - web表格数据拖拽复制方法、设备及存储介质 - Google Patents

web表格数据拖拽复制方法、设备及存储介质 Download PDF

Info

Publication number
CN116522027A
CN116522027A CN202310292281.1A CN202310292281A CN116522027A CN 116522027 A CN116522027 A CN 116522027A CN 202310292281 A CN202310292281 A CN 202310292281A CN 116522027 A CN116522027 A CN 116522027A
Authority
CN
China
Prior art keywords
cell
drag
mouse
dragging
selector
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310292281.1A
Other languages
English (en)
Inventor
魏义明
陈夏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Data Center of China Life Insurance Co Ltd
Original Assignee
Shanghai Data Center of China Life Insurance Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Data Center of China Life Insurance Co Ltd filed Critical Shanghai Data Center of China Life Insurance Co Ltd
Priority to CN202310292281.1A priority Critical patent/CN116522027A/zh
Publication of CN116522027A publication Critical patent/CN116522027A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
    • G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

web表格数据拖拽复制方法、设备及存储介质
技术领域
本发明涉及web应用前端开发领域，尤其是涉及一种实现web表格数据拖拽复制的方法及装置。
背景技术
结构化信息数据的展示和编辑是web应用开发中经常涉及的问题。HTML的table元素标签(包括<table><tr><td>等)是实现前端表格组件基本技术手段。这些元素标签原生支持的技术特性用以实现二维数据信息的展示是比较简单方便的，但不支持修改编辑。应用开发中涉及到表格修改编辑的功能需求时，常规的实现办法：1.通过按钮触发弹出对话框，将表格中要编辑修改的一行或多行数据提取到对话框包含的表单中，进行编辑，然后再提交保存；2.将整个表格包含在表单元素中，表格单元格中内嵌可与用户交互编辑文本框组件，数据作为文本框组件的值用于展示和编辑。这些方法实现的编辑功能都不能达到桌面电子表格应用(例如Excel)那样直接和直观，特别是将连续的多个单元格修改为相同的数据时，现有方法要么要逐个单元格修改，要么是提交表单再转换到表格对应的单元格中，不能像桌面电子表格应用那样直接在连续的单元格中拽复制，比较便利的实现表格的修改编辑。
发明内容
本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种web表格数据拖拽复制方法及装置。
本发明的目的可以通过以下技术方案来实现：
作为本发明的第一方面，提供一种web表格数据拖拽复制方法，所述方法包括以下步骤：
构建主体表格和选择器组件；
监听捕获并识别主体表格上发生鼠标点击或键盘敲击事件；
如果是单元格鼠标点击事件，将选择器组件呈现在表格界面上，并根据捕获的单元格坐标定位值，将选择器组件定位到事件单元格，在被点击的单元格周围绘制渲染第一选取框；
在鼠标按下选择器组件上的拖拽句柄组件时，获取选中单元格中的值，并将其保存到中间寄存变量中；
当完成拖拽后，捕获到拖拽终止点单元格的坐标，重新计算选取范围，并绘制渲染第二选取框；
当拖拽操作与第二选取框绘制完成后，将中间寄存变量的值设定到第二选取框框选的单元格中。
进一步的，所述主体表格使用HTML的table元素构建渲染。
进一步的，所述选择器组件使用HTML的容器元素构建。
进一步的，所述选择器组件在表格初始化的时候，随同主体表格一同加载，并定位在表格视口范围内；
所述选择器组件加载时，其内边框略大于一个常规单元格外边框的尺寸；
所述选择器组件置于主体表格图层下。
进一步的，所述鼠标和键盘事件监听绑定在主体表格的第一个父容器上。
进一步的，所述选取框的绘制渲染具体步骤包括：
设定选择器组件边框为设定的可见颜色；
根据被点击的单元格实际大小调整选择器组件边框长宽尺寸；
选择器组件内容部位设定为透明。
进一步的，所述拖拽句柄组件具体为：
选择器组件在构建时使用一个块元素构建成一个供鼠标拖拽的句柄。
进一步的，在选取框呈现在界面上时，所述拖拽句柄组件以小方块的样式附加在选取框上；
当鼠标悬停在拖拽句柄组件上时，变化鼠标指针样式，此时按下鼠标左键可进行拖拽操作。
作为本发明的第二方面，提供一种电子设备，包括：
一个或多个处理器；
存储器，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述的web表格数据拖拽复制方法。
作为本发明的第三方面，提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的web表格数据拖拽复制方法的步骤。
与现有技术相比，本发明具有以下有益效果：
1)本发明所提供的交互逻辑通过鼠标点击选择复制所选单元格内容至寄存变量，再通过拖拽交互将寄存变量释放到目标单元格中，实现将静态展示的web表格转变为可直接交互编辑的动态表格。
2)本发明所提供的选取框以及拖动句柄设计，通过鼠标点击选择与长按拖拽实现表格内容的复制。将桌面电子表格应用(例如Excel)编辑操作习惯，迁移到web表格上，使web表格的编辑像桌面电子表格一样直观、方便。
附图说明
图1为本发明拖拽复制处理流程图；
图2为本发明拖拽复制构件示意图；
图3为本发明提供的示例性实施例示出的电子设备的示意图。
具体实施方式
下面结合附图和具体实施例对本发明进行详细说明。本实施例以本发明技术方案为前提进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。
实施例1
本发明所提供的web表格数据拖拽复制方法是利用HTML、CSS和javascript等web前端技术模拟桌面电子表格应用使用效果，将静态的web表格转变为可直接实时交互编辑的动态表格。具体实现方法如下：
1.使用HTML的table元素(包括<table><tr><td>等)构建渲染主体表格；
2.使用HTML的容器元素(例如<div>)构建一个称为“选择器”的组件。该组件在表格初始化的时候，随同主体表格一同加载，并定位在表格视口范围内，即与表格重叠。选择器组件加载时会设定一个初始大小，通常为内边框略大于一个常规单元格外边框的尺寸。使用CSS中Z轴定位属性，将选择器组件置于主体表格图层下，即初始界面上选择器组件是不可见的。
3.在主体表格的第一个父容器上绑定鼠标和键盘事件监听。当主体表格上发生鼠标点击或键盘敲击事件时，该监听捕获事件进行识别，如果是单元格鼠标点击事件，监听事件处理函数将增加选择器组件Z轴定位属性值，将选择器组件图层上浮，呈现在表格界面上，并根据捕获的单元格坐标定位值，将选择器组件定位到事件单元格，通过CSS将选择器组件边框设定为特定的可见颜色，并根据单元格实际大小调整选择器组件边框长宽尺寸，选择器组件内容部位设定为透明，如此界面上被点击的单元格周围就出现了一个选取框，成为选中单元格。
4.选择器组件在构建时会使用一个块元素构建成一个可供鼠标拖拽的句柄，在选取框呈现在界面上时，该拖拽句柄组件以小方块的样式附加在选取框右下角，鼠标悬停其上时，鼠标指针变化为“十”字指针，此时按下鼠标左键可进行拖拽操作；
5.鼠标按下拖拽句柄进行拖拽后，相应的鼠标捕获事件处理方法捕获到拖拽终止点单元格的坐标，重新计算选取范围，并重新绘制渲染选取框。在鼠标按下拖拽句柄时，监听事件处理方法获取选中单元格中的值，并将其保存到中间寄存变量中，当拖拽操作完成，新的选取框也绘制完成后，处理方法将中间寄存变量的值设定到新选取框框选的单元格中，至此单元格拖拽复制功能完成。
实施例2
作为本发明的第二方面，本申请还提供一种电子设备，包括：一个或多个处理器11；存储器12，用于存储一个或多个程序；当所述一个或多个程序被所述一个或多个处理器11执行，使得所述一个或多个处理器11实现如上述web表格数据拖拽复制方法。如图3所示，为本发明实施例提供的web表格数据拖拽复制方法所在任意具备数据处理能力的设备的一种硬件结构图，除了图3所示的处理器11、存储器12以及接口13之外，实施例中装置所在的任意具备数据处理能力的设备通常根据该任意具备数据处理能力的设备的实际功能，还可以包括其他硬件，对此不再赘述。
实施例3
作为本发明的第三方面，本申请还提供一种计算机可读存储介质，其上存储有计算机指令，该指令被处理器执行时实现如上述web表格数据拖拽复制方法。所述计算机可读存储介质可以是前述任一实施例所述的任意具备数据处理能力的设备的内部存储单元，例如硬盘或内存。所述计算机可读存储介质也可以是外部存储设备，例如所述设备上配备的插接式硬盘、智能存储卡(Smart Media Card，SMC)、SD卡、闪存卡(Flash Card)等。进一步的，所述计算机可读存储介还可以既包括任意具备数据处理能力的设备的内部存储单元也包括外部存储设备。所述计算机可读存储介质用于存储所述计算机程序以及所述任意具备数据处理能力的设备所需的其他程序和数据，还可以用于暂时地存储已经输出或者将要输出的数据。
以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术人员无需创造性劳动就可以根据本发明的构思做出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。

Claims (10)

1.一种web表格数据拖拽复制方法，其特征在于，所述方法包括以下步骤：
构建主体表格和选择器组件；
监听捕获并识别主体表格上发生鼠标点击或键盘敲击事件；
如果是单元格鼠标点击事件，将选择器组件呈现在表格界面上，并根据捕获的单元格坐标定位值，将选择器组件定位到事件单元格，在被点击的单元格周围绘制渲染第一选取框；
在鼠标按下选择器组件上的拖拽句柄组件时，获取选中单元格中的值，并将其保存到中间寄存变量中；
当完成拖拽后，捕获到拖拽终止点单元格的坐标，重新计算选取范围，并绘制渲染第二选取框；
当拖拽操作与第二选取框绘制完成后，将中间寄存变量的值设定到第二选取框框选的单元格中。
2.根据权利要求1所述的一种web表格数据拖拽复制方法，其特征在于，所述主体表格使用HTML的table元素构建渲染。
3.根据权利要求1所述的一种web表格数据拖拽复制方法，其特征在于，所述选择器组件使用HTML的容器元素构建。
4.根据权利要求1所述的一种web表格数据拖拽复制方法，其特征在于，所述选择器组件在表格初始化的时候，随同主体表格一同加载，并定位在表格视口范围内；
所述选择器组件加载时，其内边框略大于一个常规单元格外边框的尺寸；
所述选择器组件置于主体表格图层下。
5.根据权利要求1所述的一种web表格数据拖拽复制方法，其特征在于，所述鼠标和键盘事件监听绑定在主体表格的第一个父容器上。
6.根据权利要求1所述的一种web表格数据拖拽复制方法，其特征在于，所述选取框的绘制渲染具体步骤包括：
设定选择器组件边框为设定的可见颜色；
根据被点击的单元格实际大小调整选择器组件边框长宽尺寸；
选择器组件内容部位设定为透明。
7.根据权利要求1所述的一种web表格数据拖拽复制方法，其特征在于，所述拖拽句柄组件具体为：
选择器组件在构建时使用一个块元素构建成一个供鼠标拖拽的句柄。
8.根据权利要求1所述的一种web表格数据拖拽复制方法，其特征在于，在选取框呈现在界面上时，所述拖拽句柄组件以小方块的样式附加在选取框上；
当鼠标悬停在拖拽句柄组件上时，变化鼠标指针样式，此时按下鼠标左键可进行拖拽操作。
9.一种电子设备，其特征在于，包括：
一个或多个处理器；
存储器，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-8任一项所述的web表格数据拖拽复制方法。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-8任一项所述的web表格数据拖拽复制方法的步骤。
CN202310292281.1A 2023-03-23 2023-03-23 web表格数据拖拽复制方法、设备及存储介质 Pending CN116522027A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310292281.1A CN116522027A (zh) 2023-03-23 2023-03-23 web表格数据拖拽复制方法、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310292281.1A CN116522027A (zh) 2023-03-23 2023-03-23 web表格数据拖拽复制方法、设备及存储介质

Publications (1)

Publication Number Publication Date
CN116522027A true CN116522027A (zh) 2023-08-01

Family

ID=87405468

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310292281.1A Pending CN116522027A (zh) 2023-03-23 2023-03-23 web表格数据拖拽复制方法、设备及存储介质

Country Status (1)

Country Link
CN (1) CN116522027A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117594202A (zh) * 2024-01-19 2024-02-23 深圳市宗匠科技有限公司 一种皱纹尺寸分析方法、装置、电子设备及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117594202A (zh) * 2024-01-19 2024-02-23 深圳市宗匠科技有限公司 一种皱纹尺寸分析方法、装置、电子设备及存储介质
CN117594202B (zh) * 2024-01-19 2024-04-19 深圳市宗匠科技有限公司 一种皱纹尺寸分析方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
TWI394055B (zh) 使用形狀的共同圖表繪製
US7870501B2 (en) Method for hollow selection feedback
US20160342678A1 (en) Manipulation of arbitrarily related data
CN110489116A (zh) 一种页面的渲染方法、装置及计算机存储介质
US20100162151A1 (en) Techniques for organizing information on a computing device using movable objects
WO2016144621A1 (en) Ink experience for images
CN106776514A (zh) 一种批注方法及装置
CN105242817B (zh) 页面元素实时突出显示的方法及装置
CN107209756B (zh) 在标记语言文档中支持数字墨水
US10678410B2 (en) Browser-based image processing
US7924284B2 (en) Rendering highlighting strokes
DE112013006066T5 (de) Die Druckempfindlichkeit auf Multi-Touch-Einheiten emulieren
CN111752557A (zh) 一种展示方法及装置
US20040085358A1 (en) Glow highlighting as an ink attribute
DE112011103173T5 (de) Übergangsansicht auf einer tragbaren elektronischen Vorrichtung
US9910835B2 (en) User interface for creation of content works
CN114357345A (zh) 图片处理方法、装置、电子设备及计算机可读存储介质
US20190347280A1 (en) Condensed hierarchical data viewer
CN116522027A (zh) web表格数据拖拽复制方法、设备及存储介质
DE202014010899U1 (de) Unterstützung von Benutzerinteraktionen mit wiedergegebenen Grafikobjekten
WO2016176149A1 (en) Rendering graphical assets natively on multiple screens of electronic devices
CN108492349A (zh) 书写笔画的处理方法、装置、设备和存储介质
US9360339B2 (en) Rendering maps with canvas elements
US8902252B2 (en) Digital image selection in a surface computing device
Sadun The Core IOS 6 Developer's Cookbook

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination