一种设备表格适配方法、计算机设备以及移动终端的制作方法
【专利摘要】本发明公开了一种设备表格适配方法、计算机设备以及移动终端，属于数据显示技术领域；方法包括：客户端向服务端发送一第一请求，服务端通过表格结构接口反馈包括表格模板的第一数据包；客户端解析第一数据包得到并保存表格模板；客户端判断自身的设备类型，并于客户端内将表格模板转换成适于设备类型的特有模板；客户端向服务端发送一第二请求，服务端通过表格数据接口反馈包括表格内容的第二数据包；客户端解析第二数据包得到表格内容，将表格内容填充到特有模板中，以渲染得到完整的设备表格。上述技术方案的有益效果是：表格结构设置灵活多变，提升开发速度，改善使用体验。
【专利说明】
-种设备表格适配方法、计算机设备从及移动终端
技术领域
[0001] 本发明设及数据显示技术领域，尤其设及一种设备表格适配方法、计算机设备W 及移动终端。
【背景技术】
[0002] 随着智能设备的多元化，越来越多的智能设备不局限于计算机设备例如台式机或 者笔记本电脑的类型，而趋向于更小型化的智能设备例如平板电脑和手机等移动终端的类 型。但是计算机设备和移动终端的屏幕尺寸完全不同，导致屏幕的分辨率也不同。而一般的 设备表格通常是由前端程序员设计成固定的表格格式，运种设备表格无法在多种类型的设 备间适配共用，也不能在多个页面间进行复用。
[0003] 现有技术中针对上述问题的做法通常为W下几种：1)直接在htmUHyper Text Markup Language，超文本标记语言）中编写不同的表格结构，通过读取数据并在服务端拼 接标签的方式组装表格;2)通过现有的js(JavaScript)库在客户端生成表格。上述两种方 式都无法避免表格在不同类型的设备中的显示问题。要想将设备表格适配到不同的设备上 进行显示就要根据相应的设备类型分别设计相应的表格页面。例如适配计算机设备和移动 终端，则至少需要设计两个不同的表格页面，因此最终计算机设备和移动终端接收到的表 格数据并不一定会来自同一数据源，造成表格设计比较繁琐，不同数据源的数据在同步上 也会出现问题，从而降低使用者的使用体验。
【发明内容】
[0004] 根据现有技术中存在的上述问题，现提供一种设备表格适配方法、计算机设备W 及移动终端的技术方案，旨在采用同一数据源解决不同类型设备中设备表格显示不适配屏 幕尺寸的问题，表格结构设置灵活多变，从而提升开发人员的开发速度，改善使用者的使用 体验；
[0005] 上述技术方案具体包括；
[0006] -种设备表格适配方法，其中，包括至少一个客户端W及一个服务端，所述服务端 分别与每个所述客户端远程连接，还包括：
[0007] 步骤S1，所述客户端向所述服务端发送一第一请求，W请求所述服务端通过一预 先定义的表格结构接口向所述客户端发送包括表格模板的第一数据包；
[000引步骤S2,所述客户端接收所述第一数据包并进行解析，得到并保存所述表格模板；
[0009] 步骤S3,所述客户端判断自身的设备类型，并根据判断得到的所述设备类型，于所 述客户端内将所述表格模板转换成适于所述设备类型的特有模板；
[0010] 步骤S4,所述客户端向所述服务端发送一第二请求，W请求所述服务端通过一预 先定义的表格数据接口向所述客户端发送包括表格内容的第二数据包；
[0011] 步骤S5，所述客户端接收所述第二数据包并解析得到相应的所述表格内容，将所 述表格内容填充到所述特有模板中，W擅染得到完整的所述设备表格并显示，随后退出。
[0012] 优选的，该设备表格适配方法，其中，所述步骤S2具体包括：
[0013] 步骤S21，所述客户端获取所述第一数据包，并根据所述第一数据包的状态值检查 数据响应是否成功：
[0014] 若否，则返回所述步骤S1，W重新向所述服务端发送所述第一请求；
[0015] 步骤S22,所述客户端将成功响应的所述第一数据包转换成所述表格模板并保存。
[0016] 优选的，该设备表格适配方法，其中，所述设备类型包括计算机终端类型；
[0017] 所述步骤S3中，若所述客户端被判断为所述计算机终端类型，则所述客户端依据 超文本语言中的tab 1 e标签，结合所述表格模板转换形成所述特有模板。
[0018] 优选的，该设备表格适配方法，其中，所述设备类型包括移动终端类型；
[0019] 所述步骤S3中，若所述客户端被判断为所述移动终端类型，则所述客户端依据超 文本语言中的ul标签和1 i标签，结合所述表格模板转换形成所述特有模板。
[0020] 优选的，该设备表格适配方法，其中，所述客户端为：
[0021 ]适用于计算机设备中的浏览器;或者
[0022] 适用于移动终端中的浏览器。
[0023] 优选的，该设备表格适配方法，其中，所述第二数据包包括：
[0024] 包含有所述设备表格的表格定义内容的第一子数据包；W及
[0025] 包含有所述设备表格的表格数据内容的第二子数据包；
[00%] 所述步骤S5具体包括：
[0027] 步骤S51，所述客户端根据所述第二请求接收到所述第一子数据包并进行解析，得 到所述第一子数据包中包含的所述表格定义内容；
[0028] 步骤S52,所述客户端根据所述表格定义内容确定所述特有模板中的内容显示形 式，W及所述特有模板中擅染的各个控件的类型；
[0029] 步骤S53,所述客户端根据所述第二请求接收到关联于一个表格分页的所述第二 子数据包并进行解析，得到所述第二子数据包中包含的关联于一个所述表格分页的所述表 格数据内容；
[0030] 步骤S54,所述客户端将所述表格数据内容填充入所述特有模板中，W形成一个所 述表格分页的所述设备表格；
[0031] 步骤S55,所述客户端判断所述设备表格是否需要分页显示：
[0032] 若是，则转向下一个所述表格分页，并返回所述步骤S53;
[0033] 若否，则将形成的所述设备表格显示于所述客户端上，随后退出。
[0034] -种计算机设备，其中，采用上述的设备表格适配方法。
[0035] -种移动终端，其中，采用上述的设备表格适配方法。
[0036] 上述技术方案的有益效果是：提供一种设备表格适配方法，能够采用同一数据源 解决不同类型设备中设备表格显示不适配屏幕尺寸的问题，表格结构设置灵活多变，从而 提升开发人员的开发速度，改善使用者的使用体验。
【附图说明】
[0037] 图1是本发明的较佳的实施例中，一种设备表格适配方法的总体流程示意图；
[0038] 图2是本发明的较佳的实施例中，于图1的基础上，解析得到表格模板的流程示意 图；
[0039] 图3是本发明的较佳的实施例中，于图1的基础上，擅染得到设备表格的流程示意 图；
[0040] 图4是本发明的较佳的实施例中，于计算机设备上经过擅染生成的设备表格的示 意图；
[0041] 图5是本发明的较佳的实施例中，于移动终端上经过擅染生成的设备表格的示意 图。
【具体实施方式】
[0042] 下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完 整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于 本发明中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其 他实施例，都属于本发明保护的范围。
[0043] 需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可W相 互组合。
[0044] 下面结合附图和具体实施例对本发明作进一步说明，但不作为本发明的限定。
[0045] 本发明的较佳的实施例中，基于现有技术中存在的上述问题，现提供一种设备表 格适配方法。该方法中，首先设置至少一个客户端W及一个服务端，服务端分别与每个客户 端远程连接。至少一个客户端可W均为同一个类型的设备，也可W为不同类型的设备。
[0046] 则本发明的较佳的实施例中，上述设备表格适配方法的具体步骤如图1所示，包 括：
[0047] 步骤S1，客户端向服务端发送一第一请求，W请求服务端通过一预先定义的表格 结构接口向客户端发送包括表格模板的第一数据包；
[0048] 步骤S2,客户端接收第一数据包并进行解析，得到并保存表格模板；
[0049] 步骤S3,客户端判断自身的设备类型，并根据判断得到的设备类型，于客户端内将 表格模板转换成适于设备类型的特有模板；
[0050] 步骤S4,客户端向服务端发送一第二请求，W请求服务端通过一预先定义的表格 数据接口向客户端发送包括表格内容的第二数据包；
[0051] 步骤S5,客户端接收第二数据包并解析得到相应的表格内容，将表格内容填充到 特有模板中，W擅染得到完整的设备表格并显示，随后退出。
[0052] 在一个具体实施例中，上述步骤S1中，客户端首先通过ht化协议向服务端发送一 第一请求，W请求服务端向客户端返回包括表格模板的第一数据包。上述第一请求可W为 通过http协议提出的Ajax请求。上述第一数据包可W为服务端通过其预先定义的表格结构 接口反馈的Json数据包。该Json数据包中包括了通用表格的表格模板的相关信息。
[0053] 该实施例中，上述步骤S2中，客户端接收到上述第一数据包后，通过解析得到该第 一数据包中包括的表格模板。该表格模板为一种通用的表格模板，或者被称为基础的表格 模板。不同类型的设备上适用的设备表格均可W通过该表格模板转换得到。
[0054] 该实施例中，上述步骤S3中，客户端首先判断得到自身的设备类型，例如判断为计 算机设备还是移动终端，并且根据运个判断结果，在上述表格模板的基础上转换得到相应 的特有模板。每个特有模板均对应于一种类型的客户端。具体地，客户端可w为适用于不同 的设备中的浏览器，贝可W通过JavaScript中的navigator. userAgent来判断设备类型，例 如为计算机设备上适用的浏览器，还是为移动终端上适用的浏览器。
[0055] 该实施例中，上述步骤S4中，客户端根据表格模板转换形成特有模板之后，再次向 服务端发送一第二请求，W请求服务端反馈包括表格数据内容的相应的第二数据包。具体 地，上述第二请求同样可W为Ajax请求，服务端通过一预先设定的表格数据接口向客户端 反馈相应的第二数据包。
[0056] 则该实施例中，上述步骤S5中，客户端获得上述第二数据包后，将该第二数据包进 行解析W得到其中的表格内容，随后将该表格内容填充到已经转换形成的特有模板中，最 终经过擅染得到一个完整的设备表格并显示在该客户端上。
[0057] 本发明的一个较佳的实施例中，上述服务端预先设定的表格结构接口返回的Json 数据包的定义为：
[0化引
[0化9]
[0060]
[0061] 本发明的一个较佳的实施例中，服务端预先设定的表格数据接口返回的Json数据 包可W被定义为：
[0062]
[0063]
[0064] 本发明的较佳的实施例中，开发人员可W将上述第一数据包和第二数据包编写在 服务端的相应的接口中，任何连接该服务端的客户端均可W通过发送请求的方式获取运些 数据包。
[0065] 本发明的较佳的实施例中，如图2所示，上述步骤S2具体包括：
[0066] 步骤S21，客户端获取第一数据包，并根据第一数据包的状态值检查数据响应是否 成功：
[0067] 若否，则返回步骤S1，W重新向服务端发送第一请求；
[0068] 步骤S22,客户端将成功响应的第一数据包转换成表格模板并保存。
[0069] 具体地，本发明的较佳的实施例中，客户端获取到上述第一数据包后，首先检查该 第一数据包的状态值，w验证该第一数据包的状态，从而判断该第一数据包的响应是否成 功:若是，则继续执行下述步骤;若否，则表示该第一数据包响应失败，此时可W返回上述步 骤S1，W重新向服务端发起一个第一请求。
[0070] 本发明的较佳的实施例中，服务端响应的第一数据包中可W包括:表格模板的ID、 表格模板挂在的容器的ID、css(Cascading Style Sheets,层叠样式表）的名称、是否启用 分页模式的信息、总的记录条数、每页的记录条数、表格列结构的定义W及表格内容的获取 URUUniform Resource Locator,统一资源定位符）等。
[0071] 则本发明的较佳的实施例中，上述转换形成表格模板的过程可W包括:首先解析 得到表格模板的ID及其容器(container)的ID;随后解析得到表格模板的class名称，用于 在客户端自定义表格的显示样式;随后解析得到表格模板中每一列的显示类型（例如显示 文字，或者显示图片等），生成表格模板中的基本的架构模型。
[0072] 本发明的较佳的实施例中，最后解析得到上述表格内容的获取URL。
[0073] 本发明的一个较佳的实施例中，如上文中所述，上述设备类型可W包括计算机设 备。
[0074] 则上述步骤S3中，若客户端被判断为计算机终端类型，则客户端依据html中的 tab 1 e标签，结合表格模板转换形成特有模板。
[0075] 本发明的另一个较佳的实施例中，如上文中所述，上述设备类型可W包括移动终 玉山 乂而。
[0076] 则上述步骤S3中，若客户端被判断为移动终端类型，则客户端依据html中的ul标 签和li标签，结合表格模板转换形成特有模板。
[0077] 本发明的较佳的实施例中，基于上文中所述的内容，客户端为适用于相应设备内 的浏览器。该浏览器的作用在于提供使用者输入指定的U化打开页面，W启动指定的表格页 面，从而在该页面中读入指定的表格结构接口 URL，W开始构建请求服务端的Json数据包的 第一请求/第二请求。并且，上述浏览器可W通过JavaScript中的navigator. userAgent来 判断客户端自身的设备类型。
[0078] 本发明的较佳的实施例中，在形成专属于该客户端的特有模板之后，客户端向服 务端发送上述第二请求，W获取上述第二数据包。该第二数据包中可W包括:该数据包的状 态值、表格内容的数据集合W及应用认证信息中的一种或几种等。因此，在获取该第二数据 包后，客户端同样可W通过该第二数据包的状态值判断第二数据包是否完整，并在判断其 完整后继续后续步骤。
[0079] 本发明的较佳的实施例中，上述第二数据包中进一步包括：
[0080] 包含有设备表格的表格定义内容的第一子数据包；W及
[0081] 包含有设备表格的表格数据内容的第二子数据包；
[0082] 则如图3所示，上述步骤S5具体包括：
[0083] 步骤S51，客户端根据第二请求接收到第一子数据包并进行解析，得到第一子数据 包中包含的表格定义内容；
[0084] 步骤S52，客户端根据表格定义内容确定特有模板中的内容显示形式，W及特有模 板中擅染的各个控件的类型；
[0085] 步骤S53,客户端根据第二请求接收到关联于一个表格分页的第二子数据包并进 行解析，得到第二子数据包中包含的关联于一个表格分页的表格数据内容；
[0086] 步骤S54,客户端将表格数据内容填充入特有模板中，W形成一个表格分页的设备 表格；
[0087] 步骤S55,客户端判断设备表格是否需要分页显示：
[0088] 若是，则转向下一个表格分页，并返回步骤S53;
[0089] 若否，则将形成的设备表格显示于客户端上，随后退出。
[0090] 具体地，本发明的较佳的实施例中，客户端首先向服务端发送第二请求，服务端根 据该第二请求，通过预先设定的表格数据接口向客户端返回第一子数据包。
[0091] 客户端接收到该第一子数据包后，同样通过其状态值检查该第二数据包的完整 性，W确认数据在发送过程中没有出现错误。
[0092] 随后，客户端解析该第一子数据包，得到其中包含的相应的表格定义内容。表格定 义内容所包含的与上述第一数据包中包含的内容类似，均为定义一个设备表格的形式，在 此不再寶述。
[0093] 随后，客户端将上述设备表格挂在擅染到html页面ID为div_list的div中，并根据 cols中的若干个表格列数据来决定该列擅染的控件类型，例如列的名称(name)、控件的类 型(cell)、标签(label )、是否可编辑的属性(edi1:able)W及是否可见的属性(visible)等。
[0094] 例如，表格模板中的某一列定义如下：
[0095]
[0096] 则对应的json数据包中的内容对应如下（由于篇幅原因只节选其中一部分内容）：
[0097]
[0098] 随后，客户端根据da化U化向服务端发送第二请求，W请求服务端反馈第二子数据 包。该第二子数据包同样需要事先经过完整性验证。
[0099] 客户端解析该第二子数据包W得到设备表格中某一页的内容数据。具体地客户端 为依次获取设备表格中每一页的内容数据的，例如第一次获取的为首页数据，之后依次获 取每一页的数据。
[0100] 则客户端在获取到某一页的内容数据后，根据返回的第二子数据中解析得到的内 容与上述步骤中解析得到的列名称(name)进行一一对应，W进行表格内容数据的填充和擅 染。在上述实施例中，若name为newsAbstract，则该列被填充并擅染为"XX工作室成立于 XXXX年，是由美术家XX个人名字命名的工作室。"
[0101] 本发明的较佳的实施例中，在对设备表格的某一页的内容数据填充擅染完毕后， 客户端会根据相关的分页信息生成分页器。该分页器适应于不同的设备进行分页。例如计 算机设备就是一个常见的分页条，供使用者手动点击跳转页码(如图4所示），而移动终端表 现为滚动到列表底部自动加载更多数据的形式(如图5所示）。
[0102] 随后，客户端会首先将第一页内容擅染到设备表格的第一页中，随后判断服务端 是否还存在分页的其他表格内容:若是，则客户端依次向服务端请求获取下一页的表格内 容，并将运些表格内容依次填充擅染到相应的分页中，最终形成一个完整的经过擅染的设 备表格并放到客户端中显示，具体地显示在适用于不同设备的浏览器中。
[0103] 综上所述，本发明技术方案中，对于不同设备类型的客户端而言，基于同一个数据 源，首先客户端从服务端获取并解析得到通用的表格模板;随后客户端判断自身的设备类 型，并根据判断结果在表格模板的基础上转换形成对应于各自设备类型的特有模板。最后 客户端从服务端获取并解析得到实质的表格数据内容，并将表格数据内容填充到对应的特 有模板中，经过擅染后形成并显示最终的设备表格。
[0104] 本发明的较佳的实施例中，还提供一种计算机设备，其中采用上文中所述的设备 表格适配方法。
[0105] 本发明的较佳的实施例中，还提供一种移动终端，其中采用上文中所述的设备表 格适配方法。
[0106] W上所述仅为本发明较佳的实施例，并非因此限制本发明的实施方式及保护范 围，对于本领域技术人员而言，应当能够意识到凡运用本发明说明书及图示内容所作出的 等同替换和显而易见的变化所得到的方案，均应当包含在本发明的保护范围内。
【主权项】
1. 一种设备表格适配方法，其特征在于，包括至少一个客户端以及一个服务端，所述服 务端分别与每个所述客户端远程连接，还包括： 步骤S1，所述客户端向所述服务端发送一第一请求，以请求所述服务端通过一预先定 义的表格结构接口向所述客户端发送包括表格模板的第一数据包； 步骤S2，所述客户端接收所述第一数据包并进行解析，得到并保存所述表格模板； 步骤S3，所述客户端判断自身的设备类型，并根据判断得到的所述设备类型，于所述客 户端内将所述表格模板转换成适于所述设备类型的特有模板； 步骤S4,所述客户端向所述服务端发送一第二请求，以请求所述服务端通过一预先定 义的表格数据接口向所述客户端发送包括表格内容的第二数据包； 步骤S5,所述客户端接收所述第二数据包并解析得到相应的所述表格内容，将所述表 格内容填充到所述特有模板中，以渲染得到完整的所述设备表格并显示，随后退出。2. 如权利要求1所述的设备表格适配方法，其特征在于，所述步骤S2具体包括： 步骤S21，所述客户端获取所述第一数据包，并根据所述第一数据包的状态值检查数据 响应是否成功： 若否，则返回所述步骤S1，以重新向所述服务端发送所述第一请求； 步骤S22,所述客户端将成功响应的所述第一数据包转换成所述表格模板并保存。3. 如权利要求1所述的设备表格适配方法，其特征在于，所述设备类型包括计算机终端 类型； 所述步骤S3中，若所述客户端被判断为所述计算机终端类型，则所述客户端依据超文 本语言中的tab 1 e标签，结合所述表格模板转换形成所述特有模板。4. 如权利要求1所述的设备表格适配方法，其特征在于，所述设备类型包括移动终端类 型； 所述步骤S3中，若所述客户端被判断为所述移动终端类型，则所述客户端依据超文本 语言中的ul标签和1 i标签，结合所述表格模板转换形成所述特有模板。5. 如权利要求1所述的设备表格适配方法，其特征在于，所述客户端为： 适用于计算机设备中的浏览器;或者 适用于移动终端中的浏览器。6. 如权利要求1所述的设备表格适配方法，其特征在于，所述第二数据包包括： 包含有所述设备表格的表格定义内容的第一子数据包；以及 包含有所述设备表格的表格数据内容的第二子数据包； 所述步骤S5具体包括： 步骤S51，所述客户端根据所述第二请求接收到所述第一子数据包并进行解析，得到所 述第一子数据包中包含的所述表格定义内容； 步骤S52，所述客户端根据所述表格定义内容确定所述特有模板中的内容显示形式，以 及所述特有模板中渲染的各个控件的类型； 步骤S53,所述客户端根据所述第二请求接收到关联于一个表格分页的所述第二子数 据包并进行解析，得到所述第二子数据包中包含的关联于一个所述表格分页的所述表格数 据内容； 步骤S54,所述客户端将所述表格数据内容填充入所述特有模板中，以形成一个所述表 格分页的所述设备表格； 步骤S55,所述客户端判断所述设备表格是否需要分页显示： 若是，则转向下一个所述表格分页，并返回所述步骤S53; 若否，则将形成的所述设备表格显示于所述客户端上，随后退出。7. -种计算机设备，其特征在于，采用如权利要求1-6所述的设备表格适配方法。8. -种移动终端，其特征在于，采用如权利要求1-6所述的设备表格适配方法。
【文档编号】G06F17/24GK105824790SQ201610147337
【公开日】2016年8月3日
【申请日】2016年3月15日
【发明人】袁初成
【申请人】上海缔安科技股份有限公司