CN107885497A - 一种基于表格框架的网页前端数据展示方法及装置 - Google Patents

一种基于表格框架的网页前端数据展示方法及装置 Download PDF

Info

Publication number
CN107885497A
CN107885497A CN201711091994.2A CN201711091994A CN107885497A CN 107885497 A CN107885497 A CN 107885497A CN 201711091994 A CN201711091994 A CN 201711091994A CN 107885497 A CN107885497 A CN 107885497A
Authority
CN
China
Prior art keywords
data
initialization
form framework
pattern
node
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.)
Pending
Application number
CN201711091994.2A
Other languages
English (en)
Inventor
谢永恒
赵亮
火莽
火一莽
万月亮
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Ruian Technology Co Ltd
Original Assignee
Beijing Ruian Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Ruian Technology Co Ltd filed Critical Beijing Ruian Technology Co Ltd
Priority to CN201711091994.2A priority Critical patent/CN107885497A/zh
Publication of CN107885497A publication Critical patent/CN107885497A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明实施例公开了一种基于表格框架的网页前端数据展示方法及装置,所述方法包括:获取数据;对所述数据进行节点、样式以及事件初始化;将初始化后的数据进行展示。本发明实施例提供的基于表格框架的网页前端数据展示方法实现了在网页开发测试过程中数据的展示。

Description

