CN111221458A - 大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法 - Google Patents
大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法 Download PDFInfo
- Publication number
- CN111221458A CN111221458A CN202010019364.XA CN202010019364A CN111221458A CN 111221458 A CN111221458 A CN 111221458A CN 202010019364 A CN202010019364 A CN 202010019364A CN 111221458 A CN111221458 A CN 111221458A
- Authority
- CN
- China
- Prior art keywords
- data
- target
- copied
- dragging
- area
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 17
- 238000010367 cloning Methods 0.000 title claims description 5
- 239000011159 matrix material Substances 0.000 claims description 6
- 238000005096 rolling process Methods 0.000 claims description 3
- 238000006243 chemical reaction Methods 0.000 claims description 2
- 210000004027 cell Anatomy 0.000 description 13
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 210000001728 clone cell Anatomy 0.000 description 2
- 238000013479 data entry Methods 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- 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
-
- 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/0485—Scrolling or panning
- G06F3/04855—Interaction with scrollbars
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及一种大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法，本发明通过结合粘贴板数据使用矩阵数据批量运算，拖拽使用纵横式滑行单元算法进行计算处理数据，打破了传统复制粘贴一对一的操作，使得批量操作数据更简单、更高效，大大的提升了数据在表格中批量操作的显示与速度。
Description
技术领域
本发明涉及一种大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法。
背景技术
近年来，大数据在线使用频繁，这为业务中接入了海量数据，然而，由于线上平台表格数据操作单一和重复机械化，导致数据存储和显示不够快速高效，而且容易忽略单元格内某列、某行数据丢失，导致不对称。web端传统的线上表格复制粘贴都是一对一的操作，对于经常遇到的海量数据、修改等工作都具有重复、复杂，而且修改数据还需操作人精神高度集中处理相关数据，从个人经验来看，对于数据重复、机械性很强，而且没有在线即时存储、目标范围拖拽存储显示和全局滑动的优势。因此，传统的线上数据操作方法缺乏合理性、简易性、快速高效性和科学性。
发明内容
针对上述问题，本发明的目的在于提供一种大数据复制粘贴及拖拽克隆、全局滑动表格的快速显示方法。
大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法，包括以下步骤：
S1、获取用户粘贴板上的目标数据，并计算出复制的区域和数据；
S2、通过计算出的区域和数据，预复制数据与表格所配置的每列的数据类型进行对比，动态的转换成所需类型；
S3、根据动态转换的所需数据类型，运用矩阵数据批量运算，剥离区分替换数据和新增数据；
S4、根据其操作获取焦点的单元格数据，动态创建目标拖拽锚点区域；
S5、通过纵、横式滑行单元算法，将目标锚点数据克隆至拖拽区域；
S6、拖拽锚点时，根据计算出拖拽的区域和数据，给与每行、列数据数据拥有唯一序号标识；
S7、松开拖拽锚点后，根据锚点目标范围，动态创建并存储和显示目标数据；
S8、线上滑动上下拉动滚动条，用于确定目标数据信息流，获取目标信息流对应的表格数据；
S9、所述目标信息流，用户可在WEB端屏幕上自由滑动视窗中目标范围内或全局的所有已存储数据并对应展示。
进一步地，获取粘贴板的数据，将粘贴板的数据以文本的格式取出，判断表格数据是用\n还是\r分行，解析成数组，根据\t解析单元格，兼容excel行末\n,防止粘贴出多余空行，处理成预复制数据。
进一步地，根据执行粘贴的操作，获取粘贴的开始区域，通过预复制数据与表格所配置的每列的数据类型进行对比，动态的转换成所需类型，运用矩阵数据批量运算，剥离区分替换数据和新增数据。
进一步地，根据其操作获取焦点的单元格数据，动态创建目标拖拽锚点。
进一步地，运用纵横式滑行单元算法，将目标锚点数据克隆至拖拽区域。
进一步地，页面需要获取表格外层div的高度，固定表格每个单元格的高度，div滚动条在滚动时实时刷新页面所需显示的内容。
进一步地，预复制数据包括：按照粘贴板的数据格式，将数据解析成一个二维数组。
进一步地，表格为预复制数据设有最大阀值：将粘贴板数据处理成预复制数据后，在页面执行粘贴操作，如若，预复制数据超过最大阀值，预复制数据将截取最大阀值的数据，页面予以提示，将截取的预复制数据在表格中展示。
进一步地，在其操作粘贴之前，数据表格模型拥有以下特点：数据表格的配置文件，给与表格每列都拥有唯一标识，能够区分表格每列所需的数据类型；
数据表格的序号，给与每行数据数据拥有唯一标识；
数据表格的每条数据，拥有入库标识，用于区分预复制数据是新增数据还是替换数据。
进一步地，矩阵数据批量运算包括：接收其执行粘贴操作，获取当前操作的目标开始位置；
根据一条预复制数据的最大条目，获取目标的结束位置；
根据预复制数据与数据表格模型的数据结构进行比较，如若，预复制数据条数大于数据表格原数据条数，超出部分为数据表格的新增数据；相等部分为替换数据。
进一步地，点击获取目标锚点在表格中的位置与数据；
使用鼠标在表格中进行纵横拖拽，表格实时显示拖拽区域，根据鼠标最后停留的位置计算纵列或横列拖拽的区域，将目标锚点数据根据表格列的数据类型进行对比转化，即时快速存储显示目标数据。
进一步地，计算承载表格外层div可视区的目标高度curHeight；
固定表格每个单元格的高度tdHeight；
计算可视区可以容纳表格的数量curHeight/tdHeight；
以2倍的可容纳数量向后台发送请求，并接收数据；
将每次接收到的数据乘以tdHeight，得到表格的高度tableHeight，实时的更新表格的高度，用表格的高度撑开可视区域的高度；
用户操作滚动时，向后台发送请求，将获取到请求的数据添加到数据池中，将数据缓存起来，直到后台不再返回数据；
根据滚动条定位到需要显示表格数据位置；
根据滚动条定位位置确定当前显示内容，并生成需要显示表格数据的索引；
在WEB端线上滑动上下拉动滚动条，在表格中可实时快速显示目标范围内或全局的所有已存储数据。
与现有技术相比，本发明的有益效果是：
通过终端(WEB端)的一体化表格数据，实现了终端信息流在线海量数据复制粘贴、拖拽目标数据进行在线存储显示，并可滑动目标范围或全局的场景中的表格数据，为用户提供了合理、简易、快速高效和科学的在线数据操作，大大提高了用户体验度，减少了既重复又机械、而且还低效率传统的WEB端线上表格数据操作。
附图说明
图1为本发明提供的复制粘贴表格数据的流程图；
图2为本发明提供的拖拽克隆单元格的流程图；
图3为本发明提供的目标范围或全局滑动的流程图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明的实施例提供一种大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法，参照图1-3，一种大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法，具体步骤如下：
S1、获取用户粘贴板上的数据，将获取到的数据解析成一个二维数组，组装成预复制数据；
S2、根据执行粘贴的操作，获取粘贴的开始区域，通过预复制数据与表格所配置的每列的数据类型进行对比，动态转换成所需类型，比如千分位数据列、下拉选项数据列、日期数据列等；
S3、用矩阵数据批量运算，将预复制数据剥离区分替换数据和新增数据
S3.1、用户操作粘贴指令时，运用数据表格模型与预复制数据进行对比，如若，预复制数据条数大于数据表格原数据条数，超出部分为数据表格的新增数据；相等部分为替换数据；
S3.2、数据表格设置最大阀值，保证预复制数据条目不超过最大阀值，防止大数据在传输过程中页面出现卡顿，如若超过，页面给与提示；
S3.3、数据表格显示用户执行粘贴操作后的数据，将该部分数据增加颜色区别于别的数据；
S4、如图2所示，本发明提供的一种大数据拖拽克隆单元格数据的方法，包括：
S4.1、用户执行点击操作单元格时，获取单元格数据，并且将此单元格边框高亮显示，并且创建拖拽锚点；
S4.2、用户点击单元格拖拽锚点，使用鼠标在表格中进行纵横拖拽，表格实时显示拖拽区域，根据鼠标最后停留的位置计算纵列或横列拖拽的区域，将目标锚点数据根据表格纵列或横列的数据类型进行对比转化，即时快速存储显示目标数据；
S5、如图3所示，本发明提供的一种大数据全局滑动表格的快速显示方法，包括：
S5.1、根据不同的分辨率创建显示表格区域的div，首先需要设置表格的高度，表格中每个的单元格高度tdHight是固定的，计算出可视区域div可显示表格的条目，第一次请求数据时以两倍数量(nums)去请求；
S5.2、接收到后台传输的数据，根据接收到数据条目的数量乘以每个单元格的高度，即设置在tdHight*nums＝curHeight；将curHeight设置在tbody上，以撑开可视区div；如果高度超出可视区div的高度将出现滚动条；
S5.3、用户拖动或滚动滚动条，实时去请求后台数据，将后台传输的数据进行缓存，直到接口的数据请求完，缓存数据结束，页面上定位到需要显示表格数据的位置；
S5.4、根据滚动条定位位置确定当前表格需要显示的内容，并生成需要显示表格数据的索引；
S5.5根据表格数据的索引，去缓存数据中获取页面需要展示的数据；实时滚动实时获取，用户滑动操作时拉去缓存，对用户无感知，不影响用户体验。
以上是对本发明的实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。
Claims (4)
1.大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法，包括以下步骤：
S1、获取用户粘贴板上的目标数据，并计算出复制的区域和数据；
S2、通过计算出的区域和数据，预复制数据与表格所配置的每列的数据类型进行对比，动态的转换成所需类型；
S3、根据动态转换的所需数据类型，运用矩阵数据批量运算，剥离区分替换数据和新增数据；
S4、根据其操作获取焦点的单元格数据，动态创建目标拖拽锚点区域；
S5、通过纵、横式滑行单元算法，将目标锚点数据克隆至拖拽区域；
S6、拖拽锚点时，根据计算出拖拽的区域和数据，给与每行、列数据数据拥有唯一序号标识；
S7、松开拖拽锚点后，根据锚点目标范围，动态创建并存储和显示目标数据；
S8、线上滑动上下拉动滚动条，用于确定目标数据信息流，获取目标信息流对应的表格数据；
S9、所述目标信息流，用户可在WEB端屏幕上自由滑动视窗中目标范围内或全局的所有已存储数据并对应展示。
2.根据权利要求1所述的方法，其特征在于，所述获取粘贴板的数据，是将粘贴板的数据以文本的格式取出，判断表格数据是用\n还是\r分行，解析成数组，根据\t解析单元格，兼容excel行末\n,防止粘贴出多余空行，处理成预复制数据。
3.根据权利要求1所述的方法，其特征在于，所述预复制数据包括：按照粘贴板的数据格式，将数据解析成一个二维数组；
表格为预复制数据设有最大阀值：将粘贴板数据处理成预复制数据后，在页面执行粘贴操作，如若，预复制数据超过最大阀值，预复制数据将截取最大阀值的数据，页面予以提示，将截取的预复制数据在表格中展示；
在其操作粘贴之前，数据表格模型拥有以下特点：数据表格的配置文件，给与表格每列都拥有唯一标识，能够区分表格每列所需的数据类型；
数据表格的序号，给与每行数据数据拥有唯一标识；
数据表格的每条数据，拥有入库标识，用于区分预复制数据是新增数据还是替换数据。
4.根据权利要求1所述的方法，其特征在于，所述矩阵数据批量运算包括：接收其执行粘贴操作，获取当前操作的目标开始位置；
根据一条预复制数据的最大条目，获取目标的结束位置；
根据预复制数据与数据表格模型的数据结构进行比较，如若，预复制数据条数大于数据表格原数据条数，超出部分为数据表格的新增数据；相等部分为替换数据；
点击获取目标锚点在表格中的位置与数据；
使用鼠标在表格中进行纵横拖拽，表格实时显示拖拽区域，根据鼠标最后停留的位置计算纵列或横列拖拽的区域，将目标锚点数据根据表格列的数据类型进行对比转化，即时快速存储显示目标数据；
计算承载表格外层div可视区的目标高度curHeight；
固定表格每个单元格的高度tdHeight；
计算可视区可以容纳表格的数量curHeight/tdHeight；
以2倍的可容纳数量向后台发送请求，并接收数据；
将每次接收到的数据乘以tdHeight，得到表格的高度tableHeight，实时的更新表格的高度，用表格的高度撑开可视区域的高度；
用户操作滚动时，向后台发送请求，将获取到请求的数据添加到数据池中，将数据缓存起来，直到后台不再返回数据；
根据滚动条定位到需要显示表格数据位置；
根据滚动条定位位置确定当前显示内容，并生成需要显示表格数据的索引；
在WEB端线上滑动上下拉动滚动条，在表格中可实时快速显示目标范围内或全局的所有已存储数据。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010019364.XA CN111221458B (zh) | 2020-01-08 | 2020-01-08 | 大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010019364.XA CN111221458B (zh) | 2020-01-08 | 2020-01-08 | 大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111221458A true CN111221458A (zh) | 2020-06-02 |
| CN111221458B CN111221458B (zh) | 2024-04-09 |
Family
ID=70806343
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010019364.XA Active CN111221458B (zh) | 2020-01-08 | 2020-01-08 | 大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111221458B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114925665A (zh) * | 2022-06-08 | 2022-08-19 | 杭州比智科技有限公司 | 一种基于web表格的图表数据编辑方法及系统 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1825279A (zh) * | 2006-02-14 | 2006-08-30 | 大连大有吴涛易语言软件开发有限公司 | 计算机编程中运用表格处理声明项的方法 |
| CN102262528A (zh) * | 2010-05-26 | 2011-11-30 | 腾讯科技（深圳）有限公司 | 即时通讯客户端及其内嵌网页页面实现拖拽的方法 |
| CN103164401A (zh) * | 2011-12-08 | 2013-06-19 | 航天信息软件技术有限公司 | 页面表格显示方法 |
| CN104346172A (zh) * | 2014-10-31 | 2015-02-11 | 亚信科技（南京）有限公司 | 一种不规则div动态布局方法 |
| CN110520859A (zh) * | 2017-04-05 | 2019-11-29 | 微软技术许可有限责任公司 | 更智能的复制/粘贴 |
-
2020
- 2020-01-08 CN CN202010019364.XA patent/CN111221458B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1825279A (zh) * | 2006-02-14 | 2006-08-30 | 大连大有吴涛易语言软件开发有限公司 | 计算机编程中运用表格处理声明项的方法 |
| CN102262528A (zh) * | 2010-05-26 | 2011-11-30 | 腾讯科技（深圳）有限公司 | 即时通讯客户端及其内嵌网页页面实现拖拽的方法 |
| CN103164401A (zh) * | 2011-12-08 | 2013-06-19 | 航天信息软件技术有限公司 | 页面表格显示方法 |
| CN104346172A (zh) * | 2014-10-31 | 2015-02-11 | 亚信科技（南京）有限公司 | 一种不规则div动态布局方法 |
| CN110520859A (zh) * | 2017-04-05 | 2019-11-29 | 微软技术许可有限责任公司 | 更智能的复制/粘贴 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114925665A (zh) * | 2022-06-08 | 2022-08-19 | 杭州比智科技有限公司 | 一种基于web表格的图表数据编辑方法及系统 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111221458B (zh) | 2024-04-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20200125789A1 (en) | Dynamic zooming of content with overlays | |
| CN107784516B (zh) | 广告投放方法和装置 | |
| CN109543162B (zh) | 数据的多图表展示方法、装置、计算机设备和存储介质 | |
| CN110675728B (zh) | 热力图的生成方法、装置、设备及计算机可读存储介质 | |
| US20150169504A1 (en) | Layer based reorganization of document components | |
| US8938672B2 (en) | Amending the display property of grid elements | |
| TW200844838A (en) | Adaptive server-based layout of web documents | |
| CN103577083A (zh) | 一种图片操作方法和移动终端 | |
| CN110717120A (zh) | 一种网页列表显示方法和装置 | |
| CN104965914A (zh) | 一种页面显示方法及装置 | |
| CN111596911A (zh) | 生成控件的方法、装置、计算机设备和存储介质 | |
| CN107992589A (zh) | 一种svg地图数据的加载方法、装置及系统 | |
| WO2024011899A1 (zh) | 微件的加载方法、装置、设备以及存储介质 | |
| CN104254849A (zh) | 支持网络文档的高速网络滚动的用户终端装置和方法 | |
| CN111221458A (zh) | 大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法 | |
| US9158743B1 (en) | Grid layout control for network site design | |
| CN107340886B (zh) | 一种软键盘状态确定方法、装置、介质及终端 | |
| WO2023246314A1 (zh) | 信息处理方法、信息处理系统、电子设备及存储介质 | |
| CN103970773B (zh) | 一种网页的页面更新方法及装置 | |
| CN109800039B (zh) | 一种用户界面展示方法、装置、电子设备及存储介质 | |
| CN111915705A (zh) | 图片可视化编辑方法、装置、设备和介质 | |
| WO2022257973A1 (zh) | 页面显示方法及装置、设备、存储介质 | |
| CN111222302A (zh) | 网页渲染的控制方法、控制装置以及计算机可读介质 | |
| CN112230816B (zh) | 高效率截图方法、装置、计算机设备和存储介质 | |
| US20110055258A1 (en) | Method and apparatus for the page-by-page provision of an electronic document as a computer graphic |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |