CN110134308A - 数据展示方法、装置、设备及计算机可读存储介质 - Google Patents
数据展示方法、装置、设备及计算机可读存储介质 Download PDFInfo
- Publication number
- CN110134308A CN110134308A CN201910416751.4A CN201910416751A CN110134308A CN 110134308 A CN110134308 A CN 110134308A CN 201910416751 A CN201910416751 A CN 201910416751A CN 110134308 A CN110134308 A CN 110134308A
- Authority
- CN
- China
- Prior art keywords
- width
- data
- viewable area
- scroll bar
- target
- 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
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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- 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/04845—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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- 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
Abstract
本发明公开了一种数据展示方法、装置、设备及计算机可读存储介质。该方法包括：在浏览器的可视化区域中设置自定义滚动条，并在基于自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；根据鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于滚动条滚动距离、可滚动区域的宽度/高度和可视化区域的宽度/高度计算得到可视化区域的偏移值；根据可视化区域的偏移值和可视化区域的宽度/高度确定目标数据组，获取与目标数据组对应的目标数据，并对目标数据进行渲染展示。本发明能解决现有技术中在进行数据展示时，因数据量过大而导致javascript脚本阻塞、页面卡顿、甚至浏览器崩溃的问题。
Description
技术领域
本发明涉及金融科技(Fintech)技术领域，尤其涉及一种数据展示方法、装置、设备及计算机可读存储介质。
背景技术
随着计算机技术的发展，越来越多的技术(大数据、分布式、人工智能等)应用在金融领域，传统金融业正在逐步向金融科技(Fintech)转变，但由于金融行业的安全性、实时性要求，也对技术提出了更高的要求。
在大数据时代，数据量是以超指数级的速度增长的，对于这些海量的数据信息，通常以列表的方式进行可视化展示。在进行数据展示时，目前一般是直接将后台返回的数据遍历生成对应的节点，进而将后台返回的所有数据一次性全部渲染到页面上，以进行展示。但是后台所返回的数据可能是大数据集，如果直接展示可能会因为渲染的节点数据量过大，而导致javascript脚本阻塞、页面卡顿，严重时甚至还会导致浏览器崩溃。
发明内容
本发明的主要目的在于提供一种数据展示方法、装置、设备及计算机可读存储介质，旨在解决现有技术中在进行数据展示时，因数据量过大而导致javascript脚本阻塞、页面卡顿、甚至浏览器崩溃的问题。
为实现上述目的，本发明提供一种数据展示方法，所述数据展示方法包括：
在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；
根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；
根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。
可选地，所述根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度的步骤包括：
确定所述可视化区域中当前显示数据所属的业务类型，并根据所述业务类型和所述鼠标移动事件确定列表项的宽度/高度类型；
根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度；
调用预设函数获取可视化区域的宽度/高度。
可选地，所述根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度的步骤包括：
若所述宽度/高度类型为固定宽度/高度，则确定对应的计算规则为第一计算规则；
基于所述第一计算规则获取列表项的宽度/高度和列表项的项数，对所述列表项的宽度/高度和所述列表项的项数进行相乘处理，得到可滚动区域的宽度/高度。
可选地，所述根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度的步骤包括：
若所述宽度/高度类型为非固定宽度/高度，则确定对应的计算规则为第二计算规则；
基于所述第二计算规则获取已滚动列表项的宽度/高度、预估宽度/高度值和未滚动列表项的项数，对所述预估宽度/高度值和所述未滚动列表项的项数进行相乘处理，得到未滚动列表项的宽度/高度；
对所述未滚动列表项的宽度/高度和所述已滚动列表项的宽度/高度进行加和处理，得到可滚动区域的宽度/高度。
可选地，所述根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组的步骤包括：
获取所述可视化区域当前显示数据组的起始列表项编号和终止列表项编号，并根据所述鼠标移动事件获取预设数量的与所述当前显示数据组的起始/终止列表项相邻的列表项的宽度/高度，记作相邻列表项的宽度/高度；
根据所述相邻列表项的宽度/高度、所述可视化区域的偏移值、所述可视化区域宽度/高度、所述起始列表项编号和所述终止列表项编号得到目标显示数据的目标起始列表项编号和目标终止列表项编号，以确定得到目标数据组。
可选地，所述数据展示方法还包括：
对所述浏览器前端框架中的响应式数据对象进行深冻结处理。
可选地，所述数据展示方法还包括：
根据所述可视化区域的偏移值更新与所述自定义滚动条对应的内边距值，并根据所述更新后的内边距值至更新所述自定义滚动条的位置。
此外，为实现上述目的，本发明还提供一种数据展示装置，所述数据展示装置包括：
获取模块，用于在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；
计算模块，用于根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；
展示模块，用于根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。
此外，为实现上述目的，本发明还提供一种数据展示设备，所述数据展示设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的数据展示程序，所述数据展示程序被所述处理器执行时实现如上所述的数据展示方法的步骤。
此外，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有数据展示程序，所述数据展示程序被处理器执行时实现如上所述的数据展示方法的步骤。
本发明提供一种数据展示方法、装置、设备及计算机可读存储介质，先在浏览器的可视化区域中设置自定义滚动条，当基于自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动的距离；根据鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，基于滚动条滚动距离、可滚动区域的宽度/高度和可视化区域的宽度/高度计算得到可视化区域的偏移值；根据可视化区域的偏移值和可视化区域的宽度/高度确定目标数据组，获取与目标数据组对应的目标数据，并对目标数据进行渲染展示。通过上述方式，本发明采用自定义滚动条的虚拟列表的方式来进行数据展示，根据自定义滚动条监听到的鼠标滚动事件，确定得到目标数据组，以渲染展示对应的目标数据，即只显示所有数据中的某一个部分，而不是去完整地渲染展示所有数据，从而可以大量减少在页面上展示的节点数量，相比于现有技术中对所有数据进行一次性渲染展示，本发明可减轻浏览器的压力，可避免javascript脚本阻塞、页面卡顿和浏览器崩溃的情况。
附图说明
图1为本发明实施例方案涉及的硬件运行环境的设备结构示意图；
图2为本发明数据展示方法第一实施例的流程示意图；
图3为本发明数据展示装置第一实施例的功能模块示意图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
参照图1，图1为本发明实施例方案涉及的硬件运行环境的设备结构示意图。
本发明实施例数据展示设备可以是智能手机，也可以是PC(Personal Computer，个人计算机)、平板电脑、便携计算机等终端设备。
如图1所示，该数据展示设备可以包括：处理器1001，例如CPU，通信总线1002，用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如Wi-Fi接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
本领域技术人员可以理解，图1中示出的数据展示设备结构并不构成对数据展示设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及数据展示程序。
在图1所示的终端中，网络接口1004主要用于连接后台服务器，与后台服务器进行数据通信；用户接口1003主要用于连接客户端，与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的数据展示程序，并执行以下数据展示方法的各个步骤。
基于上述硬件结构，提出本发明数据展示方法的各实施例。
本发明提供一种数据展示方法。
参照图2，图2为本发明数据展示方法第一实施例的流程示意图。
在本实施例中，该数据展示方法包括：
步骤S10，在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；
计算机技术的发展和大数据的来临，计算机技术在金融机构(如银行、保险、证券、理财机构)的应用也越来越广，现在的金融机构中在进行数据处理，比如数据展示或数据分析时，对时效性要求更高。由于数据量越来越多，目前的浏览器进行商数据展示时，容易卡顿甚至崩溃，这种情况严重不符合金融机构的要求。
本实施例的数据展示方法是由数据展示设备实现的，该数据展示设备中安装有浏览器，以通过浏览器中的窗口进行数据展示。在本实施例中，先在浏览器的可视化区域中设置自定义滚动条。对于自定义滚动条的设置，可以基于设定padding值(内边距值)来设置得到自定义滚动条，具体的，通过设定padding-left(左内边距)或padding-right(右内边距)，可以设置水平方向的自定义滚动条；通过设定padding-top(上内边距)或padding-bottom(下内边距)，可以设置垂直方向的自定义滚动条。基于该自定义滚动条，可以监听mousedown(鼠标按下)事件、mousemove(鼠标移动)事件和mouseup(鼠标松开)事件，用户在按下鼠标时，会触发mousedown事件，用户在移动鼠标时，会触发mousemove事件，用户在松开鼠标时，会触发mouseup事件。当基于自定义滚动条监听到该mousedown事件时，设置flag标识为true，当flag为true时，且当基于自定义滚动条监听到mousemove事件时，通过浏览器中的预设回调参数获取到e.target.pageX，即滚动条滚动的距离。当基于自定义滚动条监听到该mouseup事件时，设置flag为false。
步骤S20，根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；
在获取到滚动条滚动距离之后，根据鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度。具体的，若鼠标移动事件是基于水平方向的自定义滚动条触发的，则获取可滚动区域的宽度和可视化区域的宽度，并基于滚动条滚动距离、可滚动区域的宽度和可视化区域的宽度计算得到可视化区域的偏移值；若鼠标移动事件是基于垂直方向的自定义滚动条触发的，则获取可滚动区域的高度和可视化区域的高度，并基于滚动条滚动距离、可滚动区域的高度和可视化区域的高度计算得到可视化区域的偏移值。
其中，步骤“根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度”包括：
步骤a1，确定所述可视化区域中当前显示数据所属的业务类型，并根据所述业务类型和所述鼠标移动事件确定列表项的宽度/高度类型；
先确定可视化区域中当前显示数据所属的业务类型，并根据业务类型和鼠标移动事件确定列表项的宽度/高度类型。其中，若鼠标移动事件是基于水平方向的自定义滚动条触发的，则根据业务类型和鼠标移动事件确定列表项的宽度类型；若鼠标移动事件是基于垂直方向的自定义滚动条触发的，则根据业务类型和鼠标移动事件确定列表项的高度类型。
步骤a2，根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度；
然后，根据宽度/高度类型确定对应的计算规则，并基于计算规则计算可滚动区域的宽度/高度。由于可滚动区域的宽度/高度分两种类型，一种为固定宽度/高度，即所有列表项的宽度/高度都是一样的，一种为非固定宽度/高度，即各列表项的宽度/高度不一致，对应的，可滚动区域的宽度/高度的计算方式有两种，即，步骤a2可以包括：
步骤a21，若所述宽度/高度类型为固定宽度/高度，则确定对应的计算规则为第一计算规则；
步骤a22，基于所述第一计算规则获取列表项的宽度/高度和列表项的项数，对所述列表项的宽度/高度和所述列表项的项数进行相乘处理，得到可滚动区域的宽度/高度。
若宽度/高度类型为固定宽度/高度，则确定对应的计算规则为第一计算规则，然后，基于第一计算规则获取列表项的宽度/高度和列表项的项数，对列表项的宽度/高度和列表项的项数进行相乘处理，得到可滚动区域的宽度/高度。例如，有1000列数据(即列表项的项数为1000)，每列宽度都为50，那么可滚动区域的宽度就是50*1000。
其中，步骤a2可以包括：
步骤a23，若所述宽度/高度类型为非固定宽度/高度，则确定对应的计算规则为第二计算规则；
若宽度/高度类型为非固定宽度/高度，则确定对应的计算规则为第二计算规则。
步骤a24，基于所述第二计算规则获取已滚动列表项的宽度/高度、预估宽度/高度值和未滚动列表项的项数，对所述预估宽度/高度值和所述未滚动列表项的项数进行相乘处理，得到未滚动列表项的宽度/高度；
步骤a25，对所述未滚动列表项的宽度/高度和所述已滚动列表项的宽度/高度进行加和处理，得到可滚动区域的宽度/高度。
当宽度/高度类型为非固定宽度/高度时，即各列表项的宽度/高度不一致时，现有技术中一般是通过computedWidth或computedHeight的方式进行计算获取到实际的可滚动区域，但是computedWidth或computedHeight的计算开销非常大，一次性计算大量列表项的宽度/高度会造成性能问题，增加浏览器的压力。因此，本实施例中，通过设定预估值的方式来计算可滚动区域的宽度/高度，即在虚拟列表初始化时加入预估值estimatedValue，设定一个接近实际宽度/高度的值，这个预估值可以是任意值，以预估计算可滚动区域，将还没有更新部分区域的数据以预估的宽度/高度计算相乘，在拖动可视化区域的时候再去更新实际可滚动区域。具体的，基于第二计算规则获取已滚动列表项的宽度/高度、预估宽度/高度值和未滚动列表项的项数，对预估宽度/高度值和未滚动列表项的项数进行相乘处理，得到未滚动列表项的宽度/高度；然后，对未滚动列表项的宽度/高度和已滚动列表项的宽度/高度进行加和处理，得到可滚动区域的宽度/高度。
步骤a3，调用预设函数获取可视化区域的宽度/高度。
对于可视化区域的宽度/高度的获取，可调用预设函数直接获取，具体的，可通过window.innerWidth来获取可视化区域的宽度，通过window.innerHeight来获取可视化区域的高度。
在获取到可滚动区域的宽度/高度和可视化区域的宽度/高度之后，基于滚动条滚动距离、可滚动区域的宽度/高度和可视化区域的宽度/高度计算得到可视化区域的偏移值。对于可视化区域的偏移值的计算，由于a/b＝c/d，其中，a表示可视化区域的宽度/高度，b表示可滚动区域的宽度/高度，c表示滚动条滚动距离，d表示可视化区域的偏移值，对应的，可视化区域的偏移值可通过下述计算公式计算得到：d＝bc/a。
步骤S30，根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。
在计算到可视化区域的偏移值之后，根据可视化区域的偏移值和可视化区域的宽度/高度确定目标数据组，获取与目标数据组对应的目标数据，并对目标数据进行渲染展示。目标数据的渲染展示方法与现有技术相一致，此处不再赘述。
其中，步骤“根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组”包括：
步骤b1，获取所述可视化区域当前显示数据组的起始列表项编号和终止列表项编号，并根据所述鼠标移动事件获取预设数量的与所述当前显示数据组的起始/终止列表项相邻的列表项的宽度/高度，记作相邻列表项的宽度/高度；
先获取可视化区域当前显示数据组的起始列表项编号和终止列表项编号，然后根据鼠标移动事件获取预设数量的与当前显示数据组的起始/终止列表项相邻的列表项的宽度/高度，记作相邻列表项的宽度/高度。其中，预设数量可以根据实际情况进行设定，或者根据滚动条滚动距离、可视化区域的宽度/高度和可滚动区域的宽度/高度等参数进行确定。在获取相邻列表项的宽度/高度时，是根据鼠标移动事件的移动方向来确定是获取与当前显示数据组的起始列表项相邻的列表项还是获取与当前显示数据组的终止列表项相邻的列表项。例如，用户拖动鼠标向右或向下滑动时，即移动方向为向右或向下时，是获取与当前显示数据组的终止列表项相邻的列表项的参数；用户拖动鼠标向左或向上滑动时，即移动方向为向左或向上时，是获取与当前显示数据组的起始列表项相邻的列表项的参数。
步骤b2，根据所述相邻列表项的宽度/高度、所述可视化区域的偏移值、所述可视化区域宽度/高度、所述起始列表项编号和所述终止列表项编号得到目标显示数据的目标起始列表项编号和目标终止列表项编号，以确定得到目标数据组。
然后，根据相邻列表项的宽度/高度、可视化区域的偏移值、可视化区域宽度/高度、起始列表项编号和终止列表项编号得到目标显示数据的目标起始列表项编号和目标终止列表项编号，以确定得到目标数据组。
本发明实施例提供一种数据展示方法，先在浏览器的可视化区域中设置自定义滚动条，当基于自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动的距离；根据鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，基于滚动条滚动距离、可滚动区域的宽度/高度和可视化区域的宽度/高度计算得到可视化区域的偏移值；根据可视化区域的偏移值和可视化区域的宽度/高度确定目标数据组，获取与目标数据组对应的目标数据，并对目标数据进行渲染展示。通过上述方式，本实施例中采用自定义滚动条的虚拟列表的方式来进行数据展示，根据自定义滚动条监听到的鼠标滚动事件，确定得到目标数据组，以渲染展示对应的目标数据，即只显示所有数据中的某一个部分，而不是去完整地渲染展示所有数据，从而可以大量减少在页面上展示的节点数量，相比于现有技术中对所有数据进行一次性渲染展示，本发明实施例可减轻浏览器的压力，可避免javascript脚本阻塞、页面卡顿和浏览器崩溃的情况。
进一步的，基于图2所示的第一实施例，提出本发明数据展示方法的第二实施例。
在本实施例中，该数据展示方法还包括：
对所述浏览器前端框架中的响应式数据对象进行深冻结处理。
在本实施例中，为减轻浏览器的压力，还可对浏览器前端框架中的响应式数据对象进行深冻结处理，通过深冻结处理，可避免响应式数据对象被操作内部的getter和setter方法，从而可有效减少响应式对象触发getter(getter是一种获得属性值的方法)和setter(setter是一种设置属性值的方法)的联动计算，进而可减轻浏览器的压力。其中，浏览器前端框架一般为vue框架(一个构建数据驱动的web界面的渐进式框架)，vue框架中的data数据对象都是利用Object.defineProperty方法来设置getter、setter进行数据监听操作，对应的，可采用js(JavaScript，一种直译式脚本语言)提供的Object.deepfreeze方法来进行深冻结处理，以冻结响应式对象。Object.deepfreeze方法可以冻结一个对象，被冻结的对象不能修改和删除该对象已有的属性，不能对该对象添加新的属性，以及不能修改该对象已有属性的可枚举、可配置性、可写性，该方法返回被冻结的对象。
进一步的，基于上述各实施例，提出本发明数据展示方法的第三实施例。
在本实施例中，该数据展示方法还包括：
根据所述可视化区域的偏移值更新与所述自定义滚动条对应的内边距值，并根据所述更新后的内边距值至更新所述自定义滚动条的位置。
在本实施例中，在对目标数据进行渲染展示的同时，需随着更新自定义滚动条的位置。具体的，根据可视化区域的偏移值更新与自定义滚动条对应的padding(内边距)值，进而根据更新后的padding值至更新自定义滚动条的位置。通过上述方式，可实现智能更新自定义滚动条的位置。
本发明具体可应用在金融机构中的业务操作页面过程中，例如银行机构在支付操作页面、贷款操作页面或者存款操作页面的操作过程中，需要进行支付操作数据、贷款操作数据或存款操作数据展示的时候，先在浏览器的可视化区域中设置自定义滚动条，当基于自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动的距离；根据鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，基于滚动条滚动距离、可滚动区域的宽度/高度和可视化区域的宽度/高度计算得到可视化区域的偏移值；根据可视化区域的偏移值和可视化区域的宽度/高度确定目标数据组，获取与目标数据组对应的目标数据，并对目标数据进行渲染展示。通过上述方式，每次只显示所有数据(支付数据、贷款操作数据或存款操作数据)中的某一个部分，而不是去完整地渲染展示所有数据，从而可以大量减少在页面上展示的节点数量，相比于现有技术中对所有数据进行一次性渲染展示，本发明可减轻浏览器的压力，提高了操作页面的处理速度，更加符合银行机构的操作要求。此外，该操作页面也可以是银行机构的后台开发过程中，对开发数据的操作，具体方式与上述一致，此处不做赘述。
本发明还提供一种数据展示装置。
参照图3，图3为本发明数据展示装置第一实施例的功能模块示意图。
如图3所示，所述数据展示装置包括：
获取模块10，用于在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；
计算模块20，用于根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；
展示模块30，用于根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。
进一步地，所述计算模块20包括：
第一确定单元，用于确定所述可视化区域中当前显示数据所属的业务类型，并根据所述业务类型和所述鼠标移动事件确定列表项的宽度/高度类型；
计算单元，用于根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度；
第一获取单元，用于调用预设函数获取可视化区域的宽度/高度。
进一步地，所述计算单元包括：
第一确定子单元，用于若所述宽度/高度类型为固定宽度/高度，则确定对应的计算规则为第一计算规则；
第一计算子单元，用于基于所述第一计算规则获取列表项的宽度/高度和列表项的项数，对所述列表项的宽度/高度和所述列表项的项数进行相乘处理，得到可滚动区域的宽度/高度。
进一步地，所述计算单元包括：
第二确定子单元，用于若所述宽度/高度类型为非固定宽度/高度，则确定对应的计算规则为第二计算规则；
第二计算子单元，用于基于所述第二计算规则获取已滚动列表项的宽度/高度、预估宽度/高度值和未滚动列表项的项数，对所述预估宽度/高度值和所述未滚动列表项的项数进行相乘处理，得到未滚动列表项的宽度/高度；
第三计算子单元，用于对所述未滚动列表项的宽度/高度和所述已滚动列表项的宽度/高度进行加和处理，得到可滚动区域的宽度/高度。
进一步地，所述展示模块30包括：
第二获取单元，用于获取所述可视化区域当前显示数据组的起始列表项编号和终止列表项编号，并根据所述鼠标移动事件获取预设数量的与所述当前显示数据组的起始/终止列表项相邻的列表项的宽度/高度，记作相邻列表项的宽度/高度；
第二确定单元，用于根据所述相邻列表项的宽度/高度、所述可视化区域的偏移值、所述可视化区域宽度/高度、所述起始列表项编号和所述终止列表项编号得到目标显示数据的目标起始列表项编号和目标终止列表项编号，以确定得到目标数据组。
进一步地，所述数据展示装置还包括：
深冻结处理模块，用于对所述浏览器前端框架中的响应式数据对象进行深冻结处理。
进一步地，所述数据展示装置还包括：
位置更新模块，用于根据所述可视化区域的偏移值更新与所述自定义滚动条对应的内边距值，并根据所述更新后的内边距值至更新所述自定义滚动条的位置。
其中，上述数据展示装置中各个模块的功能实现与上述数据展示方法实施例中各步骤相对应，其功能和实现过程在此处不再一一赘述。
本发明还提供一种计算机可读存储介质，该计算机可读存储介质上存储有数据展示程序，所述数据展示程序被处理器执行时实现如以上任一项实施例所述的数据展示方法的步骤。
本发明计算机可读存储介质的具体实施例与上述数据展示方法各实施例基本相同，在此不作赘述。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种数据展示方法，其特征在于，所述数据展示方法包括：
在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；
根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；
根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。
2.如权利要求1所述的数据展示方法，其特征在于，所述根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度的步骤包括：
确定所述可视化区域中当前显示数据所属的业务类型，并根据所述业务类型和所述鼠标移动事件确定列表项的宽度/高度类型；
根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度；
调用预设函数获取可视化区域的宽度/高度。
3.如权利要求2所述的数据展示方法，其特征在于，所述根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度的步骤包括：
若所述宽度/高度类型为固定宽度/高度，则确定对应的计算规则为第一计算规则；
基于所述第一计算规则获取列表项的宽度/高度和列表项的项数，对所述列表项的宽度/高度和所述列表项的项数进行相乘处理，得到可滚动区域的宽度/高度。
4.如权利要求2所述的数据展示方法，其特征在于，所述根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度的步骤包括：
若所述宽度/高度类型为非固定宽度/高度，则确定对应的计算规则为第二计算规则；
基于所述第二计算规则获取已滚动列表项的宽度/高度、预估宽度/高度值和未滚动列表项的项数，对所述预估宽度/高度值和所述未滚动列表项的项数进行相乘处理，得到未滚动列表项的宽度/高度；
对所述未滚动列表项的宽度/高度和所述已滚动列表项的宽度/高度进行加和处理，得到可滚动区域的宽度/高度。
5.如权利要求1所述的数据展示方法，其特征在于，所述根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组的步骤包括：
获取所述可视化区域当前显示数据组的起始列表项编号和终止列表项编号，并根据所述鼠标移动事件获取预设数量的与所述当前显示数据组的起始/终止列表项相邻的列表项的宽度/高度，记作相邻列表项的宽度/高度；
根据所述相邻列表项的宽度/高度、所述可视化区域的偏移值、所述可视化区域宽度/高度、所述起始列表项编号和所述终止列表项编号得到目标显示数据的目标起始列表项编号和目标终止列表项编号，以确定得到目标数据组。
6.如权利要求1至5中任一项所述的数据展示方法，其特征在于，所述数据展示方法还包括：
对所述浏览器前端框架中的响应式数据对象进行深冻结处理。
7.如权利要求1至5中任一项所述的数据展示方法，其特征在于，所述数据展示方法还包括：
根据所述可视化区域的偏移值更新与所述自定义滚动条对应的内边距值，并根据所述更新后的内边距值至更新所述自定义滚动条的位置。
8.一种数据展示装置，其特征在于，所述数据展示装置包括：
获取模块，用于在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；
计算模块，用于根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；
展示模块，用于根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。
9.一种数据展示设备，其特征在于，所述数据展示设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的数据展示程序，所述数据展示程序被所述处理器执行时实现如权利要求1至7中任一项所述的数据展示方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有数据展示程序，所述数据展示程序被处理器执行时实现如权利要求1至7中任一项所述的数据展示方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910416751.4A CN110134308A (zh) | 2019-05-17 | 2019-05-17 | 数据展示方法、装置、设备及计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910416751.4A CN110134308A (zh) | 2019-05-17 | 2019-05-17 | 数据展示方法、装置、设备及计算机可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110134308A true CN110134308A (zh) | 2019-08-16 |
Family
ID=67571319
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910416751.4A Pending CN110134308A (zh) | 2019-05-17 | 2019-05-17 | 数据展示方法、装置、设备及计算机可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110134308A (zh) |
Cited By (18)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110489618A (zh) * | 2019-09-12 | 2019-11-22 | 北京启迪区块链科技发展有限公司 | 树形图渲染方法、装置、设备和介质 |
| CN110851058A (zh) * | 2019-11-11 | 2020-02-28 | 支付宝(杭州)信息技术有限公司 | 一种页面虚拟滚动方法、装置及设备 |
| CN110989907A (zh) * | 2019-11-27 | 2020-04-10 | 浙江大华技术股份有限公司 | 一种数据显示方法、装置、电子设备及存储介质 |
| CN111339463A (zh) * | 2020-02-19 | 2020-06-26 | 望海康信(北京)科技股份公司 | 列表数据的展示方法、装置和电子设备 |
| CN111381823A (zh) * | 2020-03-11 | 2020-07-07 | 四川长虹电器股份有限公司 | Web端长列表渲染方法 |
| CN111931093A (zh) * | 2020-07-09 | 2020-11-13 | 北京皮尔布莱尼软件有限公司 | 一种页面中表格的展示方法及移动终端 |
| CN112235621A (zh) * | 2020-10-10 | 2021-01-15 | Vidaa美国公司 | 一种可视区域的显示方法及显示设备 |
| CN112269619A (zh) * | 2020-11-13 | 2021-01-26 | 中盈优创资讯科技有限公司 | 一种基于大数据量的页面展示方法及装置 |
| CN112579234A (zh) * | 2020-12-15 | 2021-03-30 | 广州品唯软件有限公司 | 列表元素位置的估算方法、移动终端及存储介质 |
| CN113010829A (zh) * | 2021-03-31 | 2021-06-22 | 建信金融科技有限责任公司 | 一种数据分区可视化方法、装置、计算机设备及存储介质 |
| CN113343144A (zh) * | 2021-05-31 | 2021-09-03 | 北京达佳互联信息技术有限公司 | 数据的显示方法、装置及设备 |
| CN113590656A (zh) * | 2021-07-21 | 2021-11-02 | 上海淇玥信息技术有限公司 | 一种查询数据渲染方法、装置和电子设备 |
| CN114090165A (zh) * | 2021-11-24 | 2022-02-25 | 北京字节跳动网络技术有限公司 | 页面组件展示位置调整方法、装置、计算机设备及介质 |
| CN114415919A (zh) * | 2022-01-21 | 2022-04-29 | 重庆允丰科技有限公司 | 表格横向滚动条的粘滞方法、复用方法及计算机存储介质 |
| CN114510190A (zh) * | 2022-04-18 | 2022-05-17 | 苏州万店掌网络科技有限公司 | 一种前端页面渲染方法、装置、设备及存储介质 |
| CN114863008A (zh) * | 2022-06-02 | 2022-08-05 | 北京新唐思创教育科技有限公司 | 图像处理方法、装置、电子设备及存储介质 |
| CN115098006A (zh) * | 2022-06-28 | 2022-09-23 | 徐工汉云技术股份有限公司 | 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置 |
| CN116521629A (zh) * | 2023-05-10 | 2023-08-01 | 广州市迪士普音响科技有限公司 | 文件可视化方法、装置及设备 |
-
2019
- 2019-05-17 CN CN201910416751.4A patent/CN110134308A/zh active Pending
Cited By (25)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110489618A (zh) * | 2019-09-12 | 2019-11-22 | 北京启迪区块链科技发展有限公司 | 树形图渲染方法、装置、设备和介质 |
| CN110851058B (zh) * | 2019-11-11 | 2021-03-30 | 支付宝(杭州)信息技术有限公司 | 一种页面虚拟滚动方法、装置及设备 |
| CN110851058A (zh) * | 2019-11-11 | 2020-02-28 | 支付宝(杭州)信息技术有限公司 | 一种页面虚拟滚动方法、装置及设备 |
| CN110989907A (zh) * | 2019-11-27 | 2020-04-10 | 浙江大华技术股份有限公司 | 一种数据显示方法、装置、电子设备及存储介质 |
| CN110989907B (zh) * | 2019-11-27 | 2021-06-15 | 浙江大华技术股份有限公司 | 一种数据显示方法、装置、电子设备及存储介质 |
| CN111339463A (zh) * | 2020-02-19 | 2020-06-26 | 望海康信(北京)科技股份公司 | 列表数据的展示方法、装置和电子设备 |
| CN111339463B (zh) * | 2020-02-19 | 2023-07-04 | 望海康信(北京)科技股份公司 | 列表数据的展示方法、装置和电子设备 |
| CN111381823A (zh) * | 2020-03-11 | 2020-07-07 | 四川长虹电器股份有限公司 | Web端长列表渲染方法 |
| CN111381823B (zh) * | 2020-03-11 | 2022-02-18 | 四川长虹电器股份有限公司 | Web端长列表渲染方法 |
| CN111931093A (zh) * | 2020-07-09 | 2020-11-13 | 北京皮尔布莱尼软件有限公司 | 一种页面中表格的展示方法及移动终端 |
| CN112235621A (zh) * | 2020-10-10 | 2021-01-15 | Vidaa美国公司 | 一种可视区域的显示方法及显示设备 |
| CN112269619A (zh) * | 2020-11-13 | 2021-01-26 | 中盈优创资讯科技有限公司 | 一种基于大数据量的页面展示方法及装置 |
| CN112579234A (zh) * | 2020-12-15 | 2021-03-30 | 广州品唯软件有限公司 | 列表元素位置的估算方法、移动终端及存储介质 |
| CN112579234B (zh) * | 2020-12-15 | 2024-02-09 | 广州品唯软件有限公司 | 列表元素位置的估算方法、移动终端及存储介质 |
| CN113010829A (zh) * | 2021-03-31 | 2021-06-22 | 建信金融科技有限责任公司 | 一种数据分区可视化方法、装置、计算机设备及存储介质 |
| CN113010829B (zh) * | 2021-03-31 | 2023-01-20 | 中国建设银行股份有限公司 | 一种数据分区可视化方法、装置、计算机设备及存储介质 |
| CN113343144A (zh) * | 2021-05-31 | 2021-09-03 | 北京达佳互联信息技术有限公司 | 数据的显示方法、装置及设备 |
| CN113590656A (zh) * | 2021-07-21 | 2021-11-02 | 上海淇玥信息技术有限公司 | 一种查询数据渲染方法、装置和电子设备 |
| CN114090165A (zh) * | 2021-11-24 | 2022-02-25 | 北京字节跳动网络技术有限公司 | 页面组件展示位置调整方法、装置、计算机设备及介质 |
| CN114415919A (zh) * | 2022-01-21 | 2022-04-29 | 重庆允丰科技有限公司 | 表格横向滚动条的粘滞方法、复用方法及计算机存储介质 |
| CN114510190A (zh) * | 2022-04-18 | 2022-05-17 | 苏州万店掌网络科技有限公司 | 一种前端页面渲染方法、装置、设备及存储介质 |
| CN114863008A (zh) * | 2022-06-02 | 2022-08-05 | 北京新唐思创教育科技有限公司 | 图像处理方法、装置、电子设备及存储介质 |
| CN114863008B (zh) * | 2022-06-02 | 2023-03-10 | 北京新唐思创教育科技有限公司 | 图像处理方法、装置、电子设备及存储介质 |
| CN115098006A (zh) * | 2022-06-28 | 2022-09-23 | 徐工汉云技术股份有限公司 | 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置 |
| CN116521629A (zh) * | 2023-05-10 | 2023-08-01 | 广州市迪士普音响科技有限公司 | 文件可视化方法、装置及设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110134308A (zh) | 数据展示方法、装置、设备及计算机可读存储介质 | |
| JP6430020B2 (ja) | ウェブページのローディング方法およびシステム | |
| US9805377B2 (en) | Unified content visibility | |
| CN103853417B (zh) | 网络动态图片的滚动分页显示方法和装置 | |
| US20110035263A1 (en) | Process for increasing user-interaction rates for document elements | |
| CN104166553B (zh) | 一种显示方法及电子设备 | |
| CN109741173A (zh) | 可疑洗钱团伙的识别方法、装置、设备及计算机存储介质 | |
| CN109670940A (zh) | 基于机器学习的信用风险评估模型生成方法及相关设备 | |
| CN102955658B (zh) | 交互界面中的页面切换方法及装置 | |
| CN103677592B (zh) | 网页内滑动显示网页对象的方法及装置 | |
| CN105094622B (zh) | 调节表格列宽的方法及设备 | |
| CN104572783A (zh) | 网页点击情况的展示方法及装置 | |
| CN106156194A (zh) | 一种形成用户操作路径的方法及装置 | |
| CN107071556A (zh) | 一种界面渲染方法和装置 | |
| CN108009185A (zh) | 提供页面信息的方法及装置 | |
| CN109683754A (zh) | 一种移动终端页面切换方法及装置 | |
| CN104166494B (zh) | 页面控制方法及装置 | |
| CN103942202B (zh) | 网页文本域高度自适应缩放方法及装置 | |
| CN110415102A (zh) | 用户信用风险评估方法及装置、计算机可读存储介质 | |
| CN112182444A (zh) | 数据渲染系统、方法及电子设备 | |
| CN107239566A (zh) | 用户日志生成方法、电子设备及计算机存储介质 | |
| CN105183474B (zh) | 瀑布流式图片显示的方法和装置 | |
| CN111694493B (zh) | 一种网页截图方法、计算机设备及可读存储介质 | |
| CN107870795A (zh) | 一种电子地图显示的方法及装置 | |
| CN104408133B (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 |