CN105824790B - 一种设备表格适配方法、计算机设备以及移动终端 - Google Patents

Abstract

本发明公开了一种设备表格适配方法、计算机设备以及移动终端，属于数据显示技术领域；方法包括：客户端向服务端发送一第一请求，服务端通过表格结构接口反馈包括表格模板的第一数据包；客户端解析第一数据包得到并保存表格模板；客户端判断自身的设备类型，并于客户端内将表格模板转换成适于设备类型的特有模板；客户端向服务端发送一第二请求，服务端通过表格数据接口反馈包括表格内容的第二数据包；客户端解析第二数据包得到表格内容，将表格内容填充到特有模板中，以渲染得到完整的设备表格。上述技术方案的有益效果是：表格结构设置灵活多变，提升开发速度，改善使用体验。

Description

一种设备表格适配方法、计算机设备以及移动终端

技术领域

本发明涉及数据显示技术领域，尤其涉及一种设备表格适配方法、计算机设备以及移动终端。

背景技术

随着智能设备的多元化，越来越多的智能设备不局限于计算机设备例如台式机或者笔记本电脑的类型，而趋向于更小型化的智能设备例如平板电脑和手机等移动终端的类型。但是计算机设备和移动终端的屏幕尺寸完全不同，导致屏幕的分辨率也不同。而一般的设备表格通常是由前端程序员设计成固定的表格格式，这种设备表格无法在多种类型的设备间适配共用，也不能在多个页面间进行复用。

现有技术中针对上述问题的做法通常为以下几种：1)直接在html(Hyper TextMarkup Language，超文本标记语言)中编写不同的表格结构，通过读取数据并在服务端拼接标签的方式组装表格；2)通过现有的js(JavaScript)库在客户端生成表格。上述两种方式都无法避免表格在不同类型的设备中的显示问题。要想将设备表格适配到不同的设备上进行显示就要根据相应的设备类型分别设计相应的表格页面。例如适配计算机设备和移动终端，则至少需要设计两个不同的表格页面，因此最终计算机设备和移动终端接收到的表格数据并不一定会来自同一数据源，造成表格设计比较繁琐，不同数据源的数据在同步上也会出现问题，从而降低使用者的使用体验。

发明内容

根据现有技术中存在的上述问题，现提供一种设备表格适配方法、计算机设备以及移动终端的技术方案，旨在采用同一数据源解决不同类型设备中设备表格显示不适配屏幕尺寸的问题，表格结构设置灵活多变，从而提升开发人员的开发速度，改善使用者的使用体验；

上述技术方案具体包括；

一种设备表格适配方法，其中，包括至少一个客户端以及一个服务端，所述服务端分别与每个所述客户端远程连接，还包括:

步骤S1，所述客户端向所述服务端发送一第一请求，以请求所述服务端通过一预先定义的表格结构接口向所述客户端发送包括表格模板的第一数据包；

步骤S2，所述客户端接收所述第一数据包并进行解析，得到并保存所述表格模板；

步骤S3，所述客户端判断自身的设备类型，并根据判断得到的所述设备类型，于所述客户端内将所述表格模板转换成适于所述设备类型的特有模板；

步骤S4，所述客户端向所述服务端发送一第二请求，以请求所述服务端通过一预先定义的表格数据接口向所述客户端发送包括表格内容的第二数据包；

步骤S5，所述客户端接收所述第二数据包并解析得到相应的所述表格内容，将所述表格内容填充到所述特有模板中，以渲染得到完整的所述设备表格并显示，随后退出。

优选的，该设备表格适配方法，其中，所述步骤S2具体包括：

步骤S21，所述客户端获取所述第一数据包，并根据所述第一数据包的状态值检查数据响应是否成功：

若否，则返回所述步骤S1，以重新向所述服务端发送所述第一请求；

步骤S22，所述客户端将成功响应的所述第一数据包转换成所述表格模板并保存。

优选的，该设备表格适配方法，其中，所述设备类型包括计算机终端类型；

所述步骤S3中，若所述客户端被判断为所述计算机终端类型，则所述客户端依据超文本语言中的table标签，结合所述表格模板转换形成所述特有模板。

