[发明专利]一种嵌套表格的快速生成方法

说明书

本发明涉及WEB前端开发技术领域，特别是一种嵌套表格的快速生成方法。本发明所述的方法是利用数据源转换模块将数据源从XML转换成JSON；然后利用JSON解析模块进行JSON解析；主题CSS切换模块建立一个专门存放主题样式的CSS文件；自定义功能接口模块、自定义样式接口模块自定义功能和样式。本发明通过JS代码实现表格视图的嵌套；可以用于代码开发中的元素嵌套。

技术领域

本发明涉及WEB前端开发技术领域，特别是一种嵌套表格的快速生成方法。

背景技术

目前代码开发中元素嵌套的现象普遍存在，解决办法是单独地为每个数据进行代码编写、解析，最终生成视图。理想的表格视图可以嵌套但很难通过JS代码实现。

发明内容

本发明解决的技术问题在于提供一种嵌套表格的快速生成方法，通过JS代码实现表格视图的嵌套。

本发明解决上述技术问题的技术方案是：

所述的方法是利用数据源转换模块将数据源从XML转JSON；然后利用JSON解析模块进行JSON解析；主题CSS切换模块建立一个专门存放主题样式的CSS文件；自定义功能接口模块、自定义样式接口模块自定义功能和样式。

从父级开始，将标签名转换成属性名称，将标签内容转换成属性值，然后循环遍历子元素，当无子元素时，一层层跳出遍历；直到最后没有元素；转储的JSON按照默认格式临时存放在一个变量里。

通过AJAX方法读取JSON；URL指向JSON数据源，并设置为同步执行；首先将得到的Data数据的父级元素，用一个each函数读取每个父元素的子元素；然后判断当前元素有无子元素，此时用一个while函数执行判断条件；在while函数里设置当前元素的全局变量，同时用if函数分割两种情况：一种是子元素为空，一种不为空；子元素不为空时，利用变量赋值，再次用一个each函数遍历所有的子元素情况；为不让while变成死循环，及时给全局变量附上新值，使while里的判断更新。

建立的CSS文件，里面每一段内容代表一个主题的样式集；各段前缀不同；当插件初始化时，根据主题的选择，初始化所有的样式名，从而联系到对应的主题样式集。

自定义功能主要包括：是否添加表格头、是否填充空数据单元格；

表格头添加方法是：通过遍历结果集中每行数据的列的属性，包括名称、宽度，从而为设置表格头提供数据源，添加表格头时另外新增一个嵌套的table，该table只保留thead；

填充空数据单元格方法：在循环遍历时加一个判断，若无子元素/子元素为空，则在子元素位置生成空单元格，形成统一样式；空单元格内部用空格&nbsp填充。

自定义表格属性包括：宽度、高度、单元格行高、水平对齐方式、垂直对齐方式；当设置这些参数选项后，则根据设置的参数组成对应的CSS语句，组成方式是按照JS的逻辑组成，然后将CSS添加到对应目标的style属性上。

本发明作为一个JQ插件，解决了从XML/JSON读取数据后，根据提供的参数，自动生成嵌套表格，完全不需要大的修改，只需要配置自定义参数，就可以实现数据的展示，为开发人员节约了大量时间。本发明的JQ插件，只需要引用JQ文件和本JS文件，然后用一行初始化代码即可完成从任意数据源到嵌套表格的实现。

附图说明

下面结合附图对本发明进一步说明：

图1为本发明的流程图。

具体实施方式

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