[发明专利]一种原生HTML表格组件

说明书

本发明涉及应用软件领域，具体提供了一种原生HTML表格组件，具有以下步骤：S1、创建一个类并继承原生HTML元素类；S2、创建必要的DOM元素；S3、进行DOM初始化；S4、根据表格数据进行表格体的创建和渲染；S5、利用Web components API创建自定义标签6、在HTML页面中使用标签；S7、根据页面具体需求使用标签自定义方法。与现有技术相比，本发明的通过shadow DOM创建的子DOM树，不会被页面上的CSS样式和JS脚本所影响。当引入一个第三方组件的时候，不用担心会对网站其他功能造成影响。对于开发者来说，开发无害插件变得更简单。

技术领域

本发明涉及应用软件领域，具体提供一种原生HTML表格组件。

背景技术

随着浏览器网页在各个方面的应用,前端应用也在日渐增多。在越来越多的前端代码的产生情况下,越来越多的相同的代码片段被重复的使用,这个时候前端UI组件应运而生。

在现在的市场下，大部分UI框架都是基于JS框架下，这部分框架在前后端分离的项目中。一小部分是在应用中引入外部的CSS和JS文件，这部分框架在前端后不分离项目中被广泛应用。而这种框架在引入外部CSS和JS文件的同时，伴随着必要的HTML代码片段来保证页面的样式与设计的页面相同。这样的复用会产生大量重复的代码，且修改和维护成本较高。

发明内容

本发明是针对上述现有技术的不足，提供一种实用性强的原生HTML表格组件。

本发明解决其技术问题所采用的技术方案是：

一种原生HTML表格组件，具有以下步骤：

S1、创建一个类并继承原生HTML元素类；

S2、创建必要的DOM元素；

S3、进行DOM初始化；

S4、根据表格数据进行表格体的创建和渲染；

S5、利用Web components API创建自定义标签

S6、在HTML页面中使用标签；

S7、根据页面具体需求使用标签自定义方法。

进一步的，在步骤S2中，首先创建必要的DOM元素，并为DOM元素添加相应的样式，包括创建itpd-table表格容器、itpd-table表头容器、itpd-table表格表数据容器、样式标签、表格头部、表格数据部分、表格头部标签、表格体标签、表格渲染节点、表格有下拉选择框时创建填充节点、表头字段列表、表头每个td宽度、初始化表格数据和创建头部表格行。

进一步的，在步骤S3中，进行DOM初始化，根据传入的表头和itpd-table表格数据进行DOM树的创建。

进一步的，使用tableInit()方法进行DOM初始化，在初始化过程中，首先根据表头数据，创建表头表格和thead标签，创建每个列，并保存每个列的宽度，将表头和数据渲染在两个表格当中，同时监听表格数据部分的横向滚动，保持上下两个表格的横向滚动同步。

进一步的，在步骤S4中，判断itpd-table表格数据是否为空，为空的话，显示暂无数据，将暂无数据添加到表格体标签中；不为空的话，根据表格数据进行itpd-table表格体的创建和渲染。

进一步的，根据表格数据进行itpd-table表格体的创建和渲染时，根据表格数据和表头的关键字进行对比，使表头和数据能够在相同列显示对应的数据，在进行渲染时判断是否有自定义内容，根据表头的关键字和页面的DOM判断是否进行itpd-table表格数据的替换处理，在自定义内容中可以通过设置标签属性设置标签的显示和隐藏，同时判断是否有onclick事件，有的话将当前行的参数作为第一个参数传给自定义方法。