优选的，该设备表格适配方法，其中，所述设备类型包括移动终端类型；

所述步骤S3中，若所述客户端被判断为所述移动终端类型，则所述客户端依据超文本语言中的ul标签和li标签，结合所述表格模板转换形成所述特有模板。

优选的，该设备表格适配方法，其中，所述客户端为：

适用于计算机设备中的浏览器；或者

适用于移动终端中的浏览器。

优选的，该设备表格适配方法，其中，所述第二数据包包括：

包含有所述设备表格的表格定义内容的第一子数据包；以及

包含有所述设备表格的表格数据内容的第二子数据包；

所述步骤S5具体包括：

步骤S51，所述客户端根据所述第二请求接收到所述第一子数据包并进行解析，得到所述第一子数据包中包含的所述表格定义内容；

步骤S52，所述客户端根据所述表格定义内容确定所述特有模板中的内容显示形式，以及所述特有模板中渲染的各个控件的类型；

步骤S53，所述客户端根据所述第二请求接收到关联于一个表格分页的所述第二子数据包并进行解析，得到所述第二子数据包中包含的关联于一个所述表格分页的所述表格数据内容；

步骤S54，所述客户端将所述表格数据内容填充入所述特有模板中，以形成一个所述表格分页的所述设备表格；

步骤S55，所述客户端判断所述设备表格是否需要分页显示：

若是，则转向下一个所述表格分页，并返回所述步骤S53；

若否，则将形成的所述设备表格显示于所述客户端上，随后退出。

一种计算机设备，其中，采用上述的设备表格适配方法。

一种移动终端，其中，采用上述的设备表格适配方法。

上述技术方案的有益效果是：提供一种设备表格适配方法，能够采用同一数据源解决不同类型设备中设备表格显示不适配屏幕尺寸的问题，表格结构设置灵活多变，从而提升开发人员的开发速度，改善使用者的使用体验。

附图说明

图1是本发明的较佳的实施例中，一种设备表格适配方法的总体流程示意图；

图2是本发明的较佳的实施例中，于图1的基础上，解析得到表格模板的流程示意图；

图3是本发明的较佳的实施例中，于图1的基础上，渲染得到设备表格的流程示意图；

图4是本发明的较佳的实施例中，于计算机设备上经过渲染生成的设备表格的示意图；

图5是本发明的较佳的实施例中，于移动终端上经过渲染生成的设备表格的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

下面结合附图和具体实施例对本发明作进一步说明，但不作为本发明的限定。

本发明的较佳的实施例中，基于现有技术中存在的上述问题，现提供一种设备表格适配方法。该方法中，首先设置至少一个客户端以及一个服务端，服务端分别与每个客户端远程连接。至少一个客户端可以均为同一个类型的设备，也可以为不同类型的设备。

则本发明的较佳的实施例中，上述设备表格适配方法的具体步骤如图1所示，包括：

步骤S1，客户端向服务端发送一第一请求，以请求服务端通过一预先定义的表格结构接口向客户端发送包括表格模板的第一数据包；

步骤S2，客户端接收第一数据包并进行解析，得到并保存表格模板；

步骤S3，客户端判断自身的设备类型，并根据判断得到的设备类型，于客户端内将表格模板转换成适于设备类型的特有模板；

步骤S4，客户端向服务端发送一第二请求，以请求服务端通过一预先定义的表格数据接口向客户端发送包括表格内容的第二数据包；

步骤S5，客户端接收第二数据包并解析得到相应的表格内容，将表格内容填充到特有模板中，以渲染得到完整的设备表格并显示，随后退出。

在一个具体实施例中，上述步骤S1中，客户端首先通过http协议向服务端发送一第一请求，以请求服务端向客户端返回包括表格模板的第一数据包。上述第一请求可以为通过http协议提出的Ajax请求。上述第一数据包可以为服务端通过其预先定义的表格结构接口反馈的Json数据包。该Json数据包中包括了通用表格的表格模板的相关信息。

