CN113297313A - 表格数据展示方法、装置、电子设备及存储介质 - Google Patents
表格数据展示方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN113297313A CN113297313A CN202110629392.8A CN202110629392A CN113297313A CN 113297313 A CN113297313 A CN 113297313A CN 202110629392 A CN202110629392 A CN 202110629392A CN 113297313 A CN113297313 A CN 113297313A
- Authority
- CN
- China
- Prior art keywords
- data
- display
- table data
- width
- length
- 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 37
- 238000012800 visualization Methods 0.000 claims abstract description 40
- 230000000007 visual effect Effects 0.000 claims abstract description 27
- 238000004806 packaging method and process Methods 0.000 claims description 30
- 238000012544 monitoring process Methods 0.000 claims description 29
- 238000004364 calculation method Methods 0.000 claims description 6
- 238000005538 encapsulation Methods 0.000 claims description 5
- 238000004590 computer program Methods 0.000 claims description 4
- 239000000126 substance Substances 0.000 claims 1
- 238000012545 processing Methods 0.000 abstract description 5
- 238000005516 engineering process Methods 0.000 abstract description 3
- 230000008859 change Effects 0.000 description 16
- 230000006870 function Effects 0.000 description 6
- 238000007726 management method Methods 0.000 description 5
- 230000000903 blocking effect Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000008676 import Effects 0.000 description 4
- 238000009877 rendering Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000007405 data analysis Methods 0.000 description 2
- 230000007547 defect Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 208000003028 Stuttering Diseases 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000005096 rolling process Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
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/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/26—Visual data mining; Browsing structured data
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/22—Indexing; Data structures therefor; Storage structures
- G06F16/2282—Tablespace storage structures; Management thereof
Abstract
本发明涉及数据处理技术，揭露了一种表格数据展示方法，包括：将表格数据封装在预设的容器中，所述容器包括内容区域和可视化窗口；根据所述表格数据的条目数计算所述表格数据的最大高度；计算所述可视化窗口内展示区域的大小，得到展示长度及展示宽度；将所述表格数据与可视化窗口进行数据绑定，确定所述展示区域中数据的展示起始位置，根据所述展示起始位置及所述数据绑定将所述表格数据展示到所述展示区域。此外，本发明还涉及区块链技术，所述表格数据可来自区块链的节点。本发明还提出一种表格数据展示装置、电子设备以及计算机可读存储介质。本发明可以解决加载数据越来越多而出现的卡顿的问题。
Description
技术领域
本发明涉及数据处理技术，尤其涉及一种表格数据展示方法、装置、电子设备及计算机可读存储介质。
背景技术
目前针对表格数据的展示主要有两种方法：一种是通过分页机制对记录进行分页查看，如1000记录，每页显示50条，分20个页签展示，用户点击页签时再加载对应页签的条目；另一种是动态加载，通过监听用户的滚动行为，来分批动态加载记录并展示。虽然这两种方法都可以达到对表格数据的展示，但有以下两种缺陷：一是分页显示的表格，无法第一时间查看记录全貌，分页展示操作也不是十分便捷；二是滚动加载的表格，用户调整展示页面的大小时，相应的表格数据不会随之改变，同时随着用户不断向下滚动，加载的数据越来越多，相应的渲染也会变得越来越慢甚至会出现卡顿。
发明内容
本发明提供一种表格数据展示方法、装置及计算机可读存储介质，其主要目的在于解决随着加载数据越来越多而出现的卡顿的问题。
为实现上述目的，本发明提供的一种表格数据展示方法，包括：
将表格数据封装在预设的容器中，其中，所述容器包括内容区域和可视化窗口；
根据所述内容区域及所述表格数据的条目数计算所述表格数据的最大高度；
计算所述可视化窗口内展示区域的长度和宽度，得到展示长度及展示宽度，将所述表格数据与所述可视化窗口进行数据绑定；
根据所述展示长度调整所述表格数据的长度，获取所述可视化窗口的滚轮位置，根据所述展示宽度、滚轮位置及所述最大高度确定所述展示区域中数据的展示起始位置；
根据所述展示起始位置及所述数据绑定将所述表格数据展示到所述展示区域。
可选地，所述将表格数据封装在预设的容器中，包括：
利用预设的前端框架获取所述表格数据，并调用所述前端框架中的封装指令；
根据所述封装指令将所述表格数据拓展成HTML标签；
根据所述封装指令将所述HTML标签封装在预设的容器中。
可选地，所述根据所述内容区域及所述表格数据的条目数计算所述表格数据的最大高度，包括：
将所述表格数据中的数据分成不同种类的字符，根据所述字符的不同分配不同的系数；
根据所述系数调整不同种类的字符所在表格数据的每一行的宽度；
利用所述HTML标签，获取所述表格数据的条目总数；
根据所述宽度及所述条目总数计算所述表格数据的最大高度。
可选地，所述计算所述可视化窗口内展示区域的长度和宽度，得到展示长度及展示宽度，包括：
设置所述可视化窗口的监听事件；
根据所述监听事件内的屏幕宽度监听及屏幕长度监听计算所述展示区域的长度和宽度，得到展示长度及展示宽度。
可选地，所述根据所述展示宽度、滚轮位置及所述最大高度确定所述展示区域中数据的展示起始位置，包括：
将所述滚轮位置与所述表格数据进行同步，设置所述表格数据的最大高度为数据起始位置；
根据所述展示宽度、滚轮位置确定滚轮起始位置；
利用所述数据起始位置及所述滚轮起始位置确定所述展示起始位置。
为了解决上述问题，本发明还提供一种表格数据展示装置，所述装置包括：
数据封装模块，用于将表格数据封装在预设的容器中，其中，所述容器包括内容区域和可视化窗口；
高度计算模块，用于根据所述内容区域及所述表格数据的条目数计算所述表格数据的最大高度；
数据绑定模块，用于计算所述可视化窗口内展示区域的长度和宽度，得到展示长度及展示宽度，将所述表格数据与所述可视化窗口进行数据绑定；
位置调整模块，用于根据所述展示长度调整所述表格数据的长度，获取所述可视化窗口的滚轮位置，根据所述展示宽度、滚轮位置及所述最大高度确定所述展示区域中数据的展示起始位置；
数据展示模块，用于根据所述展示起始位置及所述数据绑定将所述表格数据展示到所述展示区域。
可选地，所述数据封装模块通过下述操作将表格数据封装在预设的容器：
利用预设的前端框架获取所述表格数据，并调用所述前端框架中的封装指令；
根据所述封装指令将所述表格数据拓展成HTML标签；
根据所述封装指令将所述HTML标签封装在预设的容器中。
可选地，所述高度计算模块通过下述操作得到最大高度：
将所述表格数据中的数据分成不同种类的字符，根据所述字符的不同分配不同的系数；
根据所述系数调整不同种类的字符所在表格数据的每一行的宽度；
利用所述HTML标签，获取所述表格数据的条目总数；
根据所述宽度及所述条目总数计算所述表格数据的最大高度。
为了解决上述问题，本发明还提供一种电子设备，所述电子设备包括：
存储器，存储至少一个指令；及
处理器，执行所述存储器中存储的指令以实现上述所述的表格数据展示方法。
为了解决上述问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个指令，所述至少一个指令被电子设备中的处理器执行以实现上述所述的表格数据展示方法。
本发明实施例通过将表格数据封装在预设的容器中，所述容器可以方便、快捷的对所述表格数据进行处理，同时将所述表格数据与所述容器中的可视化窗口进行数据绑定，一旦展示区域的大小发现变化，则立即重新计算所述表格数据自身的大小，使得所述表格数据可以随着所述展示区域的变化进行相应调整，根据所述展示区域的大小和滚轮位置显示数据，用户能看多少显示多少，这解决了加载大量数据时会出的卡顿和延时现象。因此本发明提出的表格数据展示方法、装置及计算机可读存储介质，可以解决了加载大量数据时会出的卡顿和延时现象。
附图说明
图1为本发明一实施例提供的表格数据展示方法的流程示意图；
图2为图1中其中一个步骤的详细实施流程示意图；
图3为图1中另一个步骤的详细实施流程示意图；
图4为可视化窗口中展示区域示意图；
图5为图1中另一个步骤的详细实施流程示意图；
图6为图1中另一个步骤的详细实施流程示意图；
图7为本发明一实施例提供的表格数据展示装置的功能模块图；
图8为本发明一实施例提供的实现所述表格数据展示方法的电子设备的结构示意图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
本申请实施例提供的表格数据展示方法的执行主体包括但不限于服务端、终端等能够被配置为执行本申请实施例提供的该方法的电子设备中的至少一种。换言之，所述表格数据展示方法可以由安装在终端设备或服务端设备的软件或硬件来执行，所述软件可以是区块链平台。所述服务端包括但不限于：单台服务器、服务器集群、云端服务器或云端服务器集群等。
参照图1所示，为本发明一实施例提供的表格数据展示方法的流程示意图。在本实施例中，所述表格数据展示方法包括：
S1、将表格数据封装在预设的容器中，其中，所述容器包括内容区域和可视化窗口。
本发明实施例利用预设的前端框架获取所述表格数据。所述前端框架可以采用当前已公开的AngularJS(AngularJavaScript)框架。所述AngularJS框架是一种基于JavaScript的前端框架，可以用于构建动态Web应用。所述AngularJS框架可以解决HTML(Hyper Text Markup Language，超级文本标记语言)在构建Web应用上的不足。所述AngularJS框架可以使用HTML作为模板语言，同时扩展HTML的语法，以便简洁、清晰地表达动态Web应用。
较佳地，本发明实施例中，所述预设的容器是可供随时提取或者导入数据的单独的容器。所述内容区域为所述表格数据的存储区域，所述可视化窗口为所述表格数据的展示窗口。所述表格数据可以根据所述可视化窗口中展示区域的大小变化来调整自身表格的大小。
利用本发明实施例，当用户A将财务表格数据导入到浏览器容器中时，所述浏览器容器会根据展示区域的大小截取所述财务表格数据并展示到展示区域。
较佳地，参阅图2所示，所述获取表格数据，并将所述表格数据封装在预设的容器中，具体包括：
S10、利用前端框架获取所述表格数据，并调用所述前端框架中的封装指令；
S11、根据所述封装指令将所述表格数据拓展成HTML标签；
S12、根据所述封装指令将所述HTML标签封装在预设的容器中。
本发明实施例通过所述AngularJS框架将所述表格数据封装到容器中，所述表格数据在该容器中被完全拓展为一个HTML标签，通过这个拓展的HTML标签，可以方便、快捷的对所述表格数据进行处理，从而获取所述表格数据中的表格记录条目数。
S2、根据所述内容区域及所述表格数据的条目数计算所述表格数据的最大高度。
详细地，参阅图3所示，所述根据所述内容区域及所述表格数据的条目数计算所述表格数据的最大高度，具体包括：
S20、将所述表格数据中的数据分成不同种类的字符，根据所述字符的不同分配不同的系数；
S21、根据所述系数调整不同种类的字符所在表格数据的每一行的宽度；
S22、利用所述容器中的HTML标签，获取所述表格数据的条目总数；
S23、根据所述宽度及所述条目总数计算所述表格数据的最大高度。
较佳地，所述表格数据中的数据由于字符种类的不同会有不同的高度，根据所述字符的不同分配不同的系数，所述系数是指字符占据每一行宽度的比例系数，其中，高度较高的字符分配较低的比例系数，高度较低的字符分配较高的比例系数。
本发明实施例基于数据的不同动态计算表格的宽度，结合字符的特点将表格数据中的数据分成数字、字母、汉字等字符，根据所述字符的不同分配不同的系数，从而计算数据应该占据的宽度，进一步地，取最大宽度成为该行的宽度，从而避免了因为设定一个固定的表格单元宽度导致的当内容太长，不得不隐藏部分内容，或者内容太短，浪费展示空间。
具体地，本发明通过所述HTML标签获取所述表格数据的条目总数(A,B)，其中A表示行数，B表示列数，根据上述每行的宽度，计算出所述表格数据的最大高度。
S3、计算所述可视化窗口内展示区域的长度和宽度，得到展示长度及展示宽度，将所述表格数据与所述可视化窗口进行数据绑定。
本发明实施例中，所述可视化窗口为所述表格数据的展示窗口，其中，所述可视化窗口包括展示区域、上下边距以及滚轮。利用本发明实施例，当用户在滑动所述滚轮时，可以将所述表格数据移动到展示区域中，给用户带来所有数据都加载到了可视化窗口中的错觉，实际所述可视化窗口只会展示所述展示区域的数据，避免加载大量数据及大量渲染造成的性能损失。
详细地，所述可视化窗口如图4所示。所述图4中可视化窗口的上下没有数据的区域为上下边距，其中实际展示的数据区域为所述展示区域，通过右侧的滚轮将所述表格数据移动到展示区域。
具体地，参阅图5所示，所述计算所述可视化窗口内展示区域的长度和宽度，得到展示长度、展示宽度，具体包括：
S30、设置所述可视化窗口的监听事件；
S31、根据所述监听事件内的屏幕宽度(screenWidthX)监听、屏幕长度(screenLengthY)监听计算所述展示区域的长度和宽度，得到展示长度、展示宽度。
本发明实施例中，所述监听事件是用来接收所述可视化窗口变化的侦听器，当所述可视化窗口状态发生变化时，将调用该所述侦听器中的相关方法对所述可视化窗口进行监听。比如，根据所述监听事件监听所述展示区域的大小，若所述可视化窗口大小发生变化，则调用所述监听事件中屏幕宽度(screenWidthX)监听、屏幕长度(screenLengthY)监听的自动计算所述可视化窗口内展示区域的长度和宽度。
较佳地，在本发明实施例中，根据所述AngularJS框架将所述表格数据与所述展示区域进行数据绑定，即所述展示区域的大小变化会影响到所述表格数据的大小变化，一旦展示区域的大小发现变化，则立即重新计算所述表格数据自身的大小。
S4、根据所述展示长度调整所述表格数据的长度，获取所述可视化窗口的滚轮位置，根据所述展示宽度、滚轮位置及所述最大高度确定所述展示区域中数据的展示起始位置。
进一步地，参阅图6所示，所述根据所述展示宽度、滚轮位置及所述最大高度确定所述展示区域中数据的展示起始位置，具体包括：
S40、将所述滚轮位置与所述表格数据进行同步，设置所述表格数据的最大高度为数据起始位置；
S41、根据所述展示宽度、滚轮位置确定滚轮起始位置；
S42、利用所述数据起始位置及所述滚轮起始位置确定所述展示起始位置。
本发明实施例中，基于所述前端框架，设置所述表格数据的最大高度为数据起始位置，同时通过所述监听事件确定滚轮位置，从而确定所述滚轮起始位置，进一步地，通过所述将所述滚轮位置与所述表格数据进行同步确定所述展示起始位置。
具体地，本发明实施例中，所述数据起始位置是指所述表格数据展示的开始位置，通过所述最大高度进行确定，所述滚轮起始位置是指所述展示区域中滚轮的开始位置，具体位置为所述展示宽度减去所述滚轮位置，所述展示起始位置是指所述表格数据在所述展示区域展示的开始位置。
S5、根据所述展示起始位置及所述数据绑定将所述表格数据展示到所述展示区域。
较佳地，本发明实施例中，所述展示起始位置是指所述表格数据在所述展示区域展示的开始位置，通过设置所述滚轮位置与所述表格数据进行同步，根据用户拖动的滚轮位置进行所述表格数据的展示，同时根据所述数据绑定，所述表格数据会根据所述展示区域的大小变化进行自适应调整。
本发明实施例中，基于所述AngularJS框架获取表格数据并封装在预设的容器中，没有表格UI方面的配置，完全自适应，表格的行宽基于数据自动计算，无需预先配置或者用户手动调整，根据所述展示区域的大小和滚轮位置显示数据，用户能看多少显示多少，这解决了加载大量数据时会出的卡顿和延时现象。
比如，用户A对财务表格数据进行数据分析，将所述财务表格数据导入预设的浏览器，通过所述浏览器的展示区域来查看所述财务表格数据，通过拖动滚轮来进行完整财务表格数据的查看，同时可以根据自身需要来调整所述展示区域的大小，所述财务表格数据会随着展示区域的变化来自动进行调整。
本发明实施例通过将表格数据封装在预设的容器中，所述容器可以方便、快捷的对所述表格数据进行处理，同时将所述表格数据与所述容器中的可视化窗口进行数据绑定，一旦展示区域的大小发现变化，则立即重新计算所述表格数据自身的大小，使得所述表格数据可以随着所述展示区域的变化进行相应调整，根据所述展示区域的大小和滚轮位置显示数据，用户能看多少显示多少，这解决了加载大量数据时会出的卡顿和延时现象。因此本发明提出的表格数据展示方法、装置及计算机可读存储介质，可以解决了加载大量数据时会出的卡顿和延时现象。
如图7所示，是本发明一实施例提供的表格数据展示装置的功能模块图。
本发明所述表格数据展示装置100可以安装于电子设备中。根据实现的功能，所述表格数据展示装置100可以包括数据封装模块101、高度计算模块102、数据绑定模块103、位置调整模块104及数据展示模块105。本发所述模块也可以称之为单元，是指一种能够被电子设备处理器所执行，并且能够完成固定功能的一系列计算机程序段，其存储在电子设备的存储器中。
在本实施例中，关于各模块/单元的功能如下：
所述数据封装模块101，用于将表格数据封装在预设的容器中，其中，所述容器包括内容区域和可视化窗口。
本发明实施例所述数据封装模块101利用预设的前端框架获取所述表格数据。所述前端框架可以采用当前已公开的AngularJS(AngularJavaScript)框架。所述AngularJS框架是一种基于JavaScript的前端框架，可以用于构建动态Web应用。所述AngularJS框架可以解决HTML(Hyper Text Markup Language，超级文本标记语言)在构建Web应用上的不足。所述AngularJS框架可以使用HTML作为模板语言，同时扩展HTML的语法，以便简洁、清晰地表达动态Web应用。
较佳地，本发明实施例中，所述预设的容器是可供随时提取或者导入数据的单独的容器。所述内容区域为所述表格数据的存储区域，所述可视化窗口为所述表格数据的展示窗口。所述表格数据可以根据所述可视化窗口中展示区域的大小变化来调整自身表格的大小。
利用本发明实施例，当用户A将财务表格数据导入到浏览器容器中时，所述浏览器容器会根据展示区域的大小截取所述财务表格数据并展示到展示区域。
较佳地，所述数据封装模块101通过下述操作获取表格数据，并将所述表格数据封装在预设的容器中：
利用前端框架获取所述表格数据，并调用所述前端框架中的封装指令；
根据所述封装指令将所述表格数据拓展成HTML标签；
根据所述封装指令将所述HTML标签封装在预设的容器中。
本发明实施例通过所述AngularJS框架将所述表格数据封装到容器中，所述表格数据在该容器中被完全拓展为一个HTML标签，通过这个拓展的HTML标签，可以方便、快捷的对所述表格数据进行处理，从而获取所述表格数据中的表格记录条目数。
所述高度计算模块102，用于根据所述内容区域及所述表格数据的条目数计算所述表格数据的最大高度。
详细地，所述高度计算模块102通过下述操作计算所述表格数据的最大高度：
将所述表格数据中的数据分成不同种类的字符，根据所述字符的不同分配不同的系数；
根据所述系数调整不同种类的字符所在表格数据的每一行的宽度；
利用所述容器中的HTML标签，获取所述表格数据的条目总数；
根据所述宽度及所述条目总数计算所述表格数据的最大高度。
较佳地，所述表格数据中的数据由于字符种类的不同会有不同的高度，根据所述字符的不同分配不同的系数，所述系数是指字符占据每一行宽度的比例系数，其中，高度较高的字符分配较低的比例系数，高度较低的字符分配较高的比例系数。
本发明实施例基于数据的不同动态计算表格的宽度，结合字符的特点将表格数据中的数据分成数字、字母、汉字等字符，根据所述字符的不同分配不同的系数，从而计算数据应该占据的宽度，进一步地，取最大宽度成为该行的宽度，从而避免了因为设定一个固定的表格单元宽度导致的当内容太长，不得不隐藏部分内容，或者内容太短，浪费展示空间。
具体地，本发明通过所述HTML标签获取所述表格数据的条目总数(A,B)，其中A表示行数，B表示列数，根据上述每行的宽度，计算出所述表格数据的最大高度。
所述数据绑定模块103，用于计算所述可视化窗口内展示区域的长度和宽度，得到展示长度及展示宽度，将所述表格数据与所述可视化窗口进行数据绑定。
本发明实施例中，所述可视化窗口为所述表格数据的展示窗口，其中，所述可视化窗口包括展示区域、上下边距以及滚轮。利用本发明实施例，当用户在滑动所述滚轮时，可以将所述表格数据移动到展示区域中，给用户带来所有数据都加载到了可视化窗口中的错觉，实际所述可视化窗口只会展示所述展示区域的数据，避免加载大量数据及大量渲染造成的性能损失。
详细地，可视化窗口的上下没有数据的区域为上下边距，其中实际展示的数据区域为所述展示区域，通过右侧的滚轮将所述表格数据移动到展示区域。
具体地，数据绑定模块103通过下述操作计算所述可视化窗口内展示区域的长度和宽度，得到展示长度、展示宽度：
设置所述可视化窗口的监听事件；
根据所述监听事件内的屏幕宽度(screenWidthX)监听、屏幕长度(screenLengthY)监听计算所述展示区域的长度和宽度，得到展示长度、展示宽度。
本发明实施例中，所述监听事件是用来接收所述可视化窗口变化的侦听器，当所述可视化窗口状态发生变化时，将调用该所述侦听器中的相关方法对所述可视化窗口进行监听。比如，根据所述监听事件监听所述展示区域的大小，若所述可视化窗口大小发生变化，则调用所述监听事件中屏幕宽度(screenWidthX)监听、屏幕长度(screenLengthY)监听的自动计算所述可视化窗口内展示区域的长度和宽度。
较佳地，在本发明实施例中，根据所述AngularJS框架将所述表格数据与所述展示区域进行数据绑定，即所述展示区域的大小变化会影响到所述表格数据的大小变化，一旦展示区域的大小发现变化，则立即重新计算所述表格数据自身的大小。
所述位置调整模块104，用于根据所述展示长度调整所述表格数据的长度，获取所述可视化窗口的滚轮位置，根据所述展示宽度、滚轮位置及所述最大高度确定所述展示区域中数据的展示起始位置。
进一步地，所述位置调整模块104通过下述操作确定所述展示区域中数据的展示起始位置：
将所述滚轮位置与所述表格数据进行同步，设置所述表格数据的最大高度为数据起始位置；
根据所述展示宽度、滚轮位置确定滚轮起始位置；
利用所述数据起始位置及所述滚轮起始位置确定所述展示起始位置。
本发明实施例中，基于所述前端框架，设置所述表格数据的最大高度为数据起始位置，同时通过所述监听事件确定滚轮位置，从而确定所述滚轮起始位置，进一步地，通过所述将所述滚轮位置与所述表格数据进行同步确定所述展示起始位置。
具体地，本发明实施例中，所述数据起始位置是指所述表格数据展示的开始位置，通过所述最大高度进行确定，所述滚轮起始位置是指所述展示区域中滚轮的开始位置，具体位置为所述展示宽度减去所述滚轮位置，所述展示起始位置是指所述表格数据在所述展示区域展示的开始位置。
所述数据展示模块105，用于根据所述展示起始位置及所述数据绑定将所述表格数据展示到所述展示区域。
较佳地，本发明实施例中，所述展示起始位置是指所述表格数据在所述展示区域展示的开始位置，通过设置所述滚轮位置与所述表格数据进行同步，根据用户拖动的滚轮位置进行所述表格数据的展示，同时根据所述数据绑定，所述表格数据会根据所述展示区域的大小变化进行自适应调整。
本发明实施例中，基于所述AngularJS框架获取表格数据并封装在预设的容器中，没有表格UI方面的配置，完全自适应，表格的行宽基于数据自动计算，无需预先配置或者用户手动调整，根据所述展示区域的大小和滚轮位置显示数据，用户能看多少显示多少，这解决了加载大量数据时会出的卡顿和延时现象。
比如，用户A对财务表格数据进行数据分析，将所述财务表格数据导入预设的浏览器，通过所述浏览器的展示区域来查看所述财务表格数据，通过拖动滚轮来进行完整财务表格数据的查看，同时可以根据自身需要来调整所述展示区域的大小，所述财务表格数据会随着展示区域的变化来自动进行调整。
如图8所示，是本发明一实施例提供的实现表格数据展示方法的电子设备的结构示意图。
所述电子设备1可以包括处理器10、存储器11和总线，还可以包括存储在所述存储器11中并可在所述处理器10上运行的计算机程序，如表格数据展示程序12。
其中，所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：SD或DX存储器等)、磁性存储器、磁盘、光盘等。所述存储器11在一些实施例中可以是电子设备1的内部存储单元，例如该电子设备1的移动硬盘。所述存储器11在另一些实施例中也可以是电子设备1的外部存储设备，例如电子设备1上配备的插接式移动硬盘、智能存储卡(Smart Media Card，SMC)、安全数字(SecureDigital，SD)卡、闪存卡(Flash Card)等。进一步地，所述存储器11还可以既包括电子设备1的内部存储单元也包括外部存储设备。所述存储器11不仅可以用于存储安装于电子设备1的应用软件及各类数据，例如表格数据展示程序12的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。
所述处理器10在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述处理器10是所述电子设备的控制核心(Control Unit)，利用各种接口和线路连接整个电子设备的各个部件，通过运行或执行存储在所述存储器11内的程序或者模块(例如表格数据展示程序等)，以及调用存储在所述存储器11内的数据，以执行电子设备1的各种功能和处理数据。
所述总线可以是外设部件互连标准(peripheral component interconnect，简称PCI)总线或扩展工业标准结构(extended industry standard architecture，简称EISA)总线等。该总线可以分为地址总线、数据总线、控制总线等。所述总线被设置为实现所述存储器11以及至少一个处理器10等之间的连接通信。
图8仅示出了具有部件的电子设备，本领域技术人员可以理解的是，图8示出的结构并不构成对所述电子设备1的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。
例如，尽管未示出，所述电子设备1还可以包括给各个部件供电的电源(比如电池)，优选地，电源可以通过电源管理装置与所述至少一个处理器10逻辑相连，从而通过电源管理装置实现充电管理、放电管理、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备1还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。
进一步地，所述电子设备1还可以包括网络接口，可选地，所述网络接口可以包括有线接口和/或无线接口(如WI-FI接口、蓝牙接口等)，通常用于在该电子设备1与其他电子设备之间建立通信连接。
可选地，该电子设备1还可以包括用户接口，用户接口可以是显示器(Display)、输入单元(比如键盘(Keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备1中处理的信息以及用于显示可视化的用户界面。
应该了解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。
所述电子设备1中的所述存储器11存储的表格数据展示程序12是多个指令的组合，在所述处理器10中运行时，可以实现：
将表格数据封装在预设的容器中，其中，所述容器包括内容区域和可视化窗口；
根据所述内容区域及所述表格数据的条目数计算所述表格数据的最大高度；
计算所述可视化窗口内展示区域的长度和宽度，得到展示长度及展示宽度，将所述表格数据与所述可视化窗口进行数据绑定；
根据所述展示长度调整所述表格数据的长度，获取所述可视化窗口的滚轮位置，根据所述展示宽度、滚轮位置及所述最大高度确定所述展示区域中数据的展示起始位置；
根据所述展示起始位置及所述数据绑定将所述表格数据展示到所述展示区域。
具体地，所述处理器10对上述指令的具体实现方法可参考图1至图6对应实施例中相关步骤的描述，在此不赘述。
进一步地，所述电子设备1集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个非易失性计算机可读取存储介质中。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)。
在本发明所提供的几个实施例中，应该理解到，所揭露的设备，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。
所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。
因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。
本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第二等词语用来表示名称，而并不表示任何特定的顺序。
最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。
Claims (10)
1.一种表格数据展示方法，其特征在于，所述方法包括：
将表格数据封装在预设的容器中，其中，所述容器包括内容区域和可视化窗口；
根据所述内容区域及所述表格数据的条目数计算所述表格数据的最大高度；
计算所述可视化窗口内展示区域的长度和宽度，得到展示长度及展示宽度，将所述表格数据与所述可视化窗口进行数据绑定；
根据所述展示长度调整所述表格数据的长度，获取所述可视化窗口的滚轮位置，根据所述展示宽度、滚轮位置及所述最大高度确定所述展示区域中数据的展示起始位置；
根据所述展示起始位置及所述数据绑定将所述表格数据展示到所述展示区域。
2.如权利要求1所述的表格数据展示方法，其特征在于，所述将表格数据封装在预设的容器中，包括：
利用预设的前端框架获取所述表格数据，并调用所述前端框架中的封装指令；
根据所述封装指令将所述表格数据拓展成HTML标签；
根据所述封装指令将所述HTML标签封装在预设的容器中。
3.如权利要求1所述的表格数据展示方法，其特征在于，所述根据所述内容区域及所述表格数据的条目数计算所述表格数据的最大高度，包括：
将所述表格数据中的数据分成不同种类的字符，根据所述字符的不同分配不同的系数；
根据所述系数调整不同种类的字符所在表格数据的每一行的宽度；
利用所述HTML标签，获取所述表格数据的条目总数；
根据所述宽度及所述条目总数计算所述表格数据的最大高度。
4.如权利要求1所述的表格数据展示方法，其特征在于，所述计算所述可视化窗口内展示区域的长度和宽度，得到展示长度及展示宽度，包括：
设置所述可视化窗口的监听事件；
根据所述监听事件内的屏幕宽度监听及屏幕长度监听计算所述展示区域的长度和宽度，得到展示长度及展示宽度。
5.如权利要求1所述的表格数据展示方法，其特征在于，所述根据所述展示宽度、滚轮位置及所述最大高度确定所述展示区域中数据的展示起始位置，包括：
将所述滚轮位置与所述表格数据进行同步，设置所述表格数据的最大高度为数据起始位置；
根据所述展示宽度、滚轮位置确定滚轮起始位置；
利用所述数据起始位置及所述滚轮起始位置确定所述展示起始位置。
6.一种表格数据展示装置，其特征在于，所述装置包括：
数据封装模块，用于将表格数据封装在预设的容器中，其中，所述容器包括内容区域和可视化窗口；
高度计算模块，用于根据所述内容区域及所述表格数据的条目数计算所述表格数据的最大高度；
数据绑定模块，用于计算所述可视化窗口内展示区域的长度和宽度，得到展示长度及展示宽度，将所述表格数据与所述可视化窗口进行数据绑定；
位置调整模块，用于根据所述展示长度调整所述表格数据的长度，获取所述可视化窗口的滚轮位置，根据所述展示宽度、滚轮位置及所述最大高度确定所述展示区域中数据的展示起始位置；
数据展示模块，用于根据所述展示起始位置及所述数据绑定将所述表格数据展示到所述展示区域。
7.如权利要求6所述的表格数据展示装置，其特征在于，所述数据封装模块通过下述操作将表格数据封装在预设的容器：
利用预设的前端框架获取所述表格数据，并调用所述前端框架中的封装指令；
根据所述封装指令将所述表格数据拓展成HTML标签；
根据所述封装指令将所述HTML标签封装在预设的容器中。
8.如权利要求6所述的表格数据展示装置，其特征在于，所述高度计算模块通过下述操作得到最大高度：
将所述表格数据中的数据分成不同种类的字符，根据所述字符的不同分配不同的系数；
根据所述系数调整不同种类的字符所在表格数据的每一行的宽度；
利用所述HTML标签，获取所述表格数据的条目总数；
根据所述宽度及所述条目总数计算所述表格数据的最大高度。
9.一种电子设备，其特征在于，所述电子设备包括：
至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至5中任意一项所述的表格数据展示方法。
10.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至5中任意一项所述的表格数据展示方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110629392.8A CN113297313B (zh) | 2021-06-07 | 2021-06-07 | 表格数据展示方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110629392.8A CN113297313B (zh) | 2021-06-07 | 2021-06-07 | 表格数据展示方法、装置、电子设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113297313A true CN113297313A (zh) | 2021-08-24 |
| CN113297313B CN113297313B (zh) | 2023-11-07 |
Family
ID=77327316
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110629392.8A Active CN113297313B (zh) | 2021-06-07 | 2021-06-07 | 表格数据展示方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113297313B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116521629A (zh) * | 2023-05-10 | 2023-08-01 | 广州市迪士普音响科技有限公司 | 文件可视化方法、装置及设备 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6313848B1 (en) * | 1999-01-06 | 2001-11-06 | Avaya Technology Corp. | Folded tables: a method of viewing wide tables with reduced need for horizontal scrolling |
| US20030110925A1 (en) * | 1996-07-10 | 2003-06-19 | Sitrick David H. | Electronic image visualization system and communication methodologies |
| US20110289397A1 (en) * | 2010-05-19 | 2011-11-24 | Mauricio Eastmond | Displaying Table Data in a Limited Display Area |
| CN107704576A (zh) * | 2017-09-30 | 2018-02-16 | 厦门海迈科技股份有限公司 | 数据展示优化方法、装置、终端设备及存储介质 |
| CN107945248A (zh) * | 2016-10-13 | 2018-04-20 | 北京国双科技有限公司 | 一种气泡图文字展示方法及装置 |
| CN109299449A (zh) * | 2018-10-10 | 2019-02-01 | 拉扎斯网络科技（上海）有限公司 | 表格处理方法、装置、电子设备及可读存储介质 |
| CN111931093A (zh) * | 2020-07-09 | 2020-11-13 | 北京皮尔布莱尼软件有限公司 | 一种页面中表格的展示方法及移动终端 |
-
2021
- 2021-06-07 CN CN202110629392.8A patent/CN113297313B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030110925A1 (en) * | 1996-07-10 | 2003-06-19 | Sitrick David H. | Electronic image visualization system and communication methodologies |
| US6313848B1 (en) * | 1999-01-06 | 2001-11-06 | Avaya Technology Corp. | Folded tables: a method of viewing wide tables with reduced need for horizontal scrolling |
| US20110289397A1 (en) * | 2010-05-19 | 2011-11-24 | Mauricio Eastmond | Displaying Table Data in a Limited Display Area |
| CN107945248A (zh) * | 2016-10-13 | 2018-04-20 | 北京国双科技有限公司 | 一种气泡图文字展示方法及装置 |
| CN107704576A (zh) * | 2017-09-30 | 2018-02-16 | 厦门海迈科技股份有限公司 | 数据展示优化方法、装置、终端设备及存储介质 |
| CN109299449A (zh) * | 2018-10-10 | 2019-02-01 | 拉扎斯网络科技（上海）有限公司 | 表格处理方法、装置、电子设备及可读存储介质 |
| CN111931093A (zh) * | 2020-07-09 | 2020-11-13 | 北京皮尔布莱尼软件有限公司 | 一种页面中表格的展示方法及移动终端 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116521629A (zh) * | 2023-05-10 | 2023-08-01 | 广州市迪士普音响科技有限公司 | 文件可视化方法、装置及设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113297313B (zh) | 2023-11-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107704576B (zh) | 数据展示优化方法、装置、终端设备及存储介质 | |
| CN108512879A (zh) | 一种信息推送方法及装置 | |
| CN107133001A (zh) | 一种面单打印方法、装置及客户端 | |
| CN106294301B (zh) | 报表生成方法和装置 | |
| CN107818008A (zh) | 页面加载方法及装置 | |
| CN112115145A (zh) | 数据采集方法、装置、电子设备及存储介质 | |
| CN110837366A (zh) | 一种表单生成方法、电子装置及计算机可读存储介质 | |
| CN111638876A (zh) | 动态表单实现方法、装置、电子设备及存储介质 | |
| JP2019525291A5 (zh) | ||
| CN112162748A (zh) | 应用程序首页配置方法、装置、电子设备及可读存储介质 | |
| CN112068911A (zh) | 电子表单的生成方法、装置、系统、设备以及介质 | |
| CN113297313B (zh) | 表格数据展示方法、装置、电子设备及存储介质 | |
| CN106708478B (zh) | 滚动视图显示方法及装置 | |
| CN114169303A (zh) | 基于vue.js的表格编辑方法、装置、设备及介质 | |
| CN111985194A (zh) | 数据存储方法、装置、电子设备及存储介质 | |
| CN106610824A (zh) | 一种页面高度自适应的方法及装置 | |
| US9035972B2 (en) | Intelligent axis labels | |
| CN112527280A (zh) | 界面展示方法、装置、服务器及可读存储介质 | |
| CN111198997A (zh) | 一种基于网页的数字显示方法及装置 | |
| CN115421691A (zh) | 一种基于虚拟列表的数据滚动方法、装置及计算机设备 | |
| CN115795133A (zh) | 数据加载方法、装置、电子设备及存储介质 | |
| CN113268949B (zh) | 基于动态字段的表格展示方法、装置、计算机设备及介质 | |
| CN110187881B (zh) | 一种异形窗口创建方法、系统、装置及计算机存储介质 | |
| CN114611031A (zh) | 数字滚动显示方法、装置、设备及介质 | |
| CN112051952A (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |