CN105739962A - 基于html的表格单元格编辑器控件扩展方法和系统 - Google Patents

Abstract

本发明提供了一种基于HTML的表格单元格编辑器控件扩展方法，包括：获取用户点击的当前节点；判断当前节点是否为包含预设标识的单元格，如果是，则展示与单元格对应的自定义的表格单元格编辑器控件；如果不是，则判断当前节点是否是预设的终止节点，如果不是，则读取当前节点的父节点，将当前节点的父节点作为当前节点，进入判断当前节点是否为包含预设标识的单元格的步骤；如果当前节点是预设的终止节点，则不作处理。通过包含预设标识的单元格控制展示自定义的表格单元格编辑器控件，表格单元格编辑器控件的生成和展示不依赖于HTML框架中的API，这种扩展方式更灵活。此外，还提供了一种基于HTML的表格单元格编辑器控件扩展系统。

Description

基于HTML的表格单元格编辑器控件扩展方法和系统

技术领域

本发明涉及计算机技术领域，特别是涉及一种基于HTML的表格单元格编辑器控件扩展方法和系统。

背景技术

超文本标记语言，即HTML(HypertextMarkupLanguage)，是用于描述网页文档的一种标记语言。HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。当我们使用超文本标记语言设计网页时，经常会使用HTML框架，通过使用HTML框架，可以在同一个浏览器窗口中显示不止一个页面。

一些HTML框架不开放表格单元格编辑器控件的源代码，无法对代码进行修改，同时也没有开放支持扩展表格单元格编辑器控件的API(ApplicationProgrammingInterface，应用程序编程接口)，这使得表格单元格编辑器控件无法扩展，展示形式固定单一。但由于框架其他方面的优越性无法替代，如果更换框架则无法达到软件设计时制定的目标，只能降低表格单元格编辑器控件的设计标准，牺牲表格单元格编辑器控件展示形式的易用性和友好性来完成项目的开发以完成既定的运营目标。

即使有些HTML框架有支持扩展表格单元格编辑器控件的API，但为了保证整个框架的标准统一，其表格单元格编辑器控件扩展方式往往会对控件交互，样式、展示方式等存在限制，使得表格单元格编辑器控件的扩展不够灵活。

发明内容

基于此，有必要针对上述问题，提供一种基于HTML的表格单元格编辑器控件扩展方法和系统，不依赖于HTML框架中的扩展表格单元格编辑器控件的API，使得表格单元格编辑器控件的扩展更灵活多样。

一种基于HTML的表格单元格编辑器控件扩展方法，所述方法包括：

获取用户点击的当前节点；

判断所述当前节点是否为包含预设标识的单元格，如果是，则展示与所述单元格对应的自定义的表格单元格编辑器控件；

如果不是，则判断所述当前节点是否是预设的终止节点，如果不是，则读取所述当前节点的父节点，将所述当前节点的父节点作为当前节点，进入所述判断所述当前节点是否为包含预设标识的单元格的步骤；

如果所述当前节点是预设的终止节点，则不作处理。

在其中一个实施例中，在所述展示与所述单元格对应的自定义的表格单元格编辑器控件的步骤之前，还包括：

判断所述单元格对应的自定义的表格单元格编辑器控件是否己被其它单元格展示，如果是，则销毁所述表格单元格编辑器控件。

在其中一个实施例中，在所述展示与所述单元格对应的自定义的表格单元格编辑器控件的步骤之前，还包括：

新建表格单元格编辑器控件；

根据所述单元格的信息初始化表格单元格编辑器控件；

计算表格单元格编辑器控件展示坐标。

在其中一个实施例中，在所述展示与所述单元格对应的自定义的表格单元格编辑器控件的步骤之后，还包括：

改变所述单元格的样式和/或信息。

在其中一个实施例中，在所述展示与所述单元格对应的自定义的表格单元格编辑器控件的步骤之后，还包括：

获取用户在表格单元格编辑器控件输入的信息；

将所述信息传递给所述单元格；

在所述单元格上显示所述信息。

一种基于HTML的表格单元格编辑器控件扩展系统，所述系统包括：

获取模块，用于获取用户点击的当前节点；

单元格判断模块，用于判断所述当前节点是否为包含预设标识的单元格；

展示模块，用于如果所述当前节点包含预设标识的单元格，则展示与所述单元格对应的自定义的表格单元格编辑器控件；

终止节点判断模块，用于如果所述当前节点没有包含预设标识的单元格，则判断所述当前节点是否是预设的终止节点；

处理模块，用于如果所述当前节点不是预设的终止节点，则读取所述当前节点的父节点，将所述当前节点的父节点作为当前节点，进入单元格判断模块；如果所述当前节点是预设的终止节点，则不作处理。

在其中一个实施例中，所述系统还包括：

销毁模块，用于判断所述单元格对应的自定义的表格单元格编辑器控件是否己被其它单元格展示，如果是，则销毁所述表格单元格编辑器控件。

在其中一个实施例中，所述系统还包括：

前处理模块，用于新建表格单元格编辑器控件；根据所述单元格的信息初始化表格单元格编辑器控件；计算表格单元格编辑器控件展示坐标。

在其中一个实施例中，所述系统还包括：

改变模块，用于改变所述单元格的样式和/或信息。

在其中一个实施例中，所述系统还包括：

显示模块，用于获取用户在表格单元格编辑器控件输入的信息；将所述信息传递给所述单元格；在所述单元格上显示所述信息。

上述基于HTML的表格单元格编辑器控件扩展方法和系统，通过获取用户点击的当前节点；判断当前节点是否为包含预设标识的单元格，如果是，则展示与单元格对应的自定义的表格单元格编辑器控件；如果不是，则判断当前节点是否是预设的终止节点，如果不是，则读取当前节点的父节点，将当前节点的父节点作为当前节点，进入判断所述当前节点是否为包含预设标识的单元格的步骤；如果当前节点是预设的终止节点，则不作处理。通过包含预设标识的单元格控制什么时候展示自定义的表格单元格编辑器控件，表格单元格编辑器控件的生成和展示只基于与框架无关的标准HTML元素，不依赖于HTML框架中的扩展表格单元格编辑器控件的API，使得对表格单元格编辑器控件的扩展更灵活多样。

附图说明

图1为HTML语言树形结构示意图；

图2为一个实施例中基于HTML的表格单元格编辑器控件扩展方法的流程图；

图3为另一个实施例中基于HTML的表格单元格编辑器控件扩展方法的流程图；

图4为一个实施例中点击前表格单元格示意图；

图5为一个实施例中点击后与单元格对应的自定义的表格单元格编辑器控件示意图；

图6为一个实施例中在单元格上显示信息的流程图；

图7为一个实施例中基于HTML的表格单元格编辑器控件扩展系统的结构框图；

图8为另一个实施例中基于HTML的表格单元格编辑器控件扩展系统的结构框图；

图9为又一个实施例中基于HTML的表格单元格编辑器控件扩展系统的结构框图；

图10为再一个实施例中基于HTML的表格单元格编辑器控件扩展系统的结构框图；

图11为又一个实施例中基于HTML的表格单元格编辑器控件扩展系统的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明基于HTML，是基于HTML结构的递归算法达到脱离API进行自定义的表格单元格编辑器控件的展示，使得表格单元格编辑器控件的扩展更灵活多样。

HTML语言为超文本标记语言，其语法结构可以表示为树形结构，其示意图如图1所示，HTML为根结点，其下有子结点HEAD、BODY，子结点HEAD、BODY下又有各自的子结点，其中每个结点都是HTML的一个元素。这种树形数据结构的特点是：可以从任一节点通过父节点追溯，从而达到树的根节点。如通过结点LI向上追溯到结点UI，再追溯到结点BODY，最后到达根节点HTML。本发明就是利用这种树形结构的特点实现的一种基于HTML的表格单元格编辑器控件扩展方法和系统。

在一个实施例中，如图2所示，提供了一种基于HTML的表格单元格编辑器控件扩展方法，该方法包括：

步骤S110，获取用户点击的当前节点。

本实施例中，当前节点就是HTML的一个元素，HTML元素是指从开始标签到结束标签的所有代码。这些元素显示在浏览器的单元格上，单元格上可能有输入框，换行符，空格等，输入框，换行符，空格都是HTML元素，用户可以点击任意的一个元素。

步骤S120，判断当前节点是否为包含预设标识的单元格，如果是，则进入步骤S130，否则进入步骤S140。

本实施例中，因为需要为不同单元格添加不同的表格单元格编辑器控件，不是所有表格单元格编辑器控件都需要扩展，因此需要将待扩展表格单元格编辑器控件与其他表格单元格编辑器控件通过预设标识进行区分。预设标识可以自定义，如定义为单元格的特定属性或内容。需要说明的是，由于单元格可以通过不同的方法生成，如通过<TD>或<DIV>等生成，预设标识也可以对应为<TD>或<DIV>的特定属性或内容。如采用<TD>的属性id,class,title,style,dir等任何一个信息或innerhtml(开始标签和结束标签之间的字符,不包括标签本身)。如定义包含预设标识的单元格为id属性值为21的<TD>生成的单元格。

步骤S130，展示与单元格对应的自定义的表格单元格编辑器控件。

本实施例中，由于当前节点是包含预设标识的单元格，所以展示的是自定义的与单元格对应的表格单元格编辑器控件。与单元格对应的表格单元格编辑器控件可以根据需求自定义，自定义的与单元格对应的表格单元格编辑器控件通过基于W3C(WorldWideWebConsortium，万维网联盟)标准(HTML，CSS(CascadingStyleSheets，层叠样式表)，JAVASCRIPT(直译式脚本语言))提供的工具和基本元素来生成，不需要依赖于HTML框架中的扩展表格单元格编辑器控件的API。

步骤S140，判断当前节点是否是预设的终止节点，如果不是，则进入步骤S150，否则不作处理。

本实施例中，预设的终止节点可以根据需要自定义，如预设的终止节点是<TABLE>，则如果当前节点是<TABLE>则不作处理，整个追溯过程结束。

步骤S150，读取当前节点的父节点，将当前节点的父节点作为当前节点，进入步骤S120。

本实施例中，父节点是指当前节点的上一级节点，如图1中UI就是LI的父节点。读取父节点后，将此父节点作为当前节点，进入步骤S120，判断此新的当前节点是否为包含预设标识的单元格，然后根据判断结果执行步骤S130或步骤S140。举个例子，假设HTML代码如下：

<TABLE>

<CAPTION></CAPTION>

<TR>

<TDID＝’21’><INPUT><BR></TD><TDID＝’22’>…

</TR>

</TABLE>

设置终止节点为<TABLE>，预设标识的单元格为ID属性值为21的<TD>生成的单元格，当用户点击的当前节点为<INPUT>时，开始向上追溯读取父节点即<INPUT>→<TD>，由于单元格是由<TD>生成，并且<TD>的属性ID的值为21，所以符合展示条件，展示与所述单元格对应的表格单元格编辑器控件。当户点击的当前节点为ID属性值为22的<TD>时，开始向上追溯读取父节点，即<INPUT>→<TD>→<TR>→<TABLE>，由于到达终止节点<TABLE>时也没有符合条件的<TD>，即没有找到包含预设标识的单元格，所以不作处理。

本实施例中，通过获取用户点击的当前节点；判断当前节点是否为包含预设标识的单元格，如果是，则展示与单元格对应的自定义的表格单元格编辑器控件；如果不是，则判断当前节点是否是预设的终止节点，如果不是，则读取当前节点的父节点，将当前节点的父节点作为当前节点，进入判断所述当前节点是否为包含预设标识的单元格的步骤；如果当前节点是预设的终止节点，则不作处理。通过包含预设标识的单元格控制什么时候展示自定义的表格单元格编辑器控件，表格单元格编辑器控件的生成和展示只基于与框架无关的标准HTML元素，不依赖于HTML框架中的扩展表格单元格编辑器控件的API，使得对表格单元格编辑器控件的扩展更灵活多样。