该实施例中，上述步骤S2中，客户端接收到上述第一数据包后，通过解析得到该第一数据包中包括的表格模板。该表格模板为一种通用的表格模板，或者被称为基础的表格模板。不同类型的设备上适用的设备表格均可以通过该表格模板转换得到。

该实施例中，上述步骤S3中，客户端首先判断得到自身的设备类型，例如判断为计算机设备还是移动终端，并且根据这个判断结果，在上述表格模板的基础上转换得到相应的特有模板。每个特有模板均对应于一种类型的客户端。具体地，客户端可以为适用于不同的设备中的浏览器，则可以通过JavaScript中的navigator.userAgent来判断设备类型，例如为计算机设备上适用的浏览器，还是为移动终端上适用的浏览器。

该实施例中，上述步骤S4中，客户端根据表格模板转换形成特有模板之后，再次向服务端发送一第二请求，以请求服务端反馈包括表格数据内容的相应的第二数据包。具体地，上述第二请求同样可以为Ajax请求，服务端通过一预先设定的表格数据接口向客户端反馈相应的第二数据包。

则该实施例中，上述步骤S5中，客户端获得上述第二数据包后，将该第二数据包进行解析以得到其中的表格内容，随后将该表格内容填充到已经转换形成的特有模板中，最终经过渲染得到一个完整的设备表格并显示在该客户端上。

本发明的一个较佳的实施例中，上述服务端预先设定的表格结构接口返回的Json数据包的定义为：

本发明的一个较佳的实施例中，服务端预先设定的表格数据接口返回的Json数据包可以被定义为：

本发明的较佳的实施例中，开发人员可以将上述第一数据包和第二数据包编写在服务端的相应的接口中，任何连接该服务端的客户端均可以通过发送请求的方式获取这些数据包。

本发明的较佳的实施例中，如图2所示，上述步骤S2具体包括：

步骤S21，客户端获取第一数据包，并根据第一数据包的状态值检查数据响应是否成功：

若否，则返回步骤S1，以重新向服务端发送第一请求；

步骤S22，客户端将成功响应的第一数据包转换成表格模板并保存。

具体地，本发明的较佳的实施例中，客户端获取到上述第一数据包后，首先检查该第一数据包的状态值，以验证该第一数据包的状态，从而判断该第一数据包的响应是否成功：若是，则继续执行下述步骤；若否，则表示该第一数据包响应失败，此时可以返回上述步骤S1，以重新向服务端发起一个第一请求。

本发明的较佳的实施例中，服务端响应的第一数据包中可以包括：表格模板的ID、表格模板挂在的容器的ID、css(Cascading Style Sheets，层叠样式表)的名称、是否启用分页模式的信息、总的记录条数、每页的记录条数、表格列结构的定义以及表格内容的获取URL(Uniform Resource Locator，统一资源定位符)等。

则本发明的较佳的实施例中，上述转换形成表格模板的过程可以包括：首先解析得到表格模板的ID及其容器(container)的ID；随后解析得到表格模板的class名称，用于在客户端自定义表格的显示样式；随后解析得到表格模板中每一列的显示类型(例如显示文字，或者显示图片等)，生成表格模板中的基本的架构模型。

本发明的较佳的实施例中，最后解析得到上述表格内容的获取URL。

本发明的一个较佳的实施例中，如上文中所述，上述设备类型可以包括计算机设备。

则上述步骤S3中，若客户端被判断为计算机终端类型，则客户端依据html中的table标签，结合表格模板转换形成特有模板。

本发明的另一个较佳的实施例中，如上文中所述，上述设备类型可以包括移动终端。

则上述步骤S3中，若客户端被判断为移动终端类型，则客户端依据html中的ul标签和li标签，结合表格模板转换形成特有模板。

本发明的较佳的实施例中，基于上文中所述的内容，客户端为适用于相应设备内的浏览器。该浏览器的作用在于提供使用者输入指定的URL打开页面，以启动指定的表格页面，从而在该页面中读入指定的表格结构接口URL，以开始构建请求服务端的Json数据包的第一请求/第二请求。并且，上述浏览器可以通过JavaScript中的navigator.userAgent来判断客户端自身的设备类型。

