数据展示方法、装置、设备及计算机可读存储介质.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN110134308A(43)申请公布日2019.08.16(21)申请号201910416751.4(22)申请日2019.05.17(71)申请人深圳前海微众银行股份有限公司地址518052广东省深圳市南山区沙河西路1819号深圳湾科技生态园7栋A座(72)发明人欧碧莹林挺卢道和(74)专利代理机构深圳市世纪恒程知识产权代理事务所44287代理人胡海国(51)Int.Cl.G06F3/0484(2013.01)G06F3/0485(2013.01)G06F16/957(2019.01)权利要求书2页说明书9页附图2页(54)发明名称数据展示方法、装置、设备及计算机可读存储介质(57)摘要本发明公开了一种数据展示方法、装置、设备及计算机可读存储介质。该方法包括：在浏览器的可视化区域中设置自定义滚动条，并在基于自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；根据鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于滚动条滚动距离、可滚动区域的宽度/高度和可视化区域的宽度/高度计算得到可视化区域的偏移值；根据可视化区域的偏移值和可视化区域的宽度/高度确定目标数据组，获取与目标数据组对应的目标数据，并对目标数据进行渲染展示。本发明能解决现有技术中在进行数据展示时，因数据量过大而导致javascript脚本阻塞、页面卡顿、甚至浏览器崩溃的问题。CN110134308ACN110134308A权利要求书1/2页1.一种数据展示方法，其特征在于，所述数据展示方法包括：在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。2.如权利要求1所述的数据展示方法，其特征在于，所述根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度的步骤包括：确定所述可视化区域中当前显示数据所属的业务类型，并根据所述业务类型和所述鼠标移动事件确定列表项的宽度/高度类型；根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度；调用预设函数获取可视化区域的宽度/高度。3.如权利要求2所述的数据展示方法，其特征在于，所述根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度的步骤包括：若所述宽度/高度类型为固定宽度/高度，则确定对应的计算规则为第一计算规则；基于所述第一计算规则获取列表项的宽度/高度和列表项的项数，对所述列表项的宽度/高度和所述列表项的项数进行相乘处理，得到可滚动区域的宽度/高度。4.如权利要求2所述的数据展示方法，其特征在于，所述根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度的步骤包括：若所述宽度/高度类型为非固定宽度/高度，则确定对应的计算规则为第二计算规则；基于所述第二计算规则获取已滚动列表项的宽度/高度、预估宽度/高度值和未滚动列表项的项数，对所述预估宽度/高度值和所述未滚动列表项的项数进行相乘处理，得到未滚动列表项的宽度/高度；对所述未滚动列表项的宽度/高度和所述已滚动列表项的宽度/高度进行加和处理，得到可滚动区域的宽度/高度。5.如权利要求1所述的数据展示方法，其特征在于，所述根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组的步骤包括：获取所述可视化区域当前显示数据组的起始列表项编号和终止列表项编号，并根据所述鼠标移动事件获取预设数量的与所述当前显示数据组的起始/终止列表项相邻的列表项的宽度/高度，记作相邻列表项的宽度/高度；根据所述相邻列表项的宽度/高度、所述可视化区域的偏移值、所述可视化区域宽度/高度、所述起始列表项编号和所述终止列表项编号得到目标显示数据的目标起始列表项编号和目标终止列表项编号，以确定得到目标数据组。6.如权利要求1至5中任一项所述的数据展示方法，其特征在于，所述数据展示方法还包括：对所述浏览器前端框架中的响应式数据对象进行深冻结处理。2CN110134308A权利要求书2/2页7.如权利要求1至5中任一项所述的数据展示方法，其特征在于，所述数据展示方法还包括：根据所述可视化区域的偏移值更新与所述自定义滚动条对应的内边距值，并根据所述更新后的内边距值至更新所述自定义滚动条的位置。