CN105528362A - 一种表格的加载显示方法及其显示装置 - Google Patents
一种表格的加载显示方法及其显示装置 Download PDFInfo
- Publication number
- CN105528362A CN105528362A CN201410520505.0A CN201410520505A CN105528362A CN 105528362 A CN105528362 A CN 105528362A CN 201410520505 A CN201410520505 A CN 201410520505A CN 105528362 A CN105528362 A CN 105528362A
- Authority
- CN
- China
- Prior art keywords
- col width
- data
- current
- width
- loaded
- 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 25
- 238000013499 data model Methods 0.000 claims abstract description 36
- 230000008569 process Effects 0.000 abstract description 7
- 238000009877 rendering Methods 0.000 abstract 2
- 230000006870 function Effects 0.000 description 5
- 230000006872 improvement Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 2
- 230000010365 information processing Effects 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000011218 segmentation Effects 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
Landscapes
- Controls And Circuits For Display Device (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明涉及：一种表格的加载显示方法，包括以下步骤：步骤一：对表格的列宽进行设置；步骤二：建立数据模型，并将该数据模型放置于服务端或前端缓存之中；步骤三：输入页码信息；步骤四：加载显示所述页码所在的页面。相比于现有技术，本发明通过分页加载的方式，将数据大的表格分页加载，提高加载速度。具体通过接收页码信息，根据页码加载相应的页面。进一步，通过在表格渲染过程采用分段渲染方式，每渲染10行则将后面的操作放置于分时函数setTimeout中，然后让出线程给UI线程，这样表格会即时显示出数据，加快数据显示速度。
Description
技术领域
本发明涉及一种显示方法，特别是一种表格的加载显示方法。本发明还涉及一种应用于上述加载显示方法的显示装置。
背景技术
信息系统作为一种抽象的社会系统，因为能及时、可靠、方便的管理海量信息，所以在许多应用领域起着不可替代的作用，它已成为人们认识和研究客观世界的重要手段。
随着社会信息化的进程以及各领域的特殊性，信息系统的种类越来越多。从当初的MIS(管理信息系统)到现在的热门的ERP(企业资源计划)、PLM(产品生命周期系统)、财务息管理系统等。他们都是在常规信息系统的基础上，融合了本领域的知识结构，形成了具备特定功能的信息系统，它们比一般的信息系统在处理特定事物上更便捷有效。不过这随之也产生了新的问题，即对系统的灵活性、性能以及基础设备的要求也大大提高。
而信息系统中管理海量信息主要依赖于表格形式，现有技术的表格加载显示方式为一次性加载。但是当表格中数据量很大时，如果现有的信息处理技术，将表格数据一次性加载会导致：1、表格数据加载速度过慢，影响系统稳定性2、性能原因导致服务器等基础设备维护成本高。
而在信息阅读时，目前的处理方式为整表自适应以及固定宽度2种方式，其中，表格自适应是指将表格中的列宽与数据的长度匹配，而固定宽度是指表格的列宽为一固定值。然而，现有的表格格式处理方式存在如下问题：1、当表格列较多或某列数据过长，比如达到500字符时，整表自适应方式则完全显示所有数据，不利于重要数据的阅读；同时一次整表自适应也会影响数据加载的速度2、固定宽度的显示方式，也无法满足阅读要求，如财务信息系统中的金额，字符无法完整显示时，影响财务人员对数据的操作及查看。
因此表格操作的易用性及信息处理的技术显得尤为重要。
发明内容
本发明在于克服现有技术的缺点与不足，提供一种表格的加载显示方法和显示装置。
本发明是通过以下的技术方案实现的：一种表格的加载显示方法，包括以下步骤：
步骤一：对表格的列宽进行设置；
步骤二：建立数据模型，并将该数据模型放置于服务端或前端缓存之中；
步骤三：输入页码信息；
步骤四：加载显示所述页码所在的页面。
相比于现有技术，本发明通过分页加载的方式，将数据大的表格分页加载，提高加载速度。具体通过接收页码信息，根据页码加载相应的页面。同时，对于表格的数据，建立数据模型，该模型可以放置于服务端，每次翻页需要到服务端进行请求。或者放置于前端缓存中，这样每次翻页的时候，不用发送http请求来获取数据。若数据模型建立在前端缓存中，翻页时不用发送http请求来获取数据，并且翻页时会计算出应该取出该页数据模型的数据索引范围，然后根据索引取出数据，渲染到表格中，减少取数时间。
作为本发明的进一步改进，所述步骤一中，对表格的列宽设置为固定列宽或自适应列宽。
所述步骤四中，具体包括以下步骤：
对表格的列宽设置类型进行判断；
若当前列宽为固定列宽，则将数据渲染至表格中；若当前列宽为自适应列宽，则先计算并记录当前数据的列宽，若大于缓存中的列宽时，则将当前列宽设置为最终列宽，并将当前列宽保存至缓存中。
在设置表格的列宽格式时，有多种设置方式，可不指定任何列自适应，也可指定某些列为自适应，表格渲染时会按最大列宽自适应，其他列等宽平铺，适应不同分辨率；同时也可设置全部自适应，同样表格渲染时会按最大列宽自适应，提供了多种方式，可以适用于不同的情况，更加灵活。
作为本发明的进一步改进，对渲染的行数进行判断，若渲染的行数超过设定值时，则先将数据显示至表格中，再继续渲染。
作为优选，所述行数的设定值为10行。
通过在表格渲染过程采用分段渲染方式，每渲染10行则将后面的操作放置于分时函数setTimeout中，然后让出线程给UI线程，这样表格会即时显示出数据，而不会一直要等到全部数据渲染完才一次性显示。如果不采用分时函数的方式，则界面会一直空白，直到数据全部渲染完才一次性显示。从而，可以更加加快表格数据的渲染过程。
一种表格的加载显示装置，包括
列宽设置单元，其用于设置表格列宽的类型；
数据模型生成单元，其用于生成表格数据模型，并将该数据模型存储至服务端或前端缓存之中；
页码信息检测单元，其用于检测输入的页码信息；
加载显示单元，其用于根据页码，加载显示相应页面信息。
相比于现有技术，本发明通过分页加载的方式，将数据大的表格分页加载，提高加载速度。具体通过接收页码信息，根据页码加载相应的页面。同时，对于表格的数据，在建立数据模型时，该模型可以放置于服务端，每次翻页需要到服务端进行请求。或者放置于前端缓存中，这样每次翻页的时候，不用发送http请求来获取数据。若数据模型建立在前端缓存中，翻页时不用发送http请求来获取数据，并且翻页时会计算出应该取出该页数据模型的数据索引范围，然后根据索引取出数据，渲染到表格中，减少取数时间。
作为本发明的进一步改进，所述列宽设置单元所设置的列宽类型包括固定列宽和自适应列宽。
作为本发明的进一步改进，还包括一列宽判断单元和列宽计算单元；所述列宽判断单元对当前列宽进行判断，若当前列宽为固定列宽，则由加载显示单元将数据渲染至表格中；若当前列宽为自适应列宽时，则由所述列宽计算单元计算并记录当前列宽的宽度，若大于缓存中的列宽时，则将当前列宽设置为最终列宽，并将当前列宽保存至缓存中。
作为本发明的进一步改进，还包括一行数判断单元，所述行数判断单元对当前渲染的行数进行判断，若渲染的行数超过设定值时，则先由加载显示单元将数据显示至表格中，再继续进行渲染。
作为优选，所述行数的设定值为10行。
为了更好地理解和实施，下面结合附图详细说明本发明。
附图说明
图1是本发明的表格加载显示方法的步骤流程图。
图2是本发明的表格加载显示装置的示意图。
具体实施方式
请参阅图1，其为本发明的表格加载显示方法的步骤流程图。本发明的表格的加载显示方法，包括以下步骤：
S1：对表格的列宽进行设置。在本实施例中，在设置表格的列宽格式时，有多种设置方式，可不指定任何列自适应，也可指定某些列为自适应，表格渲染时会按最大列宽自适应，其他列等宽平铺，适应不同分辨率；同时也可设置全部自适应，同样表格渲染时会按最大列宽自适应，提供了多种方式，可以适用于不同的情况，更加灵活。所述自适应列宽为将表格的列宽设置为与表格中的数据长度相适宜。
进一步，为了实现列宽的调整，在本实施例中，是在表格的第一行创建一行高度为0的行，后面的行则不赋值宽度，只给这行高度为0的行赋值宽度并保存至缓存中，后面的行的列宽则会根据第一行来进行对齐。将第一行作为辅助行，由于第一行的高度为0，故用户则无法在界面上看到该辅助行。
S2：建立数据模型，并将该数据模型放置于服务端或前端缓存之中。对于表格的数据，在建立数据模型时，该模型可以放置于服务端，每次翻页需要到服务端进行请求。或者放置于前端缓存中，这样每次翻页的时候，不用发送http请求来获取数据。在本实施例中，优选将数据模型建立在前端缓存中，翻页时不用发送http请求来获取数据，并且翻页时会计算出应该取出该页数据模型的数据索引范围，然后根据索引取出数据，渲染到表格中，减少取数时间。
S3：输入页码信息。
S4：加载显示所述页码所在的页面。具体通过包括以下步骤实现：
S41：对表格的数据进行渲染；
S42：对表格的列宽设置类型进行判断；若当前列宽为固定列宽，则执行步骤S45；若当前列宽为自适应列宽，则执行步骤S43；
S43：先计算并记录当前数据的列宽；
S44：若大于缓存中的列宽时，则将当前列宽设置为最终列宽，并将当前列宽保存至缓存中。
S45：对渲染的行数进行判断，若渲染的行数超过设定值时，则执行步骤S46.；若渲染的行数未超过设定值时，则返回步骤S41。在本实施例中，所述行数的设定值优选为10行。
S46：先将数据显示至表格中，再返回步骤S41继续渲染剩余的数据。
通过在表格渲染过程采用分段渲染方式，每渲染10行则将后面的操作放置于分时函数setTimeout中，然后让出线程给UI线程，这样表格会即时显示出数据，而不会一直要等到全部数据渲染完才一次性显示。如果不采用分时函数的方式，则界面会一直空白，直到数据全部渲染完才一次性显示。从而，可以更加加快表格数据的渲染过程。
相比于现有技术，本发明通过分页加载的方式，将数据大的表格分页加载，提高加载速度。具体通过接收页码信息，根据页码加载相应的页面。同时，对于表格的数据，建立数据模型，该模型可以放置于服务端，每次翻页需要到服务端进行请求。或者放置于前端缓存中，这样每次翻页的时候，不用发送http请求来获取数据。若数据模型建立在前端缓存中，翻页时不用发送http请求来获取数据，并且翻页时会计算出应该取出该页数据模型的数据索引范围，然后根据索引取出数据，渲染到表格中，减少取数时间。
请参阅图2，其为本发明的表格加载显示装置的示意图。相对应于上述的表格的加载显示方法，本发明提供了用于实现上述方法的表格的加载显示装置，包括列宽设置单元1、数据模型生成单元2、页码信息检测单元3、列宽判断单元4、列宽计算单元5、行数判断单元6和加载显示单元7。
所述列宽设置单元1，其用于设置表格列宽的类型；所述列宽设置单元1所设置的列宽类型包括固定列宽和自适应列宽。
在本实施例中，在设置表格的列宽格式时，有多种设置方式，可不指定任何列自适应，也可指定某些列为自适应，表格渲染时会按最大列宽自适应，其他列等宽平铺，适应不同分辨率；同时也可设置全部自适应，同样表格渲染时会按最大列宽自适应，提供了多种方式，可以适用于不同的情况，更加灵活。所述自适应列宽为将表格的列宽设置为与表格中的数据长度相适宜。
进一步，为了实现列宽的调整，在本实施例中，是在表格的第一行创建一行高度为0的行，后面的行则不赋值宽度，只给这行高度为0的行赋值宽度并保存至缓存中，后面的行的列宽则会根据第一行来进行对齐。将第一行作为辅助行，由于第一行的高度为0，故用户则无法在界面上看到该辅助行。
所述数据模型生成单元2，其用于生成表格数据模型，并将该数据模型存储至服务端或前端缓存之中。对于表格的数据，在建立数据模型时，该模型可以放置于服务端，每次翻页需要到服务端进行请求。或者放置于前端缓存中，这样每次翻页的时候，不用发送http请求来获取数据。在本实施例中，优选将数据模型建立在前端缓存中，翻页时不用发送http请求来获取数据，并且翻页时会计算出应该取出该页数据模型的数据索引范围，然后根据索引取出数据，渲染到表格中，减少取数时间。
所述页码信息检测单元3，其用于检测输入的页码信息。
所述列宽判断单元4，用于对当前列宽进行判断，若当前列宽为固定列宽，则由加载显示单元将数据渲染至表格中；
所述列宽计算单元5，用于当前列宽为自适应列宽时，计算并记录当前列宽的宽度，若大于缓存中的列宽时，则将当前列宽设置为最终列宽，并将当前列宽保存至缓存中。
所述行数判断单元6，用于对当前渲染的行数进行判断，若渲染的行数超过设定值时，则先由加载显示单元将数据显示至表格中，再继续进行渲染。作为优选，所述行数的设定值为10行。
所述加载显示单元7，其用于加载显示相应页面信息。
相比于现有技术，本发明通过分页加载的方式，将数据大的表格分页加载，提高加载速度。具体通过接收页码信息，根据页码加载相应的页面。同时，对于表格的数据，在建立数据模型时，该模型可以放置于服务端，每次翻页需要到服务端进行请求。或者放置于前端缓存中，这样每次翻页的时候，不用发送http请求来获取数据。若数据模型建立在前端缓存中，翻页时不用发送http请求来获取数据，并且翻页时会计算出应该取出该页数据模型的数据索引范围，然后根据索引取出数据，渲染到表格中，减少取数时间。
本发明并不局限于上述实施方式，如果对本发明的各种改动或变形不脱离本发明的精神和范围，倘若这些改动和变形属于本发明的权利要求和等同技术范围之内，则本发明也意图包含这些改动和变形。
Claims (9)
1.一种表格的加载显示方法，包括以下步骤：
步骤一：对表格的列宽进行设置；
步骤二：建立数据模型，并将该数据模型放置于服务端或前端缓存之中；
步骤三：输入页码信息；
步骤四：加载显示所述页码所在的页面。
2.根据权利要求1所述表格的加载显示方法，其特征在于：所述步骤一中，对表格中任意一列或多列的列宽分别设置为固定列宽或自适应列宽；
所述步骤四中，包括以下步骤：
对表格的列宽设置类型进行判断；
若当前列宽为固定列宽，则将数据渲染至表格中；若当前列宽为自适应列宽，则先计算并记录当前数据的列宽，若大于缓存中的列宽时，则将当前列宽设置为最终列宽，并将当前列宽保存至缓存中。
3.根据权利要求2所述表格的加载显示方法，其特征在于：对渲染的行数进行判断，若渲染的行数超过设定值时，则先将数据显示至表格中，再继续渲染。
4.根据权利要求3所述表格的加载显示方法，其特征在于：所述行数的设定值为10行。
5.一种表格的加载显示装置，其特征在于：包括
列宽设置单元，其用于设置表格列宽的类型；
数据模型生成单元，其用于生成表格数据模型，并将该数据模型存储至服务端或前端缓存之中；
页码信息检测单元，其用于检测输入的页码信息；
加载显示单元，其用于根据页码，加载显示相应页面信息。
6.根据权利要求5所述表格的加载显示装置，其特征在于：所述列宽设置单元所设置的列宽类型包括固定列宽和自适应列宽。
7.根据权利要求6所述表格的加载显示装置，其特征在于：还包括一列宽判断单元和列宽计算单元；所述列宽判断单元对当前列宽进行判断，若当前列宽为固定列宽，则由加载显示单元将数据渲染至表格中；若当前列宽为自适应列宽时，则由所述列宽计算单元计算并记录当前数据的列宽，若大于缓存中的列宽时，则将当前列宽设置为最终列宽，并将当前列宽保存至缓存中。
8.根据权利要求7所述表格的加载显示装置，其特征在于：还包括一行数判断单元，所述行数判断单元对当前渲染的行数进行判断，若渲染的行数超过设定值时，则先由加载显示单元将数据显示至表格中，再继续进行渲染。
9.根据权利要求8所述表格的加载显示装置，其特征在于：所述行数的设定值为10行。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410520505.0A CN105528362B (zh) | 2014-09-30 | 2014-09-30 | 一种表格的加载显示方法及其显示装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410520505.0A CN105528362B (zh) | 2014-09-30 | 2014-09-30 | 一种表格的加载显示方法及其显示装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105528362A true CN105528362A (zh) | 2016-04-27 |
| CN105528362B CN105528362B (zh) | 2020-12-22 |
Family
ID=55770591
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410520505.0A Active CN105528362B (zh) | 2014-09-30 | 2014-09-30 | 一种表格的加载显示方法及其显示装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105528362B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109240898A (zh) * | 2018-09-29 | 2019-01-18 | 郑州云海信息技术有限公司 | 一种虚拟化系统资源展示的方法及装置 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060117051A1 (en) * | 2004-11-26 | 2006-06-01 | Chin Philip K | Method of displaying data in a table |
| CN101124572A (zh) * | 2004-09-24 | 2008-02-13 | 微软公司 | 文件系统外壳 |
| CN101207742A (zh) * | 2007-12-25 | 2008-06-25 | 深圳市同洲电子股份有限公司 | 一种显示内容的分页方法、装置及数字电视接收装置 |
-
2014
- 2014-09-30 CN CN201410520505.0A patent/CN105528362B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101124572A (zh) * | 2004-09-24 | 2008-02-13 | 微软公司 | 文件系统外壳 |
| US20060117051A1 (en) * | 2004-11-26 | 2006-06-01 | Chin Philip K | Method of displaying data in a table |
| CN101207742A (zh) * | 2007-12-25 | 2008-06-25 | 深圳市同洲电子股份有限公司 | 一种显示内容的分页方法、装置及数字电视接收装置 |
Non-Patent Citations (2)
| Title |
|---|
| QDSEAROC: "使用settimeout方式不影响js对页面展示的延迟", 《360个人图书馆（HTTP://WWW.360DOC.COM/CONTENT/07/0718/16/142_618409.SHTML）》 * |
| 徐光迎: "PHP分栏类及其应用", 《电脑编程技巧与维护》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109240898A (zh) * | 2018-09-29 | 2019-01-18 | 郑州云海信息技术有限公司 | 一种虚拟化系统资源展示的方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105528362B (zh) | 2020-12-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US12175057B2 (en) | Switching multimedia content based on a respective act | |
| CN104123608B (zh) | 一种建立记账记录的方法与装置 | |
| CN107193467B (zh) | 用于展示智能笔书写内容的方法及设备 | |
| US10198147B2 (en) | Object management and visualization using a computing device | |
| CN103488777A (zh) | 一种调节网页展示效果的方法及系统 | |
| CN110175306A (zh) | 一种广告信息的处理方法及装置 | |
| CN108537729A (zh) | 图像无级缩放方法、计算机装置及计算机可读存储介质 | |
| CN103440197B (zh) | 一种基于对比测试自动生成差异测试报告的方法 | |
| US11334295B2 (en) | Transparent interactive interface for ballot marking and methods of using the same | |
| US20140095518A1 (en) | Calculated measures as attribute filters | |
| CN108052546A (zh) | 一种在移动终端浏览图片的方法及移动终端 | |
| CN105528362A (zh) | 一种表格的加载显示方法及其显示装置 | |
| CN113515717B (zh) | 导航页面更新方法、装置、电子设备及存储介质 | |
| US20220230200A1 (en) | Optimization of promotional content campaigns | |
| CN109960562B (zh) | 一种信息展示方法、装置和计算机可读存储介质 | |
| CN102479074A (zh) | 一种跟踪gui列表刷新内容的方法、装置及应用系统 | |
| DE112011106057T5 (de) | Energieeffiziente Abfrageoptimierung | |
| CN106446023A (zh) | 基于AngularJS和Bootstrap实现的双公示生产数据前端展示系统及方法 | |
| CN114125062B (zh) | 任务信息显示方法及装置 | |
| CN107180475A (zh) | 投票页面生成的方法及装置 | |
| CN106250492B (zh) | 索引的处理方法及装置 | |
| CN111954873B (zh) | 呈现文件中的组分的概述 | |
| CN106407294A (zh) | 一种用户测试数据展示的方法和装置 | |
| KR20120122085A (ko) | 책갈피 기반 질의답변 지원 시스템 및 방법 | |
| CN206226467U (zh) | 移动端即时通讯聊天大群加载系统 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | 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 |