本发明的较佳的实施例中，在形成专属于该客户端的特有模板之后，客户端向服务端发送上述第二请求，以获取上述第二数据包。该第二数据包中可以包括：该数据包的状态值、表格内容的数据集合以及应用认证信息中的一种或几种等。因此，在获取该第二数据包后，客户端同样可以通过该第二数据包的状态值判断第二数据包是否完整，并在判断其完整后继续后续步骤。

本发明的较佳的实施例中，上述第二数据包中进一步包括：

包含有设备表格的表格定义内容的第一子数据包；以及

包含有设备表格的表格数据内容的第二子数据包；

则如图3所示，上述步骤S5具体包括：

步骤S51，客户端根据第二请求接收到第一子数据包并进行解析，得到第一子数据包中包含的表格定义内容；

步骤S52，客户端根据表格定义内容确定特有模板中的内容显示形式，以及特有模板中渲染的各个控件的类型；

步骤S53，客户端根据第二请求接收到关联于一个表格分页的第二子数据包并进行解析，得到第二子数据包中包含的关联于一个表格分页的表格数据内容；

步骤S54，客户端将表格数据内容填充入特有模板中，以形成一个表格分页的设备表格；

步骤S55，客户端判断设备表格是否需要分页显示：

若是，则转向下一个表格分页，并返回步骤S53；

若否，则将形成的设备表格显示于客户端上，随后退出。

具体地，本发明的较佳的实施例中，客户端首先向服务端发送第二请求，服务端根据该第二请求，通过预先设定的表格数据接口向客户端返回第一子数据包。

客户端接收到该第一子数据包后，同样通过其状态值检查该第二数据包的完整性，以确认数据在发送过程中没有出现错误。

随后，客户端解析该第一子数据包，得到其中包含的相应的表格定义内容。表格定义内容所包含的与上述第一数据包中包含的内容类似，均为定义一个设备表格的形式，在此不再赘述。

随后，客户端将上述设备表格挂在渲染到html页面ID为div_list的div中，并根据cols中的若干个表格列数据来决定该列渲染的控件类型，例如列的名称(name)、控件的类型(cell)、标签(label)、是否可编辑的属性(editable)以及是否可见的属性(visible)等。

例如，表格模板中的某一列定义如下：

则对应的json数据包中的内容对应如下(由于篇幅原因只节选其中一部分内容)：

随后，客户端根据dataURL向服务端发送第二请求，以请求服务端反馈第二子数据包。该第二子数据包同样需要事先经过完整性验证。

客户端解析该第二子数据包以得到设备表格中某一页的内容数据。具体地客户端为依次获取设备表格中每一页的内容数据的，例如第一次获取的为首页数据，之后依次获取每一页的数据。

则客户端在获取到某一页的内容数据后，根据返回的第二子数据中解析得到的内容与上述步骤中解析得到的列名称(name)进行一一对应，以进行表格内容数据的填充和渲染。在上述实施例中，若name为newsAbstract，则该列被填充并渲染为“XX工作室成立于XXXX年，是由美术家XX个人名字命名的工作室。”

本发明的较佳的实施例中，在对设备表格的某一页的内容数据填充渲染完毕后，客户端会根据相关的分页信息生成分页器。该分页器适应于不同的设备进行分页。例如计算机设备就是一个常见的分页条，供使用者手动点击跳转页码(如图4所示)，而移动终端表现为滚动到列表底部自动加载更多数据的形式(如图5所示)。

随后，客户端会首先将第一页内容渲染到设备表格的第一页中，随后判断服务端是否还存在分页的其他表格内容：若是，则客户端依次向服务端请求获取下一页的表格内容，并将这些表格内容依次填充渲染到相应的分页中，最终形成一个完整的经过渲染的设备表格并放到客户端中显示，具体地显示在适用于不同设备的浏览器中。

综上所述，本发明技术方案中，对于不同设备类型的客户端而言，基于同一个数据源，首先客户端从服务端获取并解析得到通用的表格模板；随后客户端判断自身的设备类型，并根据判断结果在表格模板的基础上转换形成对应于各自设备类型的特有模板。最后客户端从服务端获取并解析得到实质的表格数据内容，并将表格数据内容填充到对应的特有模板中，经过渲染后形成并显示最终的设备表格。

