1.本发明涉及页面数据显示
技术领域：
：，尤其涉及一种页面表格数据的渲染方法及装置。
背景技术：
：：2.前端开发是创建web页面或app等前端界面呈现给用户的过程，通过html、css、及javascript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。前端开发主要职能就是把网站的界面更好的呈现给用户。3.前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化过程中，页面制作是web1.0时代的产物，早期网站主要内容是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和html5、css3的应用，现代网页更加美观，交互效果显著，功能更加强大。4.表格在网页中有两个作用，一是布局网页内容；二是组织相关数据，以行列的形式将数据罗列出来，结构紧凑，数据直观，因而在日常生活中，表格被大量使用，如工资表、工作报表、财务报表、数据调查表等都使用了表格组织数据。之前表格最主要的用途就是布局网页内容，随着前端技术的不断发展，使用表格布局的弊端越来越明显，因而使用表格布局网页的方式也逐渐淘汰了。5.目前表格主要在页面中用于组织相关数据展示数据信息，但是伴随着技术的飞快发展，对表格加载展示数据提出更高的要求。尤其是当表格加载展示数据量特别大时会对页面造成卡顿、加载慢等一系列体验。因为表格加载大量数据渲染页面时会占用特别多的浏览器资源，从而导致页面操作卡顿。这对于用户的体验一点都不友好。技术实现要素：6.本发明要解决的技术问题是如何解决表格加载大量数据渲染页面卡顿而影响用户体验的问题，本发明提出一种页面表格数据的渲染方法及装置。7.根据本发明实施例的页面表格数据的渲染方法，包括：8.s100，获取待展示的数据；9.s200，创建容器、子容器及表格，所述容器用于存放所述子容器和所述表格，所述表格用于展示数据，所述子容器用于实现所述表格数据的滚动展示；10.s300，根据待展示的数据进项展示参数项的设置，并计算确定所述子容器的高度；11.s400，监听滚动事件，并获取滚动高度，通过所述滚动高度和设置的展示参数判断所述表格的当前页面是否为待展示页面；12.s500，当所述表格的当前页面不是待展示页面时，根据所述待展示页面计算确定待展示的数据，并对所述表格页面进行渲染，以展示待展示数据。13.根据本发明的一些实施例，步骤s300中，设置的所述展示参数项包括：每页展示数据条数pagesize、滚动间隙高度scrollspaceheight及容器高度divheight；14.所述子容器的高度＝总页数totalpage*滚动间隙高度scrollspaceheight+容器高度divheight-1px；15.其中，总页数totalpage＝获取的待展示数据的总数totaldata/每页条数pagesize。16.在本发明的一些实施例中，步骤s400中，判断所述表格的当前页面是否为待展示页面的方法为：17.s410，通过属性event.target.scrolltop获取滚动高度赋值给变量scrollposition；18.s420，根据计算公式获取待展示页面的页数：scrollcurrentpage＝math.ceil(scrollposition/scrollspaceheight)；19.s430，根据待展示页面的页数的计算结果和当前页码数currentpage进行比较，以判断所述表格的当前页面是否为待展示页面。20.根据本发明的一些实施例，步骤s500中，根据所述待展示页面计算确定待展示的数据的方法包括：21.s510，计算待展示数据的起始数据scrollstartdata＝(scrollcurrentpage-1)*pagesize；22.s520，截取待展示数据currentdata＝totaldata.slice(scrollstartdata,scrollstartdata+pagesize)。23.在本发明的一些实施例中，在创建所述容器和所述子容器时，设置容器的样式为overflow-x：hidden，overflow-y：auto，position：relative；24.设置子容器的样式为width：1px，float：right。25.根据本发明实施例的页面表格数据的渲染装置，包括：26.获取模块，用于获取待展示的数据；27.创建模块，用于创建容器、子容器及表格，所述容器用于存放所述子容器和所述表格，所述表格用于展示数据，所述子容器用于实现所述表格数据的滚动展示；28.设置模块，用于根据待展示的数据进项展示参数项的设置，并计算确定所述子容器的高度；29.判断模块，用于监听滚动事件，并获取滚动高度，通过所述滚动高度和设置的展示参数判断所述表格的当前页面是否为待展示页面；30.渲染模块，当所述表格的当前页面不是待展示页面时，根据所述待展示页面计算确定待展示的数据，并对所述表格页面进行渲染，以展示待展示数据。31.根据本发明的一些实施例，所述设置模块中设置的所述展示参数项包括：每页展示数据条数pagesize、滚动间隙高度scrollspaceheight及容器高度divheight；32.所述子容器的高度＝总页数totalpage*滚动间隙高度scrollspaceheight+容器高度divheight-1px；33.其中，总页数totalpage＝获取的待展示数据的总数totaldata/每页条数pagesize。34.在本发明的一些实施例中，步骤判断模块包括：35.滚动高度获取模块，用于通过属性event.target.scrolltop获取滚动高度赋值给变量scrollposition；36.页数计算模块，用于根据计算公式获取待展示页面的页数：scrollcurrentpage＝math.ceil(scrollposition/scrollspaceheight)；37.比较模块，用于根据待展示页面的页数的计算结果和当前页码数currentpage进行比较，以判断所述表格的当前页面是否为待展示页面。38.根据本发明的一些实施例，所述渲染模块包括：39.起始数据获取模块，用于计算待展示数据的起始数据scrollstartdata＝(scrollcurrentpage-1)*pagesize；40.数据截取模块，用于截取待展示数据：41.currentdata＝totaldata.slice(scrollstartdata,scrollstartdata+pagesize)。42.在本发明的一些实施例中，所述创建模块在创建所述容器和所述子容器时，设置容器的样式为overflow-x：hidden，overflow-y：auto，position：relative；43.设置子容器的样式为width：1px，float：right。44.本发明提出的页面表格数据的渲染方法及装置，通过创建父容器div1、子容器div11、表格，三者之间的结合定位布局，设置三者之间的参数以及各参数之间逻辑算法公式，来解决大数据渲染常见的卡顿问题，以此方便用户操作，给用户良好的体验性。在接口返回数据量大的情况下，表格渲染不会卡顿。而且，用户操作简单方便，用户体验性好。附图说明45.图1为根据本发明实施例的页面表格数据的渲染方法流程图；46.图2为根据本发明实施例的页面表格数据的渲染方法总流程图；47.图3为根据本发明实施例的页面表格数据的渲染方法中监听事件流程图；48.图4为根据本发明实施例的页面表格数据的渲染装置组成示意图；49.图5-图8为根据本发明实施例的页面表格数据的渲染方法应用于数据库审计与防护系统中网络连接信息页面数据显示示意图。50.附图标记：51.渲染装置100，52.获取模块10，创建模块20，设置模块30，判断模块40，渲染模块50。具体实施方式53.为更进一步阐述本发明为达成预定目的所采取的技术手段及功效，以下结合附图及较佳实施例，对本发明进行详细说明如后。54.本发明中说明书中对方法流程的描述及本发明说明书附图中流程图的步骤并非必须按步骤标号严格执行，方法步骤是可以改变执行顺序的。而且，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。55.现有相关技术1，cn112612457提出了一种javascript高性能渲染大量数据的方法，通过获取的总数据来计算展示总数据源所需的屏数n，初始化渲染q屏。56.现有技术1的发明通过设置观察区域，通过判断监控元素是否和观察区域有交叉来渲染数据。57.现有技术1的发明主要是基于intersectionobserver方法。该方法主要是浏览器原生提供的构造函数，使用该方法判断要显示的元素是否到可视区。58.现有技术1的发明中的方法intersectionobserver是异步传递数据的，同时callback会运行在主线程中。使用规范中说了，intersectionobservers的实现使用requestidlecallback()。意味这提供的callback的调用是低优先级的，会在空闲时间进行的。他的优先级比较低。59.现有技术2，cn112068834a公开了一种基于js的数据渲染方法及装置。60.现有技术2的缺点在于可视区域的高度过小，内容过多，生成的滚动条高度远高于可视高度，滚动时，鼠标或者滑动的距离大于可视高度，那么展示的内容就会过了。(比如每页展示10条，每条高度20px，若想看第3条—12条的数据，滚动展示的内容距离应该是从40px—240px)，需要精准的计算操作，不然就会跳过一些数据看不到，用户体验不太好。现有技术2的控制达不到这个要求。61.另外现有技术2还会存在一个问题：若是浏览器的监控滚动事件，滚动频繁则监听频繁，则渲染频繁可能影响界面性能。62.本发明针对表格加载大量数据渲染页面卡顿而影响用户体验的问题，及上述现有技术存在的缺陷，提出一种页面表格数据的渲染方法及装置。63.如图1所示，根据本发明实施例的页面表格数据的渲染方法，包括：64.s100，获取待展示的数据；65.s200，创建容器、子容器及表格，容器用于存放子容器和表格，表格用于展示数据，子容器用于实现表格数据的滚动展示；66.s300，根据待展示的数据进项展示参数项的设置，并计算确定子容器的高度；67.s400，监听滚动事件，并获取滚动高度，通过滚动高度和设置的展示参数判断表格的当前页面是否为待展示页面；68.s500，当表格的当前页面不是待展示页面时，根据待展示页面计算确定待展示的数据，并对表格页面进行渲染，以展示待展示数据。69.根据本发明的一些实施例，步骤s300中，设置的展示参数项包括：每页展示数据条数pagesize、滚动间隙高度scrollspaceheight及容器高度divheight；70.子容器的高度＝总页数totalpage*滚动间隙高度scrollspaceheight+容器高度divheight-1px；其中，总页数totalpage＝获取的待展示数据的总数totaldata/每页条数pagesize。71.需要说明的是，通过设置上述子容器的高度，可以满足表格所有页面的滚动显示。而且，可以使表格滚动到最后一页时停止滚动。72.在本发明的一些实施例中，步骤s400中，判断表格的当前页面是否为待展示页面的方法为：73.s410，通过属性event.target.scrolltop获取滚动高度赋值给变量scrollposition；74.s420，根据计算公式获取待展示页面的页数：scrollcurrentpage＝math.ceil(scrollposition/scrollspaceheight)；其中，math.ceil()为取整函数。75.s430，根据待展示页面的页数的计算结果和当前页码数currentpage进行比较，以判断表格的当前页面是否为待展示页面。76.根据本发明的一些实施例，步骤s500中，根据待展示页面计算确定待展示的数据的方法包括：77.s510，计算待展示数据的起始数据scrollstartdata＝(scrollcurrentpage-1)*pagesize；78.s520，截取待展示数据currentdata＝totaldata.slice(scrollstartdata,scrollstartdata+pagesize)。79.在本发明的一些实施例中，在创建容器和子容器时，设置容器的样式为overflow-x：hidden，overflow-y：auto，position：relative。通过上述容器样式设置，可以使表格在容器内滚动显示，超出容器横向部分进行隐藏。设置子容器的样式为width：1px，float：right。80.如图4所示，根据本发明实施例的页面表格数据的渲染装置100，包括：获取模块10、创建模块20、设置模块30、判断模块40及渲染模块50。81.其中，获取模块10用于获取待展示的数据；82.创建模块20用于创建容器、子容器及表格，容器用于存放子容器和表格，表格用于展示数据，子容器用于实现表格数据的滚动展示；83.设置模块30用于根据待展示的数据进项展示参数项的设置，并计算确定子容器的高度；84.判断模块40用于监听滚动事件，并获取滚动高度，通过滚动高度和设置的展示参数判断表格的当前页面是否为待展示页面；85.渲染模块50当表格的当前页面不是待展示页面时，根据待展示页面计算确定待展示的数据，并对表格页面进行渲染，以展示待展示数据。86.根据本发明的一些实施例，设置模块30中设置的展示参数项包括：每页展示数据条数pagesize、滚动间隙高度scrollspaceheight及容器高度divheight；87.子容器的高度＝总页数totalpage*滚动间隙高度scrollspaceheight+容器高度divheight-1px；其中，总页数totalpage＝获取的待展示数据的总数totaldata/每页条数pagesize。88.需要说明的是，通过设置上述子容器的高度，可以满足表格所有页面的滚动显示。而且，可以使表格滚动到最后一页时停止滚动。89.在本发明的一些实施例中，步骤判断模块40包括：滚动高度获取模块、页数计算模块及比较模块。90.滚动高度获取模块用于通过属性event.target.scrolltop获取滚动高度赋值给变量scrollposition；91.页数计算模块用于根据计算公式获取待展示页面的页数：scrollcurrentpage＝math.ceil(scrollposition/scrollspaceheight)；92.比较模块用于根据待展示页面的页数的计算结果和当前页码数currentpage进行比较，以判断表格的当前页面是否为待展示页面。93.根据本发明的一些实施例，渲染模块50包括：94.起始数据获取模块，用于计算待展示数据的起始数据scrollstartdata＝(scrollcurrentpage-1)*pagesize；95.数据截取模块，用于截取待展示数据：96.currentdata＝totaldata.slice(scrollstartdata,scrollstartdata+pagesize)。97.在本发明的一些实施例中，创建模块20在创建容器和子容器时，设置容器的样式为overflow-x：hidden，overflow-y：auto，position：relative。通过上述容器样式设置，可以使表格在容器内滚动显示，超出容器横向部分进行隐藏。设置子容器的样式为width：1px，float：right。98.本发明提出的页面表格数据的渲染方法及装置，通过创建父容器div1、子容器div11、表格，三者之间的结合定位布局，设置三者之间的参数以及各参数之间逻辑算法公式，来解决大数据渲染常见的卡顿问题，以此方便用户操作，给用户良好的体验性。在接口返回数据量大的情况下，表格渲染不会卡顿。而且，用户操作简单方便，用户体验性好。99.另外，与上述现有技术1和2相比，本技术还具有如下优点：100.现有技术1需初始化渲染q屏。本发明初始化就渲染当前页，也就是一屏的数据。后面始终渲染一屏的数据。101.现有技术1的发明主要提供一种javascript高性能渲染大量数据的方法解决页面渲染问题。而本发明主要是针对表格渲染大量数据导致页面卡顿的解决方案，侧重点不一样。主要区别如下：102.现有技术1的发明通过设置观察区域，通过判断监控元素是否和观察区域有交叉来渲染数据。而本发明则是通过计算获取当前容器的滚动条高度：总页数totalpage＝总数totaldata/每页条数pagesize，子容器高度＝总页数totalpage*滚动间隙高度scrollspaceheight+容器高度divheight-1px。设置容器滚动条高度，监听容器滚动事件渲染数据。103.现有技术1的发明主要是基于intersectionobserver方法。该方法主要是浏览器原生提供的构造函数，使用该方法判断要显示的元素是否到可视区。本发明使用的是监听容器的scroll事件，通过容器的scrolltop的值scrollposition和设置的滚动间隙高度scrollspaceheight来判断要展示的数据，scrollcurrentpage＝math.ceil(scrollposition/scrollspaceheight)。根据计算结构和当前页码数currentpage比较判断是否相等，不相等才会渲染要显示的页码的数据。相对于intersectionobserver方法不支持ie浏览器，本发明采用scroll监听事件兼容性比较好。104.针对现有技术2，可视区域的高度过小，内容过多，生成的滚动条高度远高于可视高度，滚动时，鼠标或者滑动的距离大于可视高度，那么展示的内容就会过了。(比如每页展示10条，每条高度20px，若想看第3条—12条的数据，滚动展示的内容距离应该是从40px—240px)，需要精准的计算操作，不然就会跳过一些数据看不到，用户体验不太好的问题。本发明通过设置参数：滚动间隙高度scrollspaceheight，结合其他参数及布局可以解决这个问题。105.对于现有技术2存在渲染频繁可能影响界面性能的问题，本发明通过滚动计算得出要展示的页码，判断是否与当前的页码一致，若一致则监听结束，不会频繁渲染界面。不一致的情况下才会去监听渲染，解决上述问题。106.下面参照附图以一个具体的实施例详细描述本发明。值得理解的是，下述描述仅是示例性描述，而不应理解为对本发明的具体限制。107.本发明为了满足用户对页面布局要求以及操作体验，本发明旨在解决如下问题：108.(1)解决表格加载数据量大导致的页面卡顿问题；109.(2)操作简单方便体验良好，相对于点击翻页加载数据，滚动能带来更好的用户体验。鼠标的滚轮或者触屏的存在让滚动比点击更快更简单。110.(3)滚动加载数据对移动设备很友好。在移动设备浏览器中浏览变得更有意义。移动设备的手势控制让滚动非常自然且容易使用。111.(4)更好的满足页面布局，使页面更加美观。112.本发明主要通过监控鼠标的滚轮或者触屏操作来控制表格数据的显示，通过滚动满足更新条件时，更新加载新数据，从而达到解决数据过多导致的页面卡顿问题。同时以这种方式能提供更好的操作体验以及满足更多的页面布局要求。113.结合图2和图3所示，本发明解决页面因表格展示大量数据卡顿方法，包括如步骤：114.a10，获取要展示的全部数据赋给变量totaldata115.a20，创建一个容器div为div1，用于存放表格以及其他元素标签。同时设置css样式，样式为overflow-x：hidden，overflow-y：auto，position：relative；116.a30，创建子容器元素div为div11和table元素为table11，table11主要用于表格内容数据展示，设置div11的样式为width：1px，float：right；117.a40，设置自定义参数，每页条数pagesize、滚动间隙高度scrollspaceheight、容器高度divheight；表格单元格高度、当前表格展示页码数currentpage。118.a50，根据自定义参数设置容器高度，根据获取的数据和自定义参数计算内容高度公式为：总页数totalpage＝总数totaldata/每页条数pagesize，div11高度＝总页数totalpage*滚动间隙高度scrollspaceheight+容器高度divheight-1px。根据计算出来的值设置div11的高度。119.a60，监听容器div1滚动事件，通过属性event.target.scrolltop获取滚动高度赋值给变量scrollposition。根据计算公式获取当前要展示的页数：scrollcurrentpage＝math.ceil(scrollposition/scrollspaceheight)。根据计算结果和当前页码数currentpage比较判断是否相等。若相等则结束监听事件，否则进行下一步。120.需要说明的是，本技术中，当发生滚动事件时，会触发当前要展示的页码和当前页码是否一致的判断。在判断一致时，不进行页面渲染操作；当判断不一致时，执行后续步骤操作。121.a70，根据判断如果不相等，则根据当前要展示的页数计算出需要展示的数据。计算方法为：scrollstartdata＝(scrollcurrentpage-1)*pagesize；展示数据currentdata＝totaldata.slice(scrollstartdata,scrollstartdata+pagesize)。通过上面计算方法获取当前要展示的数据。122.a80，重新渲染表格。将要展示的数据渲染到表格中。123.a90，根据当前滚动高度scrollposition，设置表格样式属性top的值为scrollposition。这样使表格显示在可视区域。124.本发明可应用于页面表格展示数据，防止数据过多导致页面卡顿。该发明除了适用于移动端，也能很好的适用于pc端，比如本发明可应用于数据库审计与防护系统中网络连接信息页面，对表格加载渲染数据如如图5-图8所示。125.综上所述，本发明通过创建父容器div1、子容器div11、表格，三者之间的结合定位布局，设置三者之间的参数以及各参数之间逻辑算法公式，来解决大数据渲染常见的卡顿问题，以此方便用户操作，给用户良好的体验性。在接口返回数据量大的情况下，表格渲染不会卡顿。而且，用户操作简单方便，用户体验性好。126.通过具体实施方式的说明，应当可对本发明为达成预定目的所采取的技术手段及功效得以更加深入且具体的了解，然而所附图示仅是提供参考与说明之用，并非用来对本发明加以限制。当前第1页12当前第1页12