本发明涉及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；填充空数据单元格方法：在循环遍历时加一个判断，若无子元素/子元素为空，则在子元素位置生成空单元格，形成统一样式；空单元格内部用空格 填充。自定义表格属性包括：宽度、高度、单元格行高、水平对齐方式、垂直对齐方式；当设置这些参数选项后，则根据设置的参数组成对应的css语句，组成方式是按照js的逻辑组成，然后将css添加到对应目标的style属性上。本发明作为一个jq插件，解决了从xml/json读取数据后，根据提供的参数，自动生成嵌套表格，完全不需要大的修改，只需要配置自定义参数，就可以实现数据的展示，为开发人员节约了大量时间。本发明的jq插件，只需要引用jq文件和本js文件，然后用一行初始化代码即可完成从任意数据源到嵌套表格的实现。附图说明下面结合附图对本发明进一步说明：图1为本发明的流程图。具体实施方式下面将结合附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出实质性创造获得的方案，都属于本发明保护的范围。如图1所示，以下是本发明的关于一种嵌套表格的快速生成系统和方法的重要功能点实现方法：1：xml转json模块。根据xml的标签特点，从父级开始，将标签名转换成属性名称，将标签内容转换成属性值，然后循环遍历子元素，当无子元素时，一层层跳出遍历；直到最后没有元素；转储的json按照本插件的默认格式临时存放在一个变量里；2：json解析模块。通过ajax方法读取json；url指向json数据源，设置为同步执行，方式post，首先将得到的data数据的父级元素，用一个each函数读取每个父元素的子元素，然后判断当前元素有无子元素，此时用一个while函数执行判断条件；在while函数里设置当前元素的全局变量，同时用if函数分割两种情况：一种是子元素为空，一种不为空；子元素不为空时，利用变量赋值，再次用一个each函数即遍历了所有的子元素情况；为了不让while变成死循环，必须及时给全局变量附上新值，这样while里的判断才会更新；3：主题css切换模块。建立一个专门存放主题样式的css文件，里面每一段内容代表一个主题的样式集；区别在于前缀；因此，当插件初始化时，根据主题的选择，就可以初始化所有的样式名，从而联系到对应的主题样式集，改变表格的样式，本插件支持用户自定义主题；4：自定义功能接口模块。自定义功能主要包括：是否添加表格头、是否填充空单元格等；表格头添加方法：通过遍历结果集中每行数据的列的属性，包括名称、宽度等，从而为设置表格头提供数据源，添加表格头需要另外新增一个嵌套的table，该table只保留thead；自动填充空数据单元格方法：在循环遍历时加一个判断，若无子元素/子元素为空，则在子元素位置生成空单元格，形成统一样式；空单元格内部用空格 ；填充；5：自定义样式接口模块。表格的样式有很多种，属性包括：宽度、高度、单元格行高、水平对齐方式、垂直对齐方式等；当设置了这些参数选项后，则根据设置的参数组成对应的css语句，组成方式是按照js的逻辑组成，然后将css添加到对应目标的style属性上；本发明的方法是：1：从指定数据源/格式，读取或查询得到数据data；2：指定数据源包括数据库数据、数据文件数据；其中，数据文件格式包括json文件、xml文件等；3：得到数据data后，本发明插件对数据data进行解析和分析，找到其中嵌套/非嵌套逻辑，用于生成前端展示界面view；4：本发明插件提供多个生成选项，包括：a：是否设置表格头(y/n)；b：数据源格式选择(json或xml)；c：是否自动填充空数据单元格(y/n)；d：表格主题风格选择(black/slight)；e：自定义宽度、高度、单元格行高、水平对齐方式、垂直对齐方式等；5：本发明采用jq函数解析/分析数据；通过对行数据进行循环判断，若有子元素，则对子元素进行读取和判断，直到没有子元素时，一步步跳出循环；6：表格头添加方法：通过遍历结果集中每行数据的列的属性，包括名称、宽度等，从而为设置表格头提供数据源；7：数据源格式切换：本发明插件内置xml转json的方法函数，因此本发明最终都是从json读取数据；8：自动填充空数据单元格方法：在循环遍历时加一个判断，若无数据/数据为空，则生成空单元格，形成统一样式；空单元格内部用空格填充；9：主题风格切换方法：动态添加统一的样式前缀，当主题切换时只需要切换前缀；而所有主题的css样式代码都统一写在一个主题css里；10：自定义参数实现方法：动态添加css，从统一的参数css文件里调用；添加/切换css根据选项参数判断。当前第1页12当前第1页12