本发明的较佳的实施例中，还提供一种计算机设备，其中采用上文中所述的设备表格适配方法。

本发明的较佳的实施例中，还提供一种移动终端，其中采用上文中所述的设备表格适配方法。

以上所述仅为本发明较佳的实施例，并非因此限制本发明的实施方式及保护范围，对于本领域技术人员而言，应当能够意识到凡运用本发明说明书及图示内容所作出的等同替换和显而易见的变化所得到的方案，均应当包含在本发明的保护范围内。

Claims (8)

1.一种设备表格适配方法，其特征在于，包括至少一个客户端以及一个服务端，所述服务端分别与每个所述客户端远程连接，还包括:

步骤S1，所述客户端向所述服务端发送一第一请求，以请求所述服务端通过一预先定义的表格结构接口向所述客户端发送包括表格模板的第一数据包；

步骤S2，所述客户端接收所述第一数据包并进行解析，得到并保存所述表格模板；

步骤S3，所述客户端判断自身的设备类型，并根据判断得到的所述设备类型，于所述客户端内将所述表格模板转换成适于所述设备类型的特有模板；

步骤S4，所述客户端向所述服务端发送一第二请求，以请求所述服务端通过一预先定义的表格数据接口向所述客户端发送包括表格内容的第二数据包；

步骤S5，所述客户端接收所述第二数据包并解析得到相应的所述表格内容，将所述表格内容填充到所述特有模板中，以渲染得到完整的所述设备表格并显示，随后退出。

2.如权利要求1所述的设备表格适配方法，其特征在于，所述步骤S2具体包括：

步骤S21，所述客户端获取所述第一数据包，并根据所述第一数据包的状态值检查数据响应是否成功：

若否，则返回所述步骤S1，以重新向所述服务端发送所述第一请求；

步骤S22，所述客户端将成功响应的所述第一数据包转换成所述表格模板并保存。

3.如权利要求1所述的设备表格适配方法，其特征在于，所述设备类型包括计算机终端类型；

所述步骤S3中，若所述客户端被判断为所述计算机终端类型，则所述客户端依据超文本语言中的table标签，结合所述表格模板转换形成所述特有模板。

4.如权利要求1所述的设备表格适配方法，其特征在于，所述设备类型包括移动终端类型；

所述步骤S3中，若所述客户端被判断为所述移动终端类型，则所述客户端依据超文本语言中的ul标签和li标签，结合所述表格模板转换形成所述特有模板。

5.如权利要求1所述的设备表格适配方法，其特征在于，所述客户端为：

适用于计算机设备中的浏览器；或者

适用于移动终端中的浏览器。

6.如权利要求1所述的设备表格适配方法，其特征在于，所述第二数据包包括：

包含有所述设备表格的表格定义内容的第一子数据包；以及

包含有所述设备表格的表格数据内容的第二子数据包；

所述步骤S5具体包括：

步骤S51，所述客户端根据所述第二请求接收到所述第一子数据包并进行解析，得到所述第一子数据包中包含的所述表格定义内容；

步骤S52，所述客户端根据所述表格定义内容确定所述特有模板中的内容显示形式，以及所述特有模板中渲染的各个控件的类型；

步骤S53，所述客户端根据所述第二请求接收到关联于一个表格分页的所述第二子数据包并进行解析，得到所述第二子数据包中包含的关联于一个所述表格分页的所述表格数据内容；

步骤S54，所述客户端将所述表格数据内容填充入所述特有模板中，以形成一个所述表格分页的所述设备表格；

步骤S55，所述客户端判断所述设备表格是否需要分页显示：

若是，则转向下一个所述表格分页，并返回所述步骤S53；

若否，则将形成的所述设备表格显示于所述客户端上，随后退出。

7.一种计算机设备，其特征在于，采用如权利要求1-6所述的设备表格适配方法。

8.一种移动终端，其特征在于，采用如权利要求1-6所述的设备表格适配方法。