CN112257405A - 网页表格编辑方法、装置、设备与计算机可读存储介质 - Google Patents
网页表格编辑方法、装置、设备与计算机可读存储介质 Download PDFInfo
- Publication number
- CN112257405A CN112257405A CN202011144597.9A CN202011144597A CN112257405A CN 112257405 A CN112257405 A CN 112257405A CN 202011144597 A CN202011144597 A CN 202011144597A CN 112257405 A CN112257405 A CN 112257405A
- Authority
- CN
- China
- Prior art keywords
- cell
- singleton
- data
- component
- determining
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 67
- 230000001960 triggered effect Effects 0.000 claims abstract description 23
- 238000013507 mapping Methods 0.000 claims description 15
- 238000012797 qualification Methods 0.000 claims description 5
- 238000001514 detection method Methods 0.000 claims description 3
- 230000008569 process Effects 0.000 description 12
- 230000000694 effects Effects 0.000 description 8
- 230000006870 function Effects 0.000 description 7
- 230000008859 change Effects 0.000 description 6
- 238000004891 communication Methods 0.000 description 6
- 238000013523 data management Methods 0.000 description 5
- 230000002457 bidirectional effect Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 238000002347 injection Methods 0.000 description 4
- 239000007924 injection Substances 0.000 description 4
- 239000000243 solution Substances 0.000 description 3
- GNFTZDOKVXKIBK-UHFFFAOYSA-N 3-(2-methoxyethoxy)benzohydrazide Chemical compound COCCOC1=CC=CC(C(=O)NN)=C1 GNFTZDOKVXKIBK-UHFFFAOYSA-N 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- FGUUSXIOTUKUDN-IBGZPJMESA-N C1(=CC=CC=C1)N1C2=C(NC([C@H](C1)NC=1OC(=NN=1)C1=CC=CC=C1)=O)C=CC=C2 Chemical compound C1(=CC=CC=C1)N1C2=C(NC([C@H](C1)NC=1OC(=NN=1)C1=CC=CC=C1)=O)C=CC=C2 FGUUSXIOTUKUDN-IBGZPJMESA-N 0.000 description 1
- 208000003028 Stuttering Diseases 0.000 description 1
- 230000000903 blocking effect Effects 0.000 description 1
- 230000015556 catabolic process Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000004880 explosion Methods 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008447 perception Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
Images
Classifications
-
- 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/186—Templates
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Data Mining & Analysis (AREA)
- Document Processing Apparatus (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种网页表格编辑方法，包括：若在网页表格中检测到点击事件，则确定点击事件对应的单元格，并获取单元格对应的单元属性，单元格为不可编辑单元格；基于单元属性，确定单元格对应的单例组件，并将单例组件覆盖显示在单元格上面；若接收到基于单例组件触发的操作事件，则获取操作事件对应的数据，并基于数据更新单元格。本发明还公开了一种网页表格编辑装置、设备和计算机可读存储介质。本发明单元格不可编辑，只在有点击事件时，将单例组件覆盖显示在单元格上面，让用户可以流畅的进行数据编辑，同时，由于在编辑过程中只有一个单例组件，减少了内存的开销，不会出现页面卡顿等性能问题，实现了网页表格的便捷编辑。
Description
技术领域
本发明涉及金融科技(Fintech)技术领域，尤其涉及网页表格编辑方法、装置、设备与计算机可读存储介质。
背景技术
近年来，随着金融科技(Fintech)，尤其是互联网金融的不断发展，数据处理技术被引入银行等金融机构的日常服务中。在银行等金融机构的日常服务过程中，为方便数据管理，往往会设置数据治理平台，专门汇聚全行的数据并进行存储或者再利用等处理，用户在使用数据治理平台中的数据的过程中，如导表等，需要申请数据治理服务，具体需要用户在网页表格中填写大量字符串数据，如想要导出的库表是谁创建的，谁负责的等，对网页表格中的数据编辑频率高，且表格的数据量相对较多，此外，还存在批量导入大量数据用于编辑的场景等，因此，如何对网页表格进行编辑是银行等金融机构需要解决的技术问题。
现有技术中，一般采用Element(一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库)通过Vue(一套用于构建用户界面的渐进式框架)的slot(插槽)特性在表格单元格中实现自定义类型，通过template(模板)和slot实现了在表格的每个单元格中插入了input(输入)，select(选择)，remoteSelect(远程搜索下拉)等UI组件，实现表格的编辑功能；或者采用Ant Design Vue(一套基于Vue2.0的，为开发者，设计师和产品经理准备的Web端的组件库)通过操作列的编辑按钮，使得某一行的指定数据可以编辑，实现在网页表格中进行编辑的功能。
然而，无论前者还是后者，本质上都是通过Vue的slot特性和template功能，在网页表格的每个单元格中嵌入可编辑的UI控件(input，select等)，然后利用Vue的双向数据绑定的特性，将表格中的数据和UI控件进行绑定，实现表格单元格中数据可编辑的功能。前者在网页表格中可编辑的单元格数量很多时，就会创建大量的UI控件，同时过多的双向数据绑定会使得浏览器内存增加，从而使得浏览器卡顿甚至页面崩溃，无法满足大数据量场景下表格可编辑的需求；后者采用变更交互的方式作为折中手段，只控制一行的数据可编辑，减少了可编辑的单元格，从而减少双向数据绑定的UI控件数量来避免内存暴增的问题，但是这种方式降低用户的体验为代价来实现性能的优化，用户本来可以直接点击UI控件开始编辑，现在需要点击编辑之后再进行编辑，把一步到位的操作变成两步，操作繁琐，效率降低，无法满足数据治理服务申请业务的场景。因此，需要一种可以在数据量较大的场景下，对网页表格单元格中的数据进行编辑，同时又不会引发页面卡顿等性能问题的解决方案。
发明内容
本发明的主要目的在于提出一种网页表格编辑方法、装置、设备与计算机可读存储介质，旨在不引发页面卡顿的情况下，实现网页表格的便捷、高效编辑。
为实现上述目的，本发明提供一种网页表格编辑方法，所述网页表格编辑方法包括如下步骤：
若在网页表格中检测到点击事件，则确定所述点击事件对应的单元格，并获取所述单元格对应的单元属性，所述单元格为不可编辑单元格；
基于所述单元属性，确定所述单元格对应的单例组件，并将所述单例组件覆盖显示在所述单元格上面；
若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格。
优选地，所述单元属性包括列序号，所述基于所述单元属性，确定所述单元格对应的单例组件的步骤包括：
确定所述网页表格的表头数组，并基于所述表头数组和所述列序号，确定所述单元格的类型配置项；
根据所述类型配置项，确定所述单元格对应的单例组件。
优选地，所述单元属性包括行序号和映射值，所述将所述单例组件覆盖显示在所述单元格上面的步骤包括:
确定所述网页表格的数据数组，并基于所述数据数组、所述行序号和所述映射值，获取所述单元格当前的显示数据；
将所述显示数据设置为所述单例组件的初始值，并将带有所述初始值的单例组件覆盖显示在所述单元格上面。
优选地，所述将所述单例组件覆盖显示在所述单元格上面的步骤包括：
获取所述单元格在所述网页表格的单元格参数，并将所述单元格参数设置为所述单例组件的呈现属性值，所述单元格参数包括高宽属性和位置属性；
基于所述呈现属性值，将所述单例组件覆盖显示在所述单元格上面。
优选地，所述基于所述呈现属性值，将所述单例组件覆盖显示在所述单元格上面的步骤包括：
基于所述高宽属性，确定所述单例组件的大小，并基于所述位置属性，确定所述单例组件的显示位置；
按照所述大小，将所述单例组件显示在所述显示位置，以覆盖所述单元格。
优选地，所述若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格的步骤之前，所述网页表格编辑方法还包括：
将所述单元属性注入所述单例组件中；
所述若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格的步骤包括：
若接收到基于所述单例组件触发的操作事件，则确定所述操作事件的编辑类型，并选择所述编辑类型对应的方法，获取所述操作事件对应的数据；
基于所述单元属性，将所述数据写入所述网页表格对应的数据源中，并基于所述数据源中的所述数据更新所述单元格。
优选地，所述网页表格编辑方法还包括：
若在所述网页表格中检测到滚动或者缩放事件，则将所述网页表格对应的所有单例组件的呈现属性值设置为隐藏。
此外，为实现上述目的，本发明还提供一种网页表格编辑装置，所述网页表格编辑装置包括：
检测获取模块，用于若在网页表格中检测到点击事件，则确定所述点击事件对应的单元格，并获取所述单元格对应的单元属性，所述单元格为不可编辑单元格；
确定显示模块，用于基于所述单元属性，确定所述单元格对应的单例组件，并将所述单例组件覆盖显示在所述单元格上面；
接收更新模块，用于若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格。
优选地，所述单元属性包括列序号，所述确定显示模块还用于：
确定所述网页表格的表头数组，并基于所述表头数组和所述列序号，确定所述单元格的类型配置项；
根据所述类型配置项，确定所述单元格对应的单例组件。
优选地，所述单元属性包括行序号和映射值，所述确定显示模块还用于：
确定所述网页表格的数据数组，并基于所述数据数组、所述行序号和所述映射值，获取所述单元格当前的显示数据；
将所述显示数据设置为所述单例组件的初始值，并将带有所述初始值的单例组件覆盖显示在所述单元格上面。
优选地，所述确定显示模块还用于：
获取所述单元格在所述网页表格的单元格参数，并将所述单元格参数设置为所述单例组件的呈现属性值，所述单元格参数包括高宽属性和位置属性；
基于所述呈现属性值，将所述单例组件覆盖显示在所述单元格上面。
优选地，所述确定显示模块还用于：
基于所述高宽属性，确定所述单例组件的大小，并基于所述位置属性，确定所述单例组件的显示位置；
按照所述大小，将所述单例组件显示在所述显示位置，以覆盖所述单元格。
优选地，网页表格编辑装置还包括注入模块，所述注入模块用于：
将所述单元属性注入所述单例组件中；
所述接收更新模块还用于：
若接收到基于所述单例组件触发的操作事件，则确定所述操作事件的编辑类型，并选择所述编辑类型对应的方法，获取所述操作事件对应的数据；
基于所述单元属性，将所述数据写入所述网页表格对应的数据源中，并基于所述数据源中的所述数据更新所述单元格。
优选地，网页表格编辑装置还包括隐藏模块，所述隐藏模块用于：
若在所述网页表格中检测到滚动或者缩放事件，则将所述网页表格对应的所有单例组件的呈现属性值设置为隐藏。
此外，为实现上述目的，本发明还提供一种网页表格编辑设备，所述网页表格编辑设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页表格编辑程序，所述网页表格编辑程序被所述处理器执行时实现如上所述的网页表格编辑方法的步骤。
此外，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有网页表格编辑程序，所述网页表格编辑程序被处理器执行时实现如上所述的网页表格编辑方法的步骤。
本发明提出的网页表格编辑方法，若在网页表格中检测到点击事件，则确定所述点击事件对应的单元格，并获取所述单元格对应的单元属性，所述单元格为不可编辑单元格；基于所述单元属性，确定所述单元格对应的单例组件，并将所述单例组件覆盖显示在所述单元格上面；若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格。本发明单元格不可编辑，只在有点击事件时，将单例组件覆盖显示在单元格上面，让用户可以流畅的进行数据编辑，无需针对每一单元格设置UI控件，且由于在编辑过程中只有一个单例组件，在保证流畅编辑的情况下，减少了内存的开销，不会出现页面卡顿等性能问题，使得本发明在不引发页面卡顿的情况下，实现了网页表格的便捷、高效编辑。
附图说明
图1是本发明实施例方案涉及的硬件运行环境的设备结构示意图；
图2为本发明网页表格编辑方法第一实施例的流程示意图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
如图1所示，图1是本发明实施例方案涉及的硬件运行环境的设备结构示意图。
本发明实施例设备可以是移动终端或服务器设备。
如图1所示，该设备可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
本领域技术人员可以理解，图1中示出的设备结构并不构成对设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及网页表格编辑程序。
其中，操作系统是管理和控制网页表格编辑设备与软件资源的程序，支持网络通信模块、用户接口模块、网页表格编辑程序以及其他程序或软件的运行；网络通信模块用于管理和控制网络接口1002；用户接口模块用于管理和控制用户接口1003。
在图1所示的网页表格编辑设备中，所述网页表格编辑设备通过处理器1001调用存储器1005中存储的网页表格编辑程序，并执行下述网页表格编辑方法各个实施例中的操作。
基于上述硬件结构，提出本发明网页表格编辑方法实施例。
参照图2，图2为本发明网页表格编辑方法第一实施例的流程示意图，所述方法包括：
步骤S10，若在网页表格中检测到点击事件，则确定所述点击事件对应的单元格，并获取所述单元格对应的单元属性，所述单元格为不可编辑单元格；
步骤S20，基于所述单元属性，确定所述单元格对应的单例组件，并将所述单例组件覆盖显示在所述单元格上面；
步骤S30，若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格。
本实施例网页表格编辑方法运用于理财机构或者银行等金融机构的网页表格编辑设备中，网页表格编辑设备可以是终端、机器人或者PC设备等，为描述方便，网页表格编辑设备以编辑设备简称。
随着银行等金融机构业务的增长，数据治理服务申请的需求和数据量不断加大，对可编辑的大数据量的表格的需求旺盛，而开源的第三方解决方案均无法满足业务发展的需要，导致在大数据量下的网页表格编辑引发了性能问题，因此，为了满足用户在大数据量表格中编辑的需求，解决大数据量下网页表格编辑的性能问题。本实施例的编辑设备提供在大数据表格中的数据编辑功能，具体通过将单例组件覆盖在不可编辑的单元格上面，让用户在单例组件上进行数据编辑，使得用户既可以流畅进行数据编辑，同时也不会出现页面卡顿和性能问题，解决以往网页表格无法在大规模数据下进行流畅编辑的问题。
需要解释的是，在目前的应用过程中，由于银行等金融机构自身数据的特点，本实施例应用较多的是字符型数据的编辑问题，但在实践过程中，枚举型等数据类型的编辑也是可以实现的，因此，本实施例的编辑设备可对任何数据类型进行流畅编辑，且不会引起页面卡顿和性能问题，当然，对于一些特殊数据，如图片数据等暂不支持。
以下将对各个步骤进行详细说明：
步骤S10，若在网页表格中检测到点击事件，则确定所述点击事件对应的单元格，并获取所述单元格对应的单元属性，所述单元格为不可编辑单元格；
在本实施例中，用户可在编辑设备的显示界面进行网页表格的显示和点击等操作，当用户在编辑设备的网页表格中进行点击操作，则触发点击事件。
若编辑设备在网页表格中检测到点击事件，则确定所述点击事件对应的单元格，也即，确定用户到底是想要对网页表格中的哪一单元格进行数据编辑，并获取该单元格的单元属性。
在一实施例中，网页表格数据具备动态性，列信息也需要具备动态可配置，因此，在事先，需要根据网页表格的配置项，进行网页表格每一列的配置。具体通过表头数组(header数组)和数据数组(dataSources数组)初始化网页表格，其中，表头数组中具有网页表格每一列的元数据配置信息，包括表格每列的映射值(key)，类型(type)(input，select或者remoteSelect等)，显示文本(label)等；数据数组为各单元格显示的数据内容。
在初始化表格时，每个单元格生成的时候，编辑设备会在每个单元格对应的DOM(Document Object Model，文档对象模型)节点上加上自定义属性，也即单元属性：data-row-index，data-column-index，data-key，分别标识单元格的行序号，列序号和对应的映射值。也即，每一个网页表格对应一个DOM树，DOM树上的每个节点对应网页表格一个单元格，编辑设备将单元属性添加到DOM节点上。
因此，在一实施例中，编辑设备用户点击单元格，触发点击事件后，通过获取事件源(event.target)获取到单元格(td)的DOM节点，然后通过获取该DOM节点上的自定义属性，也即单元属性：data-row-index、data-column-index和data-key，获取到该单元格的行序号rowIndex、列序号columnIndex和对应的key。
需要说明的是，网页表格在数据治理服务申请业务场景中，有编辑和非编辑两种模式，其中，编辑模式如用户的提单申请，非编辑模式如用户提单申请的审批等，在非编辑场景下，编辑设备只需渲染只读网页表格，不需要渲染任何可编辑的UI控件；而在编辑模式下，编辑设备提供input，select，remoteSelect等可供用户编辑的UI控件，而UI控件在本实施例中采用单例模式实现，也即UI控件即单例组件，也即，本实施例的编辑设备是通过可编辑的单例组件来对单元格进行编辑的，不管是编辑模式还是非编辑模式，本实施例网页表格中的单元格都不可直接编辑，避免设置太多UI控件，导致页面卡顿或者崩溃。
在具体实施时，在初始化表格时，若当前网页表格为编辑模式，则生成单例组件，其中，单例组件包括input，select和remoteSelect等。
步骤S20，基于所述单元属性，确定所述单元格对应的单例组件，并将所述单例组件覆盖显示在所述单元格上面；
在本实施例中，编辑设备在获取到单元格的单元属性之后，根据单元属性，确定该单元格对应的单例组件，并将所述单例组件覆盖显示在单元格上面。
需要说明的是，将单例组件覆盖显示在单元格上面是显示层面的效果，在底层逻辑中，编辑设备是将单例组件挂载在单元格上面。
具体的，在一实施例中，单元属性包括列序号，基于所述单元属性，确定所述单元格对应的单例组件的步骤包括：
步骤a1，确定所述网页表格的表头数组，并基于所述表头数组和所述列序号，确定所述单元格的类型配置项；
在一实施例中，编辑设备先确定网页表格的表头数组，再通过表头数组和列序号columnIndex，获取单元格的类型配置项header[column].type(input，select，remoteSelect等)。
步骤a2，根据所述类型配置项，确定所述单元格对应的单例组件。
接着，根据类型配置项，确定单元格对应的单例组件，其中，单例组件根据编辑类型目前可分为输入组件(input)，选择组件(select)和远程搜索选择组件(remoteSelect)，且每一种组件的数量为一个，也即，在本实施例中，一个网页表格有且只有三个单例组件，而类型配置项也有三种，分别对应三个单例组件，也即，单元格有且仅有三种类型，由类型配置项决定具体的类型，并且，每种类型都与一个单例组件对应，因此，在确定单元格的类型配置项之后，即可确定对应的单例组件。
进一步的，在一实施例中，所述单元属性包括行序号和映射值，所述将所述单例组件覆盖显示在所述单元格上面的步骤包括：
步骤b1，确定所述网页表格的数据数组，并基于所述数据数组、所述行序号和所述映射值，获取所述单元格当前的显示数据；
在一实施例中，编辑设备通过网页表格的数据数组dataSource、列序号columnIndex、行序号rowIndex和映射值key，获取单元格当前的显示数据，具体根据列序号和行序号，定位单元格的位置，并通过映射值，在数据数组中查找到该位置对应的数据，即为单元格当前的显示数据dataSource[rowIndex][key]。
需要说明的是，在传统的技术中，为实现表格单元格中数据可编辑的功能，需要将表格中的数据和UI控件进行双向绑定，便于用户编辑时，定位到正确的单元格，使得用户编辑单元格的数据时，对应数据库中的数据相应变化；反过来，当对应数据库中的数据变化时，根据双向绑定特性，对应单元格中的数据也可以立马跟着变化，这使得原有网页表格需要较多的UI控件(单元格有多少就需要多少个UI控件)，并且由于UI控件需要与数据进行双向绑定，因此，占用了较大的内存，导致在大数据量场景中，容易出现页面卡顿等性能问题。而本实施例不需要进行UI控件和数据的双向绑定，而是通过单个的单例组件覆盖显示在网页表格的单元格上，并通过网页表格的列序号columnIndex、行序号rowIndex，定位单元格的位置，使得用户在编辑单元格时，由单例组件接收，并通过列序号和行序号修改对应数据库中的数据，从而实现一个单例组件即可满足多个同类单元格的编辑。
步骤b2，将所述显示数据设置为所述单例组件的初始值，并将带有所述初始值的单例组件覆盖显示在所述单元格上面。
接着，将单元格当前的显示数据设置为单例组件的初始值defaultValue，并将带有初始值的单例组件覆盖显示在单元格上面。
需要说明的是，在显示单例组件的过程中，一并显示初始值的目的在于优化显示效果，可以理解的，在一实施例中，在覆盖显示单例组件时，可以显示一空白的单例组件，供用户自行输入数据或者选择数据项；而在本实施例中，显示单例组件的初始值可便于用户直观查看当前单元格的上一显示情况，如用户点击当前单元格输入123字符串，之后回来修改该单元格的字符串为143，此时单例组件显示123的初始值，便于用于进行修改，而不需要再次重新输入完整的143字符，只需将“2”修改为“4”即可。
需要说明的是单例组件为可编辑组件，编辑设备在显示了单例组件后，用户即可在单例组件上进行数据编辑。
步骤S30，若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格。
在本实施例中，编辑设备若接收到基于单例组件触发的操作事件，则获取操作事件对应的输入，如输入数据，或者选择数据等，并根据该数据，更新单元格的显示界面，从而达到通过单例组件间接编辑单元格的效果。
其中，在一实施例中，步骤S30之前，网页表格编辑方法还包括：
步骤c，将所述单元属性注入所述单例组件中；
在一实施例中，在编辑设备确定了当前单元格对应的单例组件之后，将单元格的单元属性注入到该单例组件中，以便后续用户在对单例组件进行编辑时，可以确定对应的是数据源中的哪一条数据，也即内存中的哪一条数据。
具体的，步骤S30包括：
步骤d1，若接收到基于所述单例组件触发的操作事件，则确定所述操作事件的编辑类型，并选择所述编辑类型对应的方法，获取所述操作事件对应的数据；
在一实施例中，编辑设备若接收到基于单例组件触发的操作事件，则先确定操作事件的编辑类型，其中编辑类型包括输入编辑和选择编辑，不同的编辑类型触发不同的操作事件，也即对应不同的获取方法，其中，输入编辑对应keyup事件，也即键入方法，选择编辑对应change事件，也即选择改变方法，编辑设备通过单例组件keyup事件或者change事件，拿到event.target.value的值，也即操作事件对应的数据，具体的，在keyup事件中，接收获取基于单例组件输入的数据；在change事件中，确定获取基于单例组件下拉选择的数据。
步骤d2，基于所述单元属性，将所述数据写入所述网页表格对应的数据源中，并基于所述数据源中的所述数据更新所述单元格。
接着，通过单元属性中的行序号rowIndex和映射值key，把数据写入数据源dataSource中，使得dataSource[rowIndex][key]＝event.target.value，实现界面的显示和内存中dataSource的数据保持一致，同时，通过DOM操作，将数据写入单元格中，也即通过将数据加入DOM节点，来改变单元格的显示数据。
本实施例若在网页表格中检测到点击事件，则确定所述点击事件对应的单元格，并获取所述单元格对应的单元属性，所述单元格为不可编辑单元格；基于所述单元属性，确定所述单元格对应的单例组件，并将所述单例组件覆盖显示在所述单元格上面；若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格。本发明单元格不可编辑，只在有点击事件时，将一个单例组件覆盖显示在单元格上面，让用户可以流畅的进行数据编辑，同时，在编辑过程中只有一个单例组件存在，减少了内存的开销，不会出现页面卡顿等性能问题，使得在不引发页面卡顿的情况下，实现网页表格的便捷、高效编辑。
进一步地，基于本发明网页表格编辑方法第一实施例，提出本发明网页表格编辑方法第二实施例。
网页表格编辑方法的第二实施例与网页表格编辑方法的第一实施例的区别在于，所述将所述单例组件覆盖显示在所述单元格上面的步骤包括：
步骤e，获取所述单元格在所述网页表格的单元格参数，并将所述单元格参数设置为所述单例组件的呈现属性值，所述单元格参数包括高宽属性和位置属性；
步骤f，基于所述呈现属性值，将所述单例组件覆盖显示在所述单元格上面。
本实施例为优化单例组件的显示效果，在显示单例组件时，根据当前单元格的单元格参数进行显示，使得最终覆盖显示的单例组件在视觉上与单元格保持一致，使得单例组件与单元格正确对应，便于用于对单元格进行间接编辑。
以下将对各个步骤进行详细说明：
步骤e，获取所述单元格在所述网页表格的单元格参数，并将所述单元格参数设置为所述单例组件的呈现属性值，所述单元格参数包括高宽属性和位置属性。
在本实施例中，编辑设备先获取当前单元格在网页表格的单元格参数，再将单元格参数设置为单例组件的呈现属性值(css属性)，在具体实施是，编辑设备先对单例组件设置css属性position:absolute(绝对位置)，在通过e.target.getBoundingClientRect()(浏览器的函数方法)获取单元格在网页表格中的单元格参数，其中，单元格参数包括高宽属性(高度height，宽度width)和位置属性(针对页面顶部的偏移量top，针对页面左边的偏移量left)最后，将这些值，分别设置到单例组件的height，width，top，left属性上。
步骤f，基于所述呈现属性值，将所述单例组件覆盖显示在所述单元格上面。
在本实施例中，编辑设备根据呈现属性值(css属性)将单例组件覆盖显示在单元格上，其中，呈现属性值描述了在网页表格上的单例组件应该如何被渲染的问题。
具体的，在一实施例中，步骤f包括：
步骤f1，基于所述高宽属性，确定所述单例组件的大小，并基于所述位置属性，确定所述单例组件的显示位置；
在一实施例中，编辑设备根据高宽属性，先确定单例组件的大小，具体与当前单元格匹配，再根据位置属性，确定单例组件的显示位置，以确保单例组件能覆盖在当前单元格上。
步骤f2，按照所述大小，将所述单例组件显示在所述显示位置，以覆盖所述单元格。
最后，按照确定的大小和显示位置，将单例组件覆盖显示在单元格上面。
本实施例为优化单例组件的显示效果，使得用户无感知的在单例组件上进行单元个的数据编辑，在显示单例组件时，根据当前单元格的单元格参数进行显示，使得最终覆盖显示的单例组件在视觉上与单元格保持一致，提高编辑设备的智能性。
进一步地，基于本发明网页表格编辑方法第一、第二实施例，提出本发明网页表格编辑方法第三实施例。
网页表格编辑方法的第三实施例与网页表格编辑方法的第一、第二实施例的区别在于，网页表格编辑方法还包括：
步骤g，若在所述网页表格中检测到滚动或者缩放事件，则将所述网页表格对应的所有单例组件的呈现属性值设置为隐藏。
本实施例为减少内存开支，且达到更好的显示效果，在检测到针对网页表格的滚动或者缩放事件时，将网页表格对应的所有单例组件进行隐藏，避免因滚动或者缩放引起的单例组件与单元格不匹配。
以下将对各个步骤进行详细说明：
步骤g，若在所述网页表格中检测到滚动或者缩放事件，则将所述网页表格对应的所有单例组件的呈现属性值设置为隐藏。
在本实施例中，可以理解的，用户在点击了一个单元格，编辑设备覆盖显示单例组件后，若用户对当前页面进行滚动或者缩放，势必造成当前单例组件与单元格不匹配的情况发生，若不隐藏单例组件，则在显示效果上将会出现单例组件偏离当前单元格或者大小与当前单元格不匹配，使得用户在编辑过程中，体验感差，如一开始编辑设备显示一个4×8大小的单例组件，以覆盖在当前单元格上面，此时用户缩放当前页面，此时若还将单例组件以4×8的大小显示在原位置，则势必不妥当，且考虑到用户编辑完第一个单元格后，再编辑另一单元格的场景，此时的网页表格并没有滚动或者缩放，但存在当前用户需要编辑的单元格与上一编辑的单元格不属于同一单例组件，如上一单元格使用input组件，当前单元格需要使用select组件，也即不需要用到input组件，为实现统一化，编辑设备都将网页表格对应的所有单例组件先进行隐藏。
具体的，编辑设备对所有的单例组件进行重置，将所有单例组件的呈现属性值(css属性)设置为隐藏：display：none。
需要说明的是，在检测到点击事件，并确定对应的单例组件后，编辑设备会将呈现属性值设置为显示：display：block。
因此，在检测到滚动或者缩放事件，或者，在检测到当前单元格编辑完成，编辑设备都将网页表格对应的单例组件进行隐藏，已达到更好的显示效果。
本实施例为减少内存开支，且达到更好的显示效果，在检测到针对网页表格的滚动或者缩放事件时，将网页表格对应的所有单例组件进行隐藏，避免因滚动或者缩放引起的单例组件与单元格不匹配，实现单例组件的智能显示。
本发明还提供一种网页表格编辑装置。本发明网页表格编辑装置包括：
检测获取模块，用于若在网页表格中检测到点击事件，则确定所述点击事件对应的单元格，并获取所述单元格对应的单元属性，所述单元格为不可编辑单元格；
确定显示模块，用于基于所述单元属性，确定所述单元格对应的单例组件，并将所述单例组件覆盖显示在所述单元格上面；
接收更新模块，用于若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格。
优选地，所述单元属性包括列序号，所述确定显示模块还用于：
确定所述网页表格的表头数组，并基于所述表头数组和所述列序号，确定所述单元格的类型配置项；
根据所述类型配置项，确定所述单元格对应的单例组件。
优选地，所述单元属性包括行序号和映射值，所述确定显示模块还用于：
确定所述网页表格的数据数组，并基于所述数据数组、所述行序号和所述映射值，获取所述单元格当前的显示数据；
将所述显示数据设置为所述单例组件的初始值，并将带有所述初始值的单例组件覆盖显示在所述单元格上面。
优选地，所述确定显示模块还用于：
获取所述单元格在所述网页表格的单元格参数，并将所述单元格参数设置为所述单例组件的呈现属性值，所述单元格参数包括高宽属性和位置属性；
基于所述呈现属性值，将所述单例组件覆盖显示在所述单元格上面。
优选地，所述确定显示模块还用于：
基于所述高宽属性，确定所述单例组件的大小，并基于所述位置属性，确定所述单例组件的显示位置；
按照所述大小，将所述单例组件显示在所述显示位置，以覆盖所述单元格。
优选地，网页表格编辑装置还包括注入模块，所述注入模块用于：
将所述单元属性注入所述单例组件中；
所述接收更新模块还用于：
若接收到基于所述单例组件触发的操作事件，则确定所述操作事件的编辑类型，并选择所述编辑类型对应的方法，获取所述操作事件对应的数据；
基于所述单元属性，将所述数据写入所述网页表格对应的数据源中，并基于所述数据源中的所述数据更新所述单元格。
优选地，网页表格编辑装置还包括隐藏模块，所述隐藏模块用于：
若在所述网页表格中检测到滚动或者缩放事件，则将所述网页表格对应的所有单例组件的呈现属性值设置为隐藏。
本发明还提供一种计算机可读存储介质。
本发明计算机可读存储介质上存储有网页表格编辑程序，所述网页表格编辑程序被处理器执行时实现如上所述的网页表格编辑方法的步骤。
其中，在所述处理器上运行的网页表格编辑程序被执行时所实现的方法可参照本发明网页表格编辑方法各个实施例，此处不再赘述。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书与附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种网页表格编辑方法，其特征在于，所述网页表格编辑方法包括如下步骤：
若在网页表格中检测到点击事件，则确定所述点击事件对应的单元格，并获取所述单元格对应的单元属性，所述单元格为不可编辑单元格；
基于所述单元属性，确定所述单元格对应的单例组件，并将所述单例组件覆盖显示在所述单元格上面；
若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格。
2.如权利要求1所述的网页表格编辑方法，其特征在于，所述单元属性包括列序号，所述基于所述单元属性，确定所述单元格对应的单例组件的步骤包括：
确定所述网页表格的表头数组，并基于所述表头数组和所述列序号，确定所述单元格的类型配置项；
根据所述类型配置项，确定所述单元格对应的单例组件。
3.如权利要求1所述的网页表格编辑方法，其特征在于，所述单元属性包括行序号和映射值，所述将所述单例组件覆盖显示在所述单元格上面的步骤包括：
确定所述网页表格的数据数组，并基于所述数据数组、所述行序号和所述映射值，获取所述单元格当前的显示数据；
将所述显示数据设置为所述单例组件的初始值，并将带有所述初始值的单例组件覆盖显示在所述单元格上面。
4.如权利要求1所述的网页表格编辑方法，其特征在于，所述将所述单例组件覆盖显示在所述单元格上面的步骤包括：
获取所述单元格在所述网页表格的单元格参数，并将所述单元格参数设置为所述单例组件的呈现属性值，所述单元格参数包括高宽属性和位置属性；
基于所述呈现属性值，将所述单例组件覆盖显示在所述单元格上面。
5.如权利要求4所述的网页表格编辑方法，其特征在于，所述基于所述呈现属性值，将所述单例组件覆盖显示在所述单元格上面的步骤包括：
基于所述高宽属性，确定所述单例组件的大小，并基于所述位置属性，确定所述单例组件的显示位置；
按照所述大小，将所述单例组件显示在所述显示位置，以覆盖所述单元格。
6.如权利要求1所述的网页表格编辑方法，其特征在于，所述若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格的步骤之前，所述网页表格编辑方法还包括：
将所述单元属性注入所述单例组件中；
所述若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格的步骤包括：
若接收到基于所述单例组件触发的操作事件，则确定所述操作事件的编辑类型，并选择所述编辑类型对应的方法，获取所述操作事件对应的数据；
基于所述单元属性，将所述数据写入所述网页表格对应的数据源中，并基于所述数据源中的所述数据更新所述单元格。
7.如权利要求1-6任一项所述的网页表格编辑方法，其特征在于，所述网页表格编辑方法还包括：
若在所述网页表格中检测到滚动或者缩放事件，则将所述网页表格对应的所有单例组件的呈现属性值设置为隐藏。
8.一种网页表格编辑装置，其特征在于，所述网页表格编辑装置包括：
检测获取模块，用于若在网页表格中检测到点击事件，则确定所述点击事件对应的单元格，并获取所述单元格对应的单元属性，所述单元格为不可编辑单元格；
确定显示模块，用于基于所述单元属性，确定所述单元格对应的单例组件，并将所述单例组件覆盖显示在所述单元格上面；
接收更新模块，用于若接收到基于所述单例组件触发的操作事件，则获取所述操作事件对应的数据，并基于所述数据更新所述单元格。
9.一种网页表格编辑设备，其特征在于，所述网页表格编辑设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页表格编辑程序，所述网页表格编辑程序被所述处理器执行时实现如权利要求1至7中任一项所述的网页表格编辑方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有网页表格编辑程序，所述网页表格编辑程序被处理器执行时实现如权利要求1至7中任一项所述的网页表格编辑方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011144597.9A CN112257405A (zh) | 2020-10-22 | 2020-10-22 | 网页表格编辑方法、装置、设备与计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011144597.9A CN112257405A (zh) | 2020-10-22 | 2020-10-22 | 网页表格编辑方法、装置、设备与计算机可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112257405A true CN112257405A (zh) | 2021-01-22 |
Family
ID=74263557
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011144597.9A Pending CN112257405A (zh) | 2020-10-22 | 2020-10-22 | 网页表格编辑方法、装置、设备与计算机可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112257405A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113449226A (zh) * | 2021-07-19 | 2021-09-28 | 杭州每刻科技有限公司 | 一种表格创建方法 |
| CN113869102A (zh) * | 2021-07-30 | 2021-12-31 | 荣耀终端有限公司 | 日程事件处理方法、电子设备、装置及存储介质 |
| WO2024037457A1 (zh) * | 2022-08-17 | 2024-02-22 | 深圳市富途网络科技有限公司 | 金融行情列表展示方法、装置、存储介质及设备 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106528271A (zh) * | 2015-09-11 | 2017-03-22 | 北京国双科技有限公司 | 网页数据获取的方法及装置 |
| CN108804483A (zh) * | 2017-05-05 | 2018-11-13 | 平安科技（深圳）有限公司 | 单元格页面的渲染方法、服务器和计算机可读存储介质 |
| CN111476017A (zh) * | 2020-06-04 | 2020-07-31 | 广东三维家信息科技有限公司 | 网页表格编辑方法、装置及电子设备 |
-
2020
- 2020-10-22 CN CN202011144597.9A patent/CN112257405A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106528271A (zh) * | 2015-09-11 | 2017-03-22 | 北京国双科技有限公司 | 网页数据获取的方法及装置 |
| CN108804483A (zh) * | 2017-05-05 | 2018-11-13 | 平安科技（深圳）有限公司 | 单元格页面的渲染方法、服务器和计算机可读存储介质 |
| CN111476017A (zh) * | 2020-06-04 | 2020-07-31 | 广东三维家信息科技有限公司 | 网页表格编辑方法、装置及电子设备 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113449226A (zh) * | 2021-07-19 | 2021-09-28 | 杭州每刻科技有限公司 | 一种表格创建方法 |
| CN113869102A (zh) * | 2021-07-30 | 2021-12-31 | 荣耀终端有限公司 | 日程事件处理方法、电子设备、装置及存储介质 |
| CN113869102B (zh) * | 2021-07-30 | 2023-03-31 | 荣耀终端有限公司 | 日程事件处理方法、电子设备、装置及存储介质 |
| WO2024037457A1 (zh) * | 2022-08-17 | 2024-02-22 | 深圳市富途网络科技有限公司 | 金融行情列表展示方法、装置、存储介质及设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6948134B2 (en) | Integrated method for creating a refreshable Web Query | |
| US6826729B1 (en) | Gallery user interface controls | |
| US8793598B2 (en) | Cross-browser web dialog platform | |
| JP2023169320A (ja) | 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法 | |
| US7512892B2 (en) | Method and system for displaying and interacting with paginated content | |
| US9360992B2 (en) | Three dimensional conditional formatting | |
| US20080307308A1 (en) | Creating Web Clips | |
| CN112257405A (zh) | 网页表格编辑方法、装置、设备与计算机可读存储介质 | |
| US7383498B1 (en) | Editing styles for markup documents using parametrized styles sheets | |
| US20060053390A1 (en) | Configurable interface for template completion | |
| US20080018928A1 (en) | Apparatus and method for report invocation and manipulation on a mobile communication device | |
| CN112631591B (zh) | 表元素联动方法、装置、设备与计算机可读存储介质 | |
| US20060225091A1 (en) | Customizing and personalizing views in content aggregation frameworks | |
| US20060174187A1 (en) | System and method for a look and feel designer with a page-view interface | |
| US7493568B2 (en) | System and method for browsing properties of an electronic document | |
| WO2018225012A2 (en) | System and method for smart interaction between website components | |
| WO2013109858A1 (en) | Design canvas | |
| CN111596989B (zh) | 一种柱状图显示方法、终端及存储介质 | |
| KR101114173B1 (ko) | 마크업 언어 문서 내의 도구틀을 위한 시스템 및 방법 | |
| CN113987384A (zh) | 态势感知大屏的页面自定义方法 | |
| WO2013156066A1 (en) | A computer implemented method for changing a first site s into a second site s' | |
| US8677255B1 (en) | Expanded container view for graphical editing environment | |
| CN112231802A (zh) | Bim文件的多窗体审查方法、装置以及计算机存储介质 | |
| US20230082639A1 (en) | Plugin management system for an interactive system or platform | |
| CN114385153A (zh) | 界面编辑方法、编辑终端及计算机可读存储介质 |
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 |