在另一个实施例中，如图3所示，提供了一种基于HTML的表格单元格编辑器控件扩展方法，该方法包括：

步骤S210，获取用户点击的当前节点。

步骤S220，判断当前节点是否为包含预设标识的单元格，如果是，则进入步骤S250，否则进入步骤S230。

步骤S230，判断当前节点是否是预设的终止节点，如果不是，则进入步骤S240，否则不作处理。

步骤S240，读取当前节点的父节点，将当前节点的父节点作为当前节点，进入步骤S220。

步骤S250，判断所述单元格对应的自定义的表格单元格编辑器控件是否己被其它单元格展示，如果是，则进入步骤S260。

本实施例中，需要展示自定义的表格单元格编辑器控件的单元格共用一个自定义的表格单元格编辑器控件，所以需要判断所述单元格对应的自定义的表格单元格编辑器控件是否己被其它单元格展示。

步骤S260，销毁表格单元格编辑器控件。

本实施例中，如果单元格对应的自定义的表格单元格编辑器控件己被其它单元格展示，则销毁表格单元格编辑器控件，销毁方法可以采用在JAVASCRIPT中己有的传统方法。通过销毁己被其它单元格展示的自定义的表格单元格编辑器控件，可以节省资源。

步骤S270，新建表格单元格编辑器控件。

本实施例中，由于需要展示表格单元格编辑器控件，所以先新建表格单元格编辑器控件，新建方法可以采用在JAVASCRIPT中己有的传统方法。

步骤S280，根据单元格的信息初始化表格单元格编辑器控件。

本实施例中，将单元格的信息作为表格单元格编辑器控件的初始化信息，这样可以提高用户体验度，用户可以在单元格的原始信息的基础上进行编辑。

步骤S290，计算表格单元格编辑器控件展示坐标。

本实施例中，表格单元格编辑器控件展示坐标是用来确定表格单元格编辑器控件的展示位置的，可以根据需要进行自定义。如展示在单元格的上方或下方或左方等。计算展示坐标可以根据浏览器的相对或绝对位置进行计算。

步骤S300，展示与单元格对应的自定义的表格单元格编辑器控件。

本实施例中，根据初始化信息和计算的展示坐标，进行展示与单元格对应的自定义的表格单元格编辑器控件。如图4所示为点击前的表格的各个单元格示意图，图5为点击了其中一个单元格后展示的与点击的单元格对应的自定义的表格单元格编辑器控件，可以看到展示的表格单元格编辑器控件的初始信息为单元格的信息，用户可以在此信息基础上进行编辑。

在一个实施例中，在步骤S300之后，还包括：改变所述单元格的样式和/或信息。

本实施例中，将需要展示表格单元格编辑器控件的单元格的样式和/或信息进行改变，是为了和其它的单元格进行区分，提醒客户展示的表格单元格编辑器控件是与哪个单元格对应的，提高了用户体验度。具体的改变形式可以自定义，如加深单元格颜色等。

在一个实施例中，如图6所示，在步骤S300之后，还包括：

步骤S310，获取用户在表格单元格编辑器控件输入的信息。

步骤S320，将信息传递给所述单元格。

步骤S330，在单元格上显示所述信息。

本实施例中，把用户在表格单元格编辑器控件输入的信息传给单元格，在单元格上显示信息，达到了将用户编辑的新的信息展示在单元格上的目的。

在一个实施例中，如图7所示，提供了一种基于HTML的表格单元格编辑器控件扩展系统，包括：

获取模块410，用于获取用户点击的当前节点。

单元格判断模块420，用于判断当前节点是否为包含预设标识的单元格。

展示模块430，用于如果当前节点包含预设标识的单元格，则展示与单元格对应的自定义的表格单元格编辑器控件。

终止节点判断模块440，用于如果当前节点没有包含预设标识的单元格，则判断当前节点是否是预设的终止节点。

处理模块450，用于如果当前节点不是预设的终止节点，则读取当前节点的父节点，将当前节点的父节点作为当前节点，进入单元格判断模块；如果当前节点是预设的终止节点，则不作处理。

