CN105528362B - 一种表格的加载显示方法及其显示装置 - Google Patents
一种表格的加载显示方法及其显示装置 Download PDFInfo
- Publication number
- CN105528362B CN105528362B CN201410520505.0A CN201410520505A CN105528362B CN 105528362 B CN105528362 B CN 105528362B CN 201410520505 A CN201410520505 A CN 201410520505A CN 105528362 B CN105528362 B CN 105528362B
- Authority
- CN
- China
- Prior art keywords
- column width
- data
- current
- loading
- page
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 33
- 238000013499 data model Methods 0.000 claims abstract description 36
- 238000009877 rendering Methods 0.000 claims abstract description 28
- 230000003044 adaptive effect Effects 0.000 claims description 8
- 238000001514 detection method Methods 0.000 claims description 3
- 230000008569 process Effects 0.000 abstract description 7
- 230000006978 adaptation Effects 0.000 description 6
- 238000007726 management method Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 230000010365 information processing Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
Images
Landscapes
- Information Transfer Between Computers (AREA)
- Controls And Circuits For Display Device (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 (6)
1.一种表格的加载显示方法，包括以下步骤：
步骤一：对表格中任意一列或多列的列宽分别设置为固定列宽或自适应列宽；
步骤二：建立数据模型，并将该数据模型放置于前端缓存之中；
步骤三：输入页码信息；
步骤四：加载显示所述页码所在的页面，包括以下步骤：
对表格的列宽设置类型进行判断；
若当前列宽为固定列宽，则将数据渲染至表格中；若当前列宽为自适应列宽，则先计算并记录当前数据的列宽，若大于缓存中的列宽时，则将当前列宽设置为最终列宽，并将当前列宽保存至缓存中。
2.根据权利要求1所述表格的加载显示方法，其特征在于：对渲染的行数进行判断，若渲染的行数超过设定值时，则先将数据显示至表格中，再继续渲染。
3.根据权利要求2所述表格的加载显示方法，其特征在于：所述行数的设定值为10行。
4.一种表格的加载显示装置，其特征在于：包括
列宽设置单元，其用于设置表格列宽的类型；其中，所述列宽设置单元所设置的列宽类型包括固定列宽和自适应列宽；
数据模型生成单元，其用于生成表格数据模型，并将该数据模型存储至前端缓存之中；
页码信息检测单元，其用于检测输入的页码信息；
加载显示单元，其用于根据页码，加载显示相应页面信息；所述加载显示单元包括：列宽判断单元和列宽计算单元；所述列宽判断单元对当前列宽进行判断，若当前列宽为固定列宽，则由加载显示单元将数据渲染至表格中；若当前列宽为自适应列宽时，则由所述列宽计算单元计算并记录当前数据的列宽，若大于缓存中的列宽时，则将当前列宽设置为最终列宽，并将当前列宽保存至缓存中。
5.根据权利要求4所述表格的加载显示装置，其特征在于：还包括一行数判断单元，所述行数判断单元对当前渲染的行数进行判断，若渲染的行数超过设定值时，则先由加载显示单元将数据显示至表格中，再继续进行渲染。
6.根据权利要求5所述表格的加载显示装置，其特征在于：所述行数的设定值为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 CN105528362A (zh) | 2016-04-27 |
| CN105528362B true 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) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109240898A (zh) * | 2018-09-29 | 2019-01-18 | 郑州云海信息技术有限公司 | 一种虚拟化系统资源展示的方法及装置 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101124572A (zh) * | 2004-09-24 | 2008-02-13 | 微软公司 | 文件系统外壳 |
| CN101207742A (zh) * | 2007-12-25 | 2008-06-25 | 深圳市同洲电子股份有限公司 | 一种显示内容的分页方法、装置及数字电视接收装置 |
Family Cites Families (1)
| 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 |
-
2014
- 2014-09-30 CN CN201410520505.0A patent/CN105528362B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101124572A (zh) * | 2004-09-24 | 2008-02-13 | 微软公司 | 文件系统外壳 |
| CN101207742A (zh) * | 2007-12-25 | 2008-06-25 | 深圳市同洲电子股份有限公司 | 一种显示内容的分页方法、装置及数字电视接收装置 |
Non-Patent Citations (3)
| Title |
|---|
| PHP分栏类及其应用;徐光迎;《电脑编程技巧与维护》;20110427(第2011年第02期);第1-3小节 * |
| 使用settimeout方式不影响js对页面展示的延迟;qdsearoc;《360个人图书馆（http://www.360doc.com/content/07/0718/16/142_618409.shtml）》;20070718;第1页 * |
| 徐光迎.PHP分栏类及其应用.《电脑编程技巧与维护》.2011,(第2011年第02期),第68-78页. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105528362A (zh) | 2016-04-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10085056B2 (en) | Method and system for improving application sharing by dynamic partitioning | |
| CN106055612B (zh) | 一种数据分页显示方法及终端设备 | |
| US10459965B2 (en) | Method and apparatus for displaying images | |
| EP2495947A3 (en) | Information processing apparatus, information processing system, method for controlling information processing apparatus, and program | |
| CN105843819B (zh) | 一种数据导出方法及装置 | |
| US10198147B2 (en) | Object management and visualization using a computing device | |
| RU2014119846A (ru) | Устройство для обработки информации и способ обработки информации | |
| US20110193858A1 (en) | Method for displaying images using an electronic device | |
| EP2571240A3 (en) | Image processing device, access control method and computer readable recording medium | |
| CN107340964A (zh) | 一种视图的动画效果实现方法及装置 | |
| CN111581219B (zh) | 监控数据获取方法及装置 | |
| JP2012022623A5 (ja) | 画像処理装置の制御方法、画像処理装置、およびプログラム | |
| CN107111982B (zh) | 图像显示方法及装置 | |
| CN104731855A (zh) | 一种显示微信朋友圈图片资源的方法及装置 | |
| US10019087B2 (en) | Touch input method and apparatus | |
| US10430316B2 (en) | Application thread visualization | |
| CN107239343B (zh) | 数据处理方法及装置 | |
| CN105528362B (zh) | 一种表格的加载显示方法及其显示装置 | |
| US9042605B2 (en) | Determining a viewing distance for a computing device | |
| US20130036374A1 (en) | Method and apparatus for providing a banner on a website | |
| KR101944454B1 (ko) | 정보처리프로그램 및 정보처리방법 | |
| CN111309221B (zh) | 页面处理方法、装置及设备 | |
| US9939929B2 (en) | Apparatus, method, and program product for erasing with a stylus | |
| CN107832028A (zh) | 多屏显示系统及方法 | |
| US8891876B2 (en) | Mouth corner candidates |
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 |