一种基于表格框架的网页前端数据展示方法及装置
技术领域
本发明实施例涉及网页开发技术领域,尤其涉及一种基于表格框架的网页前端数据展示方法及装置。
背景技术
对于数据驱动的数字化信息时代,系统网页大多采用按需创建DOM(DocumentObject Model,文档对象模型)节点的方式保证数据展示,即数据层与DOM节点交替展示,从而使得数据以“树结构”实现可视化。而在数据可视化领域中表格操作是经常使用的技术,操作表格时往往会采用直接操作DOM节点的展示方法,这种展示方法是目前互联网网站制作的基础保障。对于节点操作与数据展示目前行业内部大多采用的模式有:
1、MVC模式(Model View Controller,模型-视图-控制器),即数据(模型)、展示层(视图)和用户交互(控制器),这种展示方式的过程大体分为以下步骤(1)用户和应用产生交互;(2)控制器的事件处理器被触发;(3)控制器从模型中请求数据,并将其交给视图;(4)视图将数据呈现给用户。具体参见如图1所示的MVC模式的架构示意图。2、MVP模式(ModelView Presenter,模型-视图-提出者),View与Presenter,Presenter与Model之间的通信都是双向的,但是View与Model之间不发生联系,都通过Presenter传递,View非常薄,不部署任何业务逻辑,称为“被动视图”,即没有任何主动性,而Presenter非常厚,所有的业务逻辑都部署在那里。具体参见如图2所示的MVP模式的架构示意图。3、MVVM模式(Model-View-ViewModel),ViewModel与Model之间双向绑定,View层的变动,自动反映在ViewModel,反之,ViewModel的变动,也会自动引起View层的变动,具体参见如图3所示的MVVM模式的架构示意图。
以上三种常见的节点操作与数据展示模式各自均存在一定的缺点:MVC模式的缺点在于:Controller测试困难,因为视图同步操作是由View自己执行,而View只能在有UI(User Iterface,用户界面)环境下运行,如果没有UI环境,Controller更新Model的时候,无法对View的更新操作进行判断。同时View无法组件化,View是强依赖特定的Model的,如果需要把这个View抽出来作为另外一个应用程序可复用的组件有一定的困难,因为不同程序的Domain Model是不一样的。MVP模式的缺点在于:Presenter中除了业务逻辑以外,还有大量的Model->View的手动同步逻辑,造成Presenter比较笨重,维护起来会比较困难。MVVM模式的缺点在于:过于简单的图形界面不适用,对于大型的图形应用程序、视图状态较多,ViewModel的构建和维护成本都会比较高,数据绑定的声明是通过指令写在View的模版当中的,这些内容没办法打断点,因此,测试起来比较麻烦。
发明内容
本发明实施例提供了一种基于表格框架的网页前端数据展示方法及装置,实现了在网页开发测试过程中数据的展示。
第一方面,本发明实施例提供了一种基于表格框架的网页前端数据展示方法,该方法包括:
获取数据;
对所述数据进行节点、样式以及事件初始化;
将初始化后的数据进行展示。
进一步地,所述获取数据包括:
根据视图层的展示需求通过表格框架的构造函数从数据中心请求对应的数据;
所述对应的数据包括json文件中的数据和/或后端开发人员提供的数据接口中的数据;
对应地,所述将初始化后的数据进行展示包括:
将初始化后的数据在视图层进行展示。
进一步地,所述对所述数据进行节点、样式以及事件初始化包括:
在所述表格框架的构造函数中通过参数配置器集成所述表格框架默认的初始化节点、样式以及事件,并通过所述表格框架的构造函数对所述数据进行初始化。
进一步地,所述方法还包括:接收通过用户自定义配置接口对所述数据的节点、样式以及事件内容进行编辑的操作信息;
通过用户自定义构造检测器将所述操作信息反馈给所述表格框架的构造函数;
所述表格框架的构造函数根据所述操作信息对所述数据的节点、样式以及事件内容进行初始化,并将初始化后的数据进行展示。
进一步地,所述表格框架的构造函数中挂载节点构造器,用于根据数据数量以及展示需求创建DOM元素,所述DOM元素包括DOM节点的类型以及样式构造。
进一步地,所述表格框架的构造函数中封装自适应适配器,用于在进行数据初始化时根据视口大小计算各表格之间的行高、列宽,并根据计算结果对数据进行节点初始化。
第二方面,本发明实施例提供了一种基于表格框架的网页前端数据展示装置,所述装置包括:获取模块,用于获取数据,具体用于根据视图层的展示需求通过表格框架的构造函数从数据中心请求对应的数据;所述对应的数据包括json文件中的数据和/或后端开发人员提供的数据接口中的数据;
第一初始化模块,用于对所述数据进行节点、样式以及事件初始化;
展示模块,用于将初始化后的数据进行展示,具体用于:将初始化后的数据在视图层进行展示。
进一步地,所述第一初始化模块具体用于在所述表格框架的构造函数中通过参数配置器集成所述表格框架默认的初始化节点、样式以及事件,并通过所述表格框架的构造函数对所述数据进行初始化。
进一步地,所述装置还包括:接收模块,用于接收通过用户自定义配置接口对所述数据的节点、样式以及事件内容进行编辑的操作信息;
反馈模块,用于通过用户自定义构造检测器将所述操作信息反馈给所述表格框架的构造函数;
第二初始化模块,用于所述表格框架的构造函数根据所述操作信息对所述数据的节点、样式以及事件内容进行初始化,并将初始化后的数据进行展示。
进一步地,所述表格框架的构造函数中挂载节点构造器,用于根据数据数量以及展示需求创建DOM元素,所述DOM元素包括DOM节点的类型以及样式构造;
所述表格框架的构造函数中封装自适应适配器,用于在进行数据初始化时根据视口大小计算各表格之间的行高、列宽,并根据计算结果对数据进行节点初始化。
本发明实施例提供的一种基于表格框架的网页前端数据展示方法,通过获取数据,并对所述数据进行节点、样式以及事件初始化,最后将初始化后的数据进行展示的技术手段,轻松实现了在网页开发过程中数据的展示。
附图说明
图1是现有技术中MVC模式的架构示意图;
图2是现有技术中MVP模式的架构示意图;
图3是现有技术中MVVM模式的架构示意图;
图4是本发明实施例一提供的一种基于表格框架的网页前端数据展示方法流程示意图;
图5是本发明实施例一提供的表格框架内部运行原理示意图;
图6是本发明实施例一提供的表格框架的设计原理示意图;
图7是本发明实施例一提供的表格框架环境配置示意图;
图8是本发明实施例一提供的表格框架页面配置示意图;
图9是本发明实施例一提供的表格框架初始化示意图;
图10是本发明实施例一提供的表格框架的部分参数配置示意图;
图11是本发明实施例一提供的表格框架数据中心配置示意图;
图12是本发明实施例一提供的表格框架页面展示效果示意图;
图13是本发明实施例二提供的一种基于表格框架的网页前端数据展示方法流程示意图;
图14是本发明实施例三提供的一种基于表格框架的网页前端数据展示装置结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部结构。
在更加详细地讨论示例性实施例之前应当提到的是,一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项步骤描述成顺序的处理,但是其中的许多步骤可以被并行地、并发地或者同时实施。此外,各项步骤的顺序可以被重新安排。当其步骤完成时所述处理可以被终止,但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。
实施例一
图4为本发明实施例一提供的一种基于表格框架的网页前端数据展示方法流程示意图,本实施例提供的基于表格框架的网页前端数据展示方法可适用于网页开发测试过程中对数据进行预展示的情况,该方法可以由基于表格框架的网页前端数据展示装置来执行。其中,所述表格框架采用了MVC模式与MVP模式结合的jQuery框架,其内部运行原理示意图如图5所示:数据模型Model驱动视图View变化,通过控制器Controller的指令及操作改变数据模型,从而改变视图View,而视图View与控制器Controller双向绑定,即视图View改变会激发数据模型Model变化,进而反馈于视图View,这种数据-控制-视图的绑定与分离模式可以支持业界的普遍化研发。在当前数据驱动下的视图主流市场中,MVC模式已经逐步演化为前端与后端分离,研发过程中,如果没有充足的后台以及前端知识的积累都无法进行有效的开发。后端人员无法快速制作出UI界面,或前端人员无法获得数据接口,这都将会导致工程和项目超时或延期。而本发明中这款基于jQuery的web前端框架,其重点在于可以实现模拟测试环境,且其集成了自身的UI设计,通过简单的数据配置,以及灵活的事件绑定,即可轻松便捷地进行数据的展示,以及增、删、改、查操作。具体参见图4所示,基于上述表格框架的数据展示方法具体包括如下:
步骤110、获取数据。
示例性地,所述获取数据包括:
根据视图层的展示需求通过表格框架的构造函数从数据中心请求对应的数据;具体可以在表格框架的构造函数中通过url,ajax请求从数据中心请求对应的数据;
所述对应的数据包括json文件中的数据和/或后端开发人员提供的数据接口中的数据;
对应地,所述将初始化后的数据进行展示包括:
将初始化后的数据在视图层进行展示。
具体的,在网页开发测试过程中,通常需要预览某个事件的展示效果(即视图层的展示需求),所述事件具体可以是某学生的一张成绩单或者一个班级所有学生的成绩单或者某人一天的定位信息等,在展示之前与真实数据相似的数据是必需的,因此通过上述的表格框架可以模拟测试环境,获取有效数据,以提供给网页前端进行展示。因此,本发明实施例提供的数据展示方法有效解决了前后端开发过程中无法及时链接与测试的难题。
步骤120、对所述数据进行节点、样式以及事件初始化。
示例性地,所述对所述数据进行节点、样式以及事件初始化包括:
在所述表格框架的构造函数中通过参数配置器集成所述表格框架默认的初始化节点、样式以及事件,并通过所述表格框架的构造函数对所述数据进行初始化。
步骤130、将初始化后的数据进行展示。
即将初始化后的数据在表格框架的视图层进行展示。
本实施例提供的一种基于表格框架的网页前端数据展示方法,通过根据视图层的展示需求通过表格框架的构造函数从数据中心请求对应的数据,在所述表格框架的构造函数中通过参数配置器集成所述表格框架默认的初始化节点、样式以及事件,并通过所述表格框架的构造函数对所述数据进行初始化,将初始化后的数据在表格框架的视图层进行展示的技术手段,有效解决了前后端开发过程中无法及时链接与测试的难题,并轻松地实现了数据的展示。
在上述实施例技术方案的基础上,进一步的,图6示出了上述表格框架的设计原理图,并展示了完整的数据传输与展示机制,其各部分构造内容如下所示:
(1)数据中心;(2)用户自定义节点、事件、数据接口;(3)框架默认的初始化节点、样式、事件;(4)框架核心构造函数;(5)视图层;(6)视图反馈数据检测器;(7)参数配置器;(8)url,ajax请求;(9)用户自定义配置接口;(10)用户自定义构造检测器;(11)构造函数初始化。
基于该表格框架在数据展示过程中通过以下几个步骤实现:
根据(5)视图层的需求在(4)框架核心构造函数中通过(8)url,ajax请求(1)数据中心的数据,这里的数据可以是本地的json文件或者是后端开发人员提供的数据接口url。在获取到数据后,在(4)框架核心构造函数中通过(7)参数配置器集成(3)框架默认的初始化节点、样式、事件,进而通过(11)构造函数初始化,最后展示在(5)视图层中。
在展示过程中,如果用户对框架(3)框架默认的初始化节点、样式、事件的内容不满意,亦或有新的想法可以通过(9)用户自定义配置接口进行配置,而这些配置通过(10)用户自定义构造检测器后经过编译反馈给(4)框架核心构造函数,再通过(11)构造函数初始化,将新的配置展示在(5)视图层。在此传输过程中,用户也可以通过(6)视图反馈数据检测器反馈给(1)数据中心的数据验证数据展示的正确性。
进一步地,针对所述表格框架的使用给出如下配置说明:
(1)使用环境准备:如图7所示的表格框架环境配置示意图,需要分别创建images、js、css、json文件夹,将Table.js和table.css放置在对应的文件目录下,并导入jQuery文件,images中放置表格默认的初始化样式的图片,包括一些图标、按钮、样式等。js文件夹内包含一个tableConfig.js配置文件以及Table.js引擎文件。Css文件夹中存放table.css文件,用户通过在此文件内添加或修改实现表格原始样式或自定义样式的修改。如果用户对初始的样式不满意,可以通过页面的提示工具捕捉到相应的样式后,对样式进行覆盖重写即可达到样式修改。
(2)页面环境准备:如图8所示的页面配置示意图,根据url的目录引入相关css、js等资源,在页面中创建一个DOM节点绑定ID用于展示表格数据的容器。必须保证页面内所引进的资源路径正确,前端开发人员如果没有及时、对应的数据接口,可以在本地的json文件夹中建立json文件,需要保证json文件格式正确。后端开发人员可以建立html、jsp页面引入资源后创建DOM容器,通过该DOM容器,挂在表格构造函数从而实现数据展示。
(3)展示样式信息配置:如图9所示的表格框架初始化示意图以及如图10所示的表格框架部分参数配置示意图,在tableConfig.js里进行初始化配置,根据数据以及所需视图的需求,对参数进行显示、隐藏配置,从而达到数据展示的需求,在此可以根据用户的需求进行权限配置从而展示不同的内容。目前的表格框架中已经提供了相应的功能性开关,需要在配置文件中设置开关状态,通过数据渲染机制可实现不同的数据渲染功能。
(4)数据中心配置:如图11所示的表格框架数据中心配置示意图,在tableData.json中配置所需数据,此文件能够清晰看出数据结构,灵活编辑数据,对数据的增、删、改、查将会直接反馈在视图,能够展示动态的数据模式,在此json文件中,可以根据需求设计合理的json格式,数据机制进行渲染。
(5)数据展示效果图:如图12所示的表格框架页面展示效果示意图,可以看出数据展示的表格支持增、删、改、查操作,并且在表头赋予了排序按钮,用户可以根据需求对表格进行参数排序展示,从而达到需求。
无论是前端开发人员亦或后端研发人员在无法同步视图与数据的时刻均可以用上述表格框架模拟数据,亦或模拟视图。研发人员仅需进行简单的轻量级的配置就能够实现数据展示与操作。
因此,上述表格框架还包括:一种数据驱动灵活创建节点自适应配置,
a、构造函数中挂载节点构造器;本表格框架在表格构造函数中挂载了节点构造器,根据数据数量及配置类型进行匹配创建DOM元素,包括DOM节点的任意类型,节点的样式构造,同时支持构造接口,支持用户便捷地创造自定义DOM节点。
b.构造函数中封装自适应适配器;本表格框架在构造DOM节点时,将DOM节点以参数的形式传递给构造函数,从而在初始化时赋予了对象的绑定节点,而在节点构造时根据视口大小计算各表格之间的行高、列宽等表格基本元素,赋予各个元素的基本DOM参数,同时在构造函数中,支持用户自定义输入元素的尺寸,这些将会以参数的形式传递到构造函数中,构造函数执行时将会渲染各参数。DOM节点都是通过了兼容性测试的,在当前绝大多数浏览器都是可支持的。
上述表格框架还包括:一种视图反馈数据实时跟踪数据的纠察模式,
所有的数据都是以DOM节点包裹形式渲染,在数据改变时,可实时反映在视图层,可在数据配置中进行流程反馈与检测。
数据展示在页面,可直接使用浏览器的调试工具进行数据跟踪,无需再安装其他调试工具,所有的数据没有进行反编译,可直接在DOM节点中进行查看与调试。
上述表格框架还包括一种视图绑定事件,事件操作数据,反馈视图的模式,它包括:
表格框架本身封装了部分格式化事件,包括对表格内容的排序,通过拖拽进行表格样式布局调整,表格隔行变色,表格鼠标悬停变色,页面尺寸改变,表格实现自适应等默认格式化事件。
上述表格框架支持用户自定义事件以及自定义节点,在配置中,用户可对表格的单元格进行重写以及事件绑定,比如点击事件、跳转、合并等事件操作,而这些事件操作可与数据进行绑定,从而实现控制数据与控制视图的过程。
表格框架事件机制可使用javascript或者jQuery进行自定义修改,可修改或覆盖默认事件。事件处理难度可完全由用户自定义,占用比重以及难易程度。在较大程度上赋予了用户的创造性,极大的还原了用户的本意。
本表格框架决了前后端开发过程中无法及时链接与测试的难题,注重于数据展示与节点控制的结合,将数据绑定变为简单化,将数据展示与用户体验变得轻松,用户使用过程中,无需知道冗杂的数据展现机制,只需要阅读简单的配置说明就可以轻松使用配置展示数据,在前端开发过程中如果没有及时的数据调配,可以使用此框架模拟出数据进而进行复杂的运算或数据展示,而后端开发人员如果没有及时的前端页面,可以通过此框架达到数据上传页面的效果,同时框架支持真实数据的接口,在真实开发过程中只需要将后端返回的数据拼接成所需的“json”格式,便可简单便捷的开发。
实施例二
图13是本发明实施例二提供的一种基于表格框架的网页前端数据展示方法流程示意图,在实施例一技术方案的基础上,本实施例进行了进一步优化。具体参见图13所示,所述方法包括:
步骤210、根据视图层的展示需求通过表格框架的构造函数从数据中心请求对应的数据。
步骤220、在所述表格框架的构造函数中通过参数配置器集成所述表格框架默认的初始化节点、样式以及事件,并通过所述表格框架的构造函数对所述数据进行初始化。
步骤230、将初始化后的数据进行展示。
步骤240、接收通过用户自定义配置接口对所述数据的节点、样式以及事件内容进行编辑的操作信息。
步骤250、通过用户自定义构造检测器将所述操作信息反馈给所述表格框架的构造函数。
步骤260、所述表格框架的构造函数根据所述操作信息对所述数据的节点、样式以及事件内容进行初始化,并将初始化后的数据进行展示。
进一步地,所述表格框架的构造函数中挂载节点构造器,用于根据数据数量以及展示需求创建DOM元素,所述DOM元素包括DOM节点的类型以及样式构造;所述表格框架的构造函数中封装自适应适配器,用于在进行数据初始化时根据视口大小计算各表格之间的行高、列宽,并根据计算结果对数据进行节点初始化。
本实施例提供的一种基于表格框架的网页前端数据展示方法,在实施例一技术方案的基础上,通过接收通过用户自定义配置接口对所述数据的节点、样式以及事件内容进行编辑的操作信息,并通过用户自定义构造检测器将所述操作信息反馈给所述表格框架的构造函数,最终所述表格框架的构造函数根据所述操作信息对所述数据的节点、样式以及事件内容进行初始化,并将初始化后的数据进行展示的技术手段,实现了用户对数据展示的自定义操作。
实施例三
图14是本发明实施例三提供的一种基于表格框架的网页前端数据展示装置的结构示意图,参见图14所示,所述装置包括:获取模块310,第一初始化模块320和展示模块330;
其中,获取模块310,用于获取数据,具体用于根据视图层的展示需求通过表格框架的构造函数从数据中心请求对应的数据;所述对应的数据包括json文件中的数据和/或后端开发人员提供的数据接口中的数据;第一初始化模块320,用于对所述数据进行节点、样式以及事件初始化;展示模块330,用于将初始化后的数据进行展示,具体用于:将初始化后的数据在视图层进行展示。
进一步地,第一初始化模块320具体用于在所述表格框架的构造函数中通过参数配置器集成所述表格框架默认的初始化节点、样式以及事件,并通过所述表格框架的构造函数对所述数据进行初始化。
进一步地,所述装置还包括:
接收模块,用于接收通过用户自定义配置接口对所述数据的节点、样式以及事件内容进行编辑的操作信息;
反馈模块,用于通过用户自定义构造检测器将所述操作信息反馈给所述表格框架的构造函数;
第二初始化模块,用于所述表格框架的构造函数根据所述操作信息对所述数据的节点、样式以及事件内容进行初始化,并将初始化后的数据进行展示。
进一步地,所述表格框架的构造函数中挂载节点构造器,用于根据数据数量以及展示需求创建DOM元素,所述DOM元素包括DOM节点的类型以及样式构造;所述表格框架的构造函数中封装自适应适配器,用于在进行数据初始化时根据视口大小计算各表格之间的行高、列宽,并根据计算结果对数据进行节点初始化。
本实施例提供的一种基于表格框架的网页前端数据展示装置,通过根据视图层的展示需求通过表格框架的构造函数从数据中心请求对应的数据,在所述表格框架的构造函数中通过参数配置器集成所述表格框架默认的初始化节点、样式以及事件,并通过所述表格框架的构造函数对所述数据进行初始化,将初始化后的数据在表格框架的视图层进行展示的技术手段,有效解决了前后端开发过程中无法及时链接与测试的难题,并轻松地实现了数据的展示。
本发明实施例所提供的变频冰箱的控制装置可执行本发明任意实施例所提供的变频冰箱的控制方法,具备执行方法相应的功能模块和有益效果。
本领域技术人员可以理解实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成,该程序存储在一个存储介质中,包括若干指令用以使得一个设备(可以是单片机,芯片等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-OnlyMemory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种基于表格框架的网页前端数据展示方法,其特征在于,包括:
获取数据;
对所述数据进行节点、样式以及事件初始化;
将初始化后的数据进行展示。
2.根据权利要求1所述的方法,其特征在于,所述获取数据包括:
根据视图层的展示需求通过表格框架的构造函数从数据中心请求对应的数据;
所述对应的数据包括json文件中的数据和/或后端开发人员提供的数据接口中的数据;
对应地,所述将初始化后的数据进行展示包括:
将初始化后的数据在视图层进行展示。
3.根据权利要求1所述的方法,其特征在于,所述对所述数据进行节点、样式以及事件初始化包括:
在所述表格框架的构造函数中通过参数配置器集成所述表格框架默认的初始化节点、样式以及事件,并通过所述表格框架的构造函数对所述数据进行初始化。
4.根据权利要求1所述的方法,其特征在于,还包括:
接收通过用户自定义配置接口对所述数据的节点、样式以及事件内容进行编辑的操作信息;
通过用户自定义构造检测器将所述操作信息反馈给所述表格框架的构造函数;
所述表格框架的构造函数根据所述操作信息对所述数据的节点、样式以及事件内容进行初始化,并将初始化后的数据进行展示。
5.根据权利要求1-4任一项所述的方法,其特征在于,所述表格框架的构造函数中挂载节点构造器,用于根据数据数量以及展示需求创建DOM元素,所述DOM元素包括DOM节点的类型以及样式构造。
6.根据权利要求1-4任一项所述的方法,其特征在于,所述表格框架的构造函数中封装自适应适配器,用于在进行数据初始化时根据视口大小计算各表格之间的行高、列宽,并根据计算结果对数据进行节点初始化。
7.一种基于表格框架的网页前端数据展示装置,其特征在于,包括:
获取模块,用于获取数据,具体用于根据视图层的展示需求通过表格框架的构造函数从数据中心请求对应的数据;所述对应的数据包括json文件中的数据和/或后端开发人员提供的数据接口中的数据;
第一初始化模块,用于对所述数据进行节点、样式以及事件初始化;
展示模块,用于将初始化后的数据进行展示,具体用于:将初始化后的数据在视图层进行展示。
8.根据权利要求7所述的装置,其特征在于,所述第一初始化模块具体用于在所述表格框架的构造函数中通过参数配置器集成所述表格框架默认的初始化节点、样式以及事件,并通过所述表格框架的构造函数对所述数据进行初始化。
9.根据权利要求7所述的装置,其特征在于,还包括:
接收模块,用于接收通过用户自定义配置接口对所述数据的节点、样式以及事件内容进行编辑的操作信息;
反馈模块,用于通过用户自定义构造检测器将所述操作信息反馈给所述表格框架的构造函数;
第二初始化模块,用于所述表格框架的构造函数根据所述操作信息对所述数据的节点、样式以及事件内容进行初始化,并将初始化后的数据进行展示。
10.根据权利要求7-9任一项所述的装置,其特征在于,所述表格框架的构造函数中挂载节点构造器,用于根据数据数量以及展示需求创建DOM元素,所述DOM元素包括DOM节点的类型以及样式构造;
所述表格框架的构造函数中封装自适应适配器,用于在进行数据初始化时根据视口大小计算各表格之间的行高、列宽,并根据计算结果对数据进行节点初始化。
CN201711091994.2A 2017-11-08 2017-11-08 一种基于表格框架的网页前端数据展示方法及装置 Pending CN107885497A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201711091994.2A CN107885497A (zh) 2017-11-08 2017-11-08 一种基于表格框架的网页前端数据展示方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711091994.2A CN107885497A (zh) 2017-11-08 2017-11-08 一种基于表格框架的网页前端数据展示方法及装置

Publications (1)

Publication Number Publication Date
CN107885497A true CN107885497A (zh) 2018-04-06

Family

ID=61779265

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711091994.2A Pending CN107885497A (zh) 2017-11-08 2017-11-08 一种基于表格框架的网页前端数据展示方法及装置

Country Status (1)

Country Link
CN (1) CN107885497A (zh)

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109376163A (zh) * 2018-09-18 2019-02-22 广州视源电子科技股份有限公司 一种数据双向绑定的方法、装置、终端及存储介质
CN109508436A (zh) * 2018-11-14 2019-03-22 北京锐安科技有限公司 基于异步加载页面的前端路由方法及装置
CN110543295A (zh) * 2019-08-19 2019-12-06 广州华旻信息科技有限公司 可视化Web前端项目构建系统
CN110750748A (zh) * 2019-10-24 2020-02-04 杭州网景汇网络科技有限公司 一种网页页面显示方法
CN112100123A (zh) * 2020-08-31 2020-12-18 长江空间信息技术工程有限公司(武汉) 一种Web前端分层展示大数据量CAD文件的方法
CN112364281A (zh) * 2020-10-30 2021-02-12 深圳点猫科技有限公司 一种基于浏览器的网页编辑可视化实现方法、装置及设备
CN112632936A (zh) * 2020-12-24 2021-04-09 山东中创软件工程股份有限公司 一种电子表格的生成方法、系统及相关装置
CN113064656A (zh) * 2019-12-28 2021-07-02 上海博泰悦臻电子设备制造有限公司 环境配置应用程序的管理方法及装置
WO2022062835A1 (zh) * 2020-09-25 2022-03-31 北京锐安科技有限公司 事件响应装置、方法、电子设备及存储介质
WO2022083477A1 (zh) * 2020-10-22 2022-04-28 华为技术有限公司 一种mvvm架构的应用的开发方法及终端

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102339291A (zh) * 2010-07-23 2012-02-01 阿里巴巴集团控股有限公司 一种列表生成方法及设备
CN102520935A (zh) * 2011-11-29 2012-06-27 曙光信息产业(北京)有限公司 一种用于快速开发用户界面的方法
CN104281624A (zh) * 2013-07-12 2015-01-14 腾讯科技(深圳)有限公司 数据的展示方法及装置
CN105138448A (zh) * 2014-06-05 2015-12-09 北京畅游天下网络技术有限公司 一种在前端测试页面的方法和装置
US9740457B1 (en) * 2014-02-24 2017-08-22 Ca, Inc. Method and apparatus for displaying timeline of software development data

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102339291A (zh) * 2010-07-23 2012-02-01 阿里巴巴集团控股有限公司 一种列表生成方法及设备
CN102520935A (zh) * 2011-11-29 2012-06-27 曙光信息产业(北京)有限公司 一种用于快速开发用户界面的方法
CN104281624A (zh) * 2013-07-12 2015-01-14 腾讯科技(深圳)有限公司 数据的展示方法及装置
US9740457B1 (en) * 2014-02-24 2017-08-22 Ca, Inc. Method and apparatus for displaying timeline of software development data
CN105138448A (zh) * 2014-06-05 2015-12-09 北京畅游天下网络技术有限公司 一种在前端测试页面的方法和装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
佚名: "Vue+webpack项目中使用dev-server搭建虚拟服务,请求json文件数据,实现前后端分离", 《HTTPS://WWW.JIANSHU.COM/P/ADAA5D815087》 *
刘圣: "基于微信企业号企业管理系统的设计与实现", 《中国优秀硕士学位论文全文数据库 信息科技辑》 *

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109376163A (zh) * 2018-09-18 2019-02-22 广州视源电子科技股份有限公司 一种数据双向绑定的方法、装置、终端及存储介质
CN109508436A (zh) * 2018-11-14 2019-03-22 北京锐安科技有限公司 基于异步加载页面的前端路由方法及装置
CN110543295A (zh) * 2019-08-19 2019-12-06 广州华旻信息科技有限公司 可视化Web前端项目构建系统
CN110750748A (zh) * 2019-10-24 2020-02-04 杭州网景汇网络科技有限公司 一种网页页面显示方法
CN113064656A (zh) * 2019-12-28 2021-07-02 上海博泰悦臻电子设备制造有限公司 环境配置应用程序的管理方法及装置
CN112100123A (zh) * 2020-08-31 2020-12-18 长江空间信息技术工程有限公司(武汉) 一种Web前端分层展示大数据量CAD文件的方法
CN112100123B (zh) * 2020-08-31 2023-06-09 长江空间信息技术工程有限公司(武汉) 一种Web前端分层展示大数据量CAD文件的方法
WO2022062835A1 (zh) * 2020-09-25 2022-03-31 北京锐安科技有限公司 事件响应装置、方法、电子设备及存储介质
WO2022083477A1 (zh) * 2020-10-22 2022-04-28 华为技术有限公司 一种mvvm架构的应用的开发方法及终端
CN112364281A (zh) * 2020-10-30 2021-02-12 深圳点猫科技有限公司 一种基于浏览器的网页编辑可视化实现方法、装置及设备
CN112632936A (zh) * 2020-12-24 2021-04-09 山东中创软件工程股份有限公司 一种电子表格的生成方法、系统及相关装置

Similar Documents

Publication Publication Date Title
CN107885497A (zh) 一种基于表格框架的网页前端数据展示方法及装置
CN105138448B (zh) 一种在前端测试页面的方法和装置
CN106302008B (zh) 数据更新方法和装置
CN104484216B (zh) 服务接口文档和在线测试工具生成方法、装置
CN104216691B (zh) 一种创建应用的方法及装置
CA2674659C (en) Synchronous to asynchronous web page conversion
CN104573066B (zh) 页面复用方法及装置
CN103645908B (zh) 网构软件全生命周期开发实现系统
CN104834595A (zh) 一种可视化自动测试方法及系统
CN106484408A (zh) 一种基于html5的节点关系图显示方法及系统
CN105957409A (zh) 一种基于任务分配的自动教学方法及平台
CN104731578B (zh) 为可编程计量系统生成定制和同步参考注解的远程附件
CN109508436A (zh) 基于异步加载页面的前端路由方法及装置
CN108369514A (zh) 用于可执行内容和可执行内容流创建的系统和方法
CN108475267A (zh) 用于可执行内容和可执行内容流分发的系统和方法
Chin et al. The Definitive Guide to Modern Java Clients with JavaFX 17
Chaudhary et al. Low-code internet of things application development for edge analytics
Lorenzo et al. CARDS: A metamodel approach to aggregate outcomes of learning tools
US9477492B2 (en) Deploying multi-channel or device agnostic applications
Sanvordenker Visualization and testing of an autonomously driving truck’s SysML models in a virtual 3D simulation environment
Jugo et al. A proposal for a web based educational data mining and visualization system
Forcignano Digital Twin for collaborative spaces and Web Applications development in the context of Industry 4.0
Usmani GUIDELINES FOR SELECTION OF WEB DESIGNING TOOL & FRAMEWORK FOR WEB FRONT-END APPLICATION
Walker Web applications for interactive environmental modeling
Basso et al. Towards a web modeling environment for a model driven engineering approach

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20180406