在另一个实施例中，如图8所示，在上述实施例的基础上，还包括：

销毁模块460，用于判断单元格对应的自定义的表格单元格编辑器控件是否己被其它单元格展示，如果是，则销毁表格单元格编辑器控件。

在又一个实施例中，如图9所示，在上述实施例的基础上，还包括：

前处理模块470，用于新建表格单元格编辑器控件；根据单元格的信息初始化表格单元格编辑器控件；计算表格单元格编辑器控件展示坐标。

在再一个实施例中，如图10所示，在上述实施例的基础上，还包括：

改变模块480，用于改变单元格的样式和/或信息。

在又一个实施例中，如图11所示，在上述实施例的基础上，还包括：

显示模块，用于获取用户在表格单元格编辑器控件输入的信息；将信息传递给单元格；在单元格上显示所述信息。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种基于HTML的表格单元格编辑器控件扩展方法，所述方法包括：

获取用户点击的当前节点；

判断所述当前节点是否为包含预设标识的单元格，如果是，则展示与所述单元格对应的自定义的表格单元格编辑器控件；

如果不是，则判断所述当前节点是否是预设的终止节点，如果不是，则读取所述当前节点的父节点，将所述当前节点的父节点作为当前节点，进入所述判断所述当前节点是否为包含预设标识的单元格的步骤；

如果所述当前节点是预设的终止节点，则不作处理。

2.根据权利要求1所述的方法，其特征在于，在所述展示与所述单元格对应的自定义的表格单元格编辑器控件的步骤之前，还包括：

判断所述单元格对应的自定义的表格单元格编辑器控件是否己被其它单元格展示，如果是，则销毁所述表格单元格编辑器控件。

3.根据权利要求1所述的方法，其特征在于，在所述展示与所述单元格对应的自定义的表格单元格编辑器控件的步骤之前，还包括：

新建表格单元格编辑器控件；

根据所述单元格的信息初始化表格单元格编辑器控件；

计算表格单元格编辑器控件展示坐标。

4.根据权利要求1所述的方法，其特征在于，在所述展示与所述单元格对应的自定义的表格单元格编辑器控件的步骤之后，还包括：

改变所述单元格的样式和/或信息。

5.根据权利要求1所述的方法，其特征在于，在所述展示与所述单元格对应的自定义的表格单元格编辑器控件的步骤之后，还包括：

获取用户在表格单元格编辑器控件输入的信息；

将所述信息传递给所述单元格；

在所述单元格上显示所述信息。

6.一种基于HTML的表格单元格编辑器控件扩展系统，其特征在于，所述系统包括：

获取模块，用于获取用户点击的当前节点；

单元格判断模块，用于判断所述当前节点是否为包含预设标识的单元格；

展示模块，用于如果所述当前节点包含预设标识的单元格，则展示与所述单元格对应的自定义的表格单元格编辑器控件；

终止节点判断模块，用于如果所述当前节点没有包含预设标识的单元格，则判断所述当前节点是否是预设的终止节点；

处理模块，用于如果所述当前节点不是预设的终止节点，则读取所述当前节点的父节点，将所述当前节点的父节点作为当前节点，进入单元格判断模块；如果所述当前节点是预设的终止节点，则不作处理。

7.根据权利要求6所述的系统，其特征在于，所述系统还包括：

销毁模块，用于判断所述单元格对应的自定义的表格单元格编辑器控件是否己被其它单元格展示，如果是，则销毁所述表格单元格编辑器控件。

8.根据权利要求6所述的系统，其特征在于，所述系统还包括：

前处理模块，用于新建表格单元格编辑器控件；根据所述单元格的信息初始化表格单元格编辑器控件；计算表格单元格编辑器控件展示坐标。

9.根据权利要求6所述的系统，其特征在于，所述系统还包括：

改变模块，用于改变所述单元格的样式和/或信息。

10.根据权利要求6所述的系统，其特征在于，所述系统还包括：

显示模块，用于获取用户在表格单元格编辑器控件输入的信息；将所述信息传递给所述单元格；在所述单元格上显示所述信息。