CN106570114A - 快速定制可编辑的网页表格制作方法及系统 - Google Patents

Abstract

本发明公开了一种快速定制可编辑的网页表格制作方法，属于网页设计技术领域，所述方法包括以下步骤：生成一个网页表格；为所述网页表格的各个单元格添加div元素，并为各div元素分别分配class属性；接收用户输入的功能设置指令，并根据所述功能设置指令对各class属性所对应的div元素进行功能设置；根据功能设置后的各div元素对所述网页表格的数据进行序列化。本发明还公开了一种快速定制可编辑的网页表格制作系统。本发明采用更加通用的div元素来实现网页表格的编辑和录入，不但兼容旧的数据输入方式，还可提供了更加丰富的录入功能，能让用户在使用时更加高效，也能让开发者在开发时更加方便和快捷。

Description

快速定制可编辑的网页表格制作方法及系统

技术领域

本发明涉及网页设计技术领域，尤其涉及一种快速定制可编辑的网页表格制作方法及系统。

背景技术

现有技术采用table(即超文本标记语言中创建表格的元素)和input(即一种html语言标签，包含两个文本输入框和一个提交按钮，本文中特质作为输入框使用)、text-area(即一种html语言标签，是定义多行的文本输入控件)元素来实现表格的可编辑操作。其缺点：1，使用input作为输入框时，无法让输入框呈现换行输入的模式，在数据量较大的时候无法满足需求。2，使用input或者text-area在粘贴的时候不能保留原有的网页格式。3，修改input或者text-area的样式不是非常灵活，对于修改页面效果和兼容不同的浏览器时都比较繁琐甚至达不到兼容的要求，突出表现在使用text-area时在各浏览器中的显示效果很难达到统一。4，在显示现有表格数据时，input和text-area达不到自适应的要求。

上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。

发明内容

本发明的主要目的在于提供一种快速定制可编辑的网页表格制作方法及系统，旨在解决现有技术中table和input、text-area元素来实现表格的可编辑操作所存在的技术问题。

为实现上述目的，本发明提供一种快速定制可编辑的网页表格制作方法，所述方法包括以下步骤：

生成一个网页表格；

为所述网页表格的各个单元格添加div元素，并为各div元素分别分配class属性；

接收用户输入的功能设置指令，并根据所述功能设置指令对各class属性所对应的div元素进行功能设置；

根据功能设置后的各div元素对所述网页表格的数据进行序列化。

优选地，所述功能设置包括：

设置自动适应单行和多行展示的功能；

和/或，

设置控制粘贴到单元格中的内容可带html样式的功能；

和/或，

设置让单元格中的内容采用固定高度通过滚动条的形式来展示内容的功能。

优选地，所述功能设置还包括：

设置在div元素所对应的区域被触发时，将div元素从不可编辑状态转化为可编辑状态的功能；

和/或，

设置在div元素所对应的单元格被触发时，将div元素从不可编辑状态转化为可编辑状态的功能。

优选地，所述为各div元素分别分配class属性，具体包括：

为处于同一列单元格分别对应的div元素分配一个唯一的class属性。

优选地，所述根据功能设置后的各div元素对所述网页表格的数据进行序列化，具体包括：

根据功能设置后的各div元素将网页表格的数据序列化为json格式。

此外，为实现上述目的，本发明还提供一种快速定制可编辑的网页表格制作系统，所述系统包括：

表格生成模块，用于生成一个网页表格；

属性分配模块，用于为所述网页表格的各个单元格添加div元素，并为各div元素分别分配class属性；

功能设置模块，用于接收用户输入的功能设置指令，并根据所述功能设置指令对各class属性所对应的div元素进行功能设置；

数据序列化模块，用于根据功能设置后的各div元素对所述网页表格的数据进行序列化。

优选地，所述功能设置包括：

设置自动适应单行和多行展示的功能；

和/或，

设置控制粘贴到单元格中的内容可带html样式的功能；

和/或，

设置让单元格中的内容采用固定高度通过滚动条的形式来展示内容的功能。

优选地，所述功能设置还包括：

设置在div元素所对应的区域被触发时，将div元素从不可编辑状态转化为可编辑状态的功能；

和/或，

设置在div元素所对应的单元格被触发时，将div元素从不可编辑状态转化为可编辑状态的功能。

优选地，所述属性分配模块，还用于为处于同一列单元格分别对应的div元素分配一个唯一的class属性。

优选地，所述数据序列化模块，还用于根据功能设置后的各div元素将网页表格的数据序列化为json格式。

本发明采用更加通用的div元素来实现网页表格的编辑和录入，不但兼容旧的数据输入方式，还可提供了更加丰富的录入功能，能让用户在使用时更加高效，也能让开发者在开发时更加方便和快捷。

附图说明

图1为本发明快速定制可编辑的网页表格制作方法第一实施例的流程示意图；

图2为本发明快速定制可编辑的网页表格制作方法第二实施例的流程示意图；

图3为本发明快速定制可编辑的网页表格制作方法第三实施例的流程示意图；

图4为通过图1所示的方法所制作出的网页表格的示意图；

图5为在图4的网页表格中填入数据的示意图；

图6为图4的网页表格中的单元格处于可编辑状态的示意图；

图7为图4的网页表格中的单元格必须录入数据的提醒示意图；

图8为本发明快速定制可编辑的网页表格制作系统第一实施例的功能模块示意图；

图9为本发明快速定制可编辑的网页表格制作系统第二实施例的功能模块示意图；

图10为本发明快速定制可编辑的网页表格制作系统第三实施例的功能模块示意图；

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

参照图1，本发明快速定制可编辑的网页表格制作方法第一实施例提供一种快速定制可编辑的网页表格制作方法，所述方法包括：

S10：生成一个网页表格；

需要说明的是，本实施例的方法的执行主体为能够制作网页表格的设备，例如：笔记本电脑、PC机、平板电脑或服务器等，当然，还可为其他设备，本实施例对此不加以限制。

可理解的是，所述网页表格即为根据需要设置了预设行数和预设列数的表格，所述网页表格为table表格，当然，还可为其他类型的表格，本实施例对此不加以限制；

S20：为所述网页表格的各个单元格添加div元素，并为各div元素分别分配class属性；

需要说明的是，div是层叠样式表中的定位技术，全称DIVision，即为划分，有时可以称其为图层；

其中，class是指html元素中的一种属性，用来表示一个类型的html元素；

其中，html是超级文本标记语言，其属于标准通用标记语言下的一个应用，也是一种规范，一种标准，通过标记符号来标记要显示的网页中的各个部分。

可理解的是，所述单元格是网页表格中行与列的交叉部分，其是组成网页表格的最小单位。

S30：接收用户输入的功能设置指令，并根据所述功能设置指令对各class属性所对应的div元素进行功能设置；

需要说明的是，所述功能设置指令可通过键盘输入，也可通过触屏输入，当然，还可通过其他设备，例如：手写板等部件输入，本实施例对此不加以限制。

在具体实现中，所述功能设置包括：

设置自动适应单行和多行展示的功能，也就是说，该功能使div元素对应的单元格支持自动适应单行和多行的展示效果；

可理解的是，所述网页表格通常仅支持单行的展示效果，而通过该功能即可支持自动适应单行和多行的展示效果，对于用户而言，能够实现换行输入。

和/或，

设置控制粘贴到单元格中的内容可带html样式的功能，也就是说，该功能使div元素对应的单元格支持粘贴的内容可带html样式；

和/或，

设置让单元格中的内容采用固定高度通过滚动条的形式来展示内容的功能，也就是说，该功能使div元素对应的单元格采用固定高度通过滚动条的形式来展示内容。

当然，所述功能设置还包括：

设置在div元素所对应的区域被触发时，将div元素从不可编辑状态转化为可编辑状态的功能，也就是说，该功能使div元素对应的单元格内部的区域被触发时，让div元素进入可编辑状态；

和/或，

设置在div元素所对应的单元格被触发时，将div元素从不可编辑状态转化为可编辑状态的功能，也就是说，该功能使div元素对应的单元格被触发时，让div元素进入可编辑状态，即对div元素的父元素td也添加单击事件。。

其中，td是一种html语言标签，代表html表格中的一个单元格。

在具体实现中，所述触发可通过鼠标的点击触发，也可通过光标选中后通过键盘输入enter键触发，又或是，通过触屏点击来实现触发，当然，还可通过其他方式来实现触发，本实施例对此不加以限制。

S40：根据功能设置后的各div元素对所述网页表格的数据进行序列化。

需要说明的是，所述序列化为将对象的状态信息转换为可以存储或传输的形式的过程。

本实施例采用更加通用的div元素来实现网页表格的编辑和录入，不但兼容旧的数据输入方式，还可提供了更加丰富的录入功能，能让用户在使用时更加高效，也能让开发者在开发时更加方便和快捷。

由于本实施例的网页表格采用div元素，故而，其与现有技术相比具有以下7个优点：

1，可以解决输入框多行和单行自动切换的效果；

2，能够定制是否在粘贴的时候保留原有的网页格式；

3，div在网页中的对于不同浏览器的兼容性是最好的能够达到较高的兼容性要求；

4，div的样式修改也最为灵活能够很好的根据需求定制各种不同的表格样式；

5，在显示表格的内容时可以根据内容高度自适应全部显示，或者使用滚动条模式；

6，再结合class属性就能实现table表格数据的序列化；

7，在实际的运用中，只需引入本实施例的方法就能快速的按需定制可编辑、可序列化的table表格。

参照图2，图2为本发明快速定制可编辑的网页表格制作方法第二实施例的流程示意图，基于上述图1所示的实施例，提出本发明快速定制可编辑的网页表格制作方法的第二实施例。

在本实施例中，步骤S20中，为各div元素分别分配class属性，具体包括：

为处于同一列单元格分别对应的div元素分配一个唯一的class属性。

需要说明的是，对于表格而言，通常是由行和列组成，而一般的编辑习惯在于，同一列的数据项目通常是相同的，假设页面表格为工作计划表，在该工作计划表中，可能会涉及工作计划事项、目标和起止时间等项目，而同一列的数据项目通常是相同的，比如：某一单元格所属的数据项目为工作计划项目，此时，与该单元格同一列的其他单元格的数据项目也是工作计划项目。

在此情况下，由于同一列单元格的数据项目通常相同的情况下，同一列单元格所对应的格式也会相同，故而，同一列单元格所对应的div元素功能也需要相同设置，因此，本实施例中，为处于同一列单元格分别对应的div元素分配一个唯一的class属性，能够满足一般用户的编辑习惯，也无需对所有单元格对应的div元素分别进行功能设置，提高了设置效率。

当然，也可能存在一些特殊情况，需要对所有单元格对应的div元素分别进行功能设置，此时需要为各单元格对应的div元素分别分配class属性，从而保证网页表格的编辑灵活性。

参照图3，图3为本发明快速定制可编辑的网页表格制作方法第三实施例的流程示意图，基于上述图1所示的实施例，提出本发明快速定制可编辑的网页表格制作方法的第三实施例。

在本实施例中，步骤S40具体包括：

根据功能设置后的各div元素将网页表格的数据序列化为json格式。

可理解的是，对数据进行序列化时，可采用多种格式，但考虑到格式的量级问题，本实施例中采用json格式，由于json是一种轻量级的数据交换格式，从而降低了资源负担，避免资源被占用过多。

图4为通过图1所示的方法所制作出的网页表格的示意图；图5为在图4的网页表格中填入数据的示意图；参照图4和图5，在填入数据之前，所述序号为1对应行的宽度较小，单元格中的数据呈单行显示，在填入数据后，由于序列为1对应行的宽度不够，此时，即可自动适应序列为1对应行的宽度，从而使单元格中的数据呈多行显示。

图6为图4的网页表格中的单元格处于可编辑状态的示意图；参照图6，在所述单元格处于可编辑状态时，能够对多行数据进行编辑。

图7为图4的网页表格中的单元格必须录入数据的提醒示意图；参照图7，对于必须录入数据的单元格会进行提示。

参照图8，本发明快速定制可编辑的网页表格制作系统第一实施例提供一种快速定制可编辑的网页表格制作系统，所述系统包括：

表格生成模块10，用于生成一个网页表格；

需要说明的是，本实施例的方法的执行主体为能够制作网页表格的设备，例如：笔记本电脑、PC机、平板电脑或服务器等，当然，还可为其他设备，本实施例对此不加以限制。

可理解的是，所述网页表格即为根据需要设置了预设行数和预设列数的表格，所述网页表格为table表格，当然，还可为其他类型的表格，本实施例对此不加以限制。

属性分配模块20，用于为所述网页表格的各个单元格添加div元素，并为各div元素分别分配class属性；

需要说明的是，div是层叠样式表中的定位技术，全称DIVision，即为划分，有时可以称其为图层；

其中，class是指html元素中的一种属性，用来表示一个类型的html元素。

其中，html是超级文本标记语言，其属于标准通用标记语言下的一个应用，也是一种规范，一种标准，通过标记符号来标记要显示的网页中的各个部分。

可理解的是，所述单元格是网页表格中行与列的交叉部分，其是组成网页表格的最小单位。

功能设置模块30，用于接收用户输入的功能设置指令，并根据所述功能设置指令对各class属性所对应的div元素进行功能设置；

需要说明的是，所述功能设置指令可通过键盘输入，也可通过触屏输入，当然，还可通过其他设备，例如：手写板等部件输入，本实施例对此不加以限制。

在具体实现中，

所述功能设置包括：

设置自动适应单行和多行展示的功能，也就是说，该功能使div元素对应的单元格支持自动适应单行和多行的展示效果；

可理解的是，所述网页表格通常仅支持单行的展示效果，而通过该功能即可支持自动适应单行和多行的展示效果，对于用户而言，能够实现换行输入。

和/或，

设置控制粘贴到单元格中的内容可带html样式的功能，也就是说，该功能使div元素对应的单元格支持粘贴的内容可带html样式；

和/或，

设置让单元格中的内容采用固定高度通过滚动条的形式来展示内容的功能，也就是说，该功能使div元素对应的单元格采用固定高度通过滚动条的形式来展示内容。

当然，

所述功能设置还包括：

设置在div元素所对应的区域被触发时，将div元素从不可编辑状态转化为可编辑状态的功能，也就是说，该功能使div元素对应的单元格内部的区域被触发时，让div元素进入可编辑状态；

和/或，

设置在div元素所对应的单元格被触发时，将div元素从不可编辑状态转化为可编辑状态的功能，也就是说，该功能使div元素对应的单元格被触发时，让div元素进入可编辑状态，即对div元素的父元素td也添加单击事件。

其中，td是一种html语言标签，代表html表格中的一个单元格。

可理解的是，对class属性进行设置即对class属性进行参数设置，例如：在class属性中具有用于自动适应单行和多行展示的属性，此时，可在进行参数设置时，将该属性设置为开启对应的参数，又或是设置为关闭对应的参数；假设class属性为数组，此时，对class属性中的元素进行写入参数。

在具体实现中，所述触发可通过鼠标的点击触发，也可通过光标选中后通过键盘输入enter键触发，又或是，通过触屏点击来实现触发，当然，还可通过其他方式来实现触发，本实施例对此不加以限制。

数据序列化模块40，用于根据功能设置后的各div元素对所述网页表格的数据进行序列化。

需要说明的是，所述序列化为将对象的状态信息转换为可以存储或传输的形式的过程。

本实施例采用更加通用的div元素来实现网页表格的编辑和录入，不但兼容旧的数据输入方式，还可提供了更加丰富的录入功能，能让用户在使用时更加高效，也能让开发者在开发时更加方便和快捷。

由于本实施例的网页表格采用div元素，故而，其与现有技术相比具有以下7个优点：

1，可以解决输入框多行和单行自动切换的效果；

2，能够定制是否在粘贴的时候保留原有的网页格式；

3，div在网页中的对于不同浏览器的兼容性是最好的能够达到较高的兼容性要求；

4，div的样式修改也最为灵活能够很好的根据需求定制各种不同的表格样式；

5，在显示表格的内容时可以根据内容高度自适应全部显示，或者使用滚动条模式；

6，再结合class属性就能实现table表格数据的序列化；

7，在实际的运用中，只需引入本实施例的方法就能快速的按需定制可编辑、可序列化的table表格。

参照图9，图9为本发明快速定制可编辑的网页表格制作系统第二实施例的功能模块示意图，基于上述图8所示的实施例，提出本发明快速定制可编辑的网页表格制作系统的第二实施例。

在本实施例中，所述属性分配模块20，还用于为处于同一列单元格分别对应的div元素分配一个唯一的class属性。

需要说明的是，对于表格而言，通常是由行和列组成，而一般的编辑习惯在于，同一列的数据项目通常是相同的，假设页面表格为工作计划表，在该工作计划表中，可能会涉及工作计划事项、目标和起止时间等项目，而同一列的数据项目通常是相同的，比如：某一单元格所属的数据项目为工作计划项目，此时，与该单元格同一列的其他单元格的数据项目也是工作计划项目。

在此情况下，由于同一列单元格的数据项目通常相同的情况下，同一列单元格所对应的格式也会相同，故而，同一列单元格所对应的div元素功能也需要相同设置，因此，本实施例中，为处于同一列单元格分别对应的div元素分配一个唯一的class属性，能够满足一般用户的编辑习惯，也无需对所有单元格对应的div元素分别进行功能设置，提高了设置效率。

当然，也可能存在一些特殊情况，需要对所有单元格对应的div元素分别进行功能设置，此时需要为各单元格对应的div元素分别分配class属性，从而保证网页表格的编辑灵活性。

参照图10，图10为本发明快速定制可编辑的网页表格制作系统第三实施例的功能模块示意图，基于上述图9所示的实施例，提出本发明快速定制可编辑的网页表格制作系统的第三实施例。

本实施例中，所述数据序列化模块40，还用于根据功能设置后的各div元素将网页表格的数据序列化为json格式。

可理解的是，对数据进行序列化时，可采用多种格式，但考虑到格式的量级问题，本实施例中采用json格式，由于json是一种轻量级的数据交换格式，从而降低了资源负担，避免资源被占用过多。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种快速定制可编辑的网页表格制作方法，其特征在于，所述方法包括以下步骤：

生成一个网页表格；

为所述网页表格的各个单元格添加div元素，并为各div元素分别分配class属性；

接收用户输入的功能设置指令，并根据所述功能设置指令对各class属性所对应的div元素进行功能设置；

根据功能设置后的各div元素对所述网页表格的数据进行序列化。

2.如权利要求1所述的方法，其特征在于，所述功能设置包括：

设置自动适应单行和多行展示的功能；

和/或，

设置控制粘贴到单元格中的内容可带html样式的功能；

和/或，

设置让单元格中的内容采用固定高度通过滚动条的形式来展示内容的功能。

3.如权利要求2所述的方法，其特征在于，所述功能设置还包括：

设置在div元素所对应的区域被触发时，将div元素从不可编辑状态转化为可编辑状态的功能；

和/或，

设置在div元素所对应的单元格被触发时，将div元素从不可编辑状态转化为可编辑状态的功能。

4.如权利要求1～3中任一项所述的方法，其特征在于，所述为各div元素分别分配class属性，具体包括：

为处于同一列单元格分别对应的div元素分配一个唯一的class属性。

5.如权利要求1～3中任一项所述的方法，其特征在于，所述根据功能设置后的各div元素对所述网页表格的数据进行序列化，具体包括：

根据功能设置后的各div元素将网页表格的数据序列化为json格式。

6.一种快速定制可编辑的网页表格制作系统，其特征在于，所述系统包括：

表格生成模块，用于生成一个网页表格；

属性分配模块，用于为所述网页表格的各个单元格添加div元素，并为各div元素分别分配class属性；

功能设置模块，用于接收用户输入的功能设置指令，并根据所述功能设置指令对各class属性所对应的div元素进行功能设置；

数据序列化模块，用于根据功能设置后的各div元素对所述网页表格的数据进行序列化。

7.如权利要求6所述的系统，其特征在于，所述功能设置包括：

设置自动适应单行和多行展示的功能；

和/或，

设置控制粘贴到单元格中的内容可带html样式的功能；

和/或，

设置让单元格中的内容采用固定高度通过滚动条的形式来展示内容的功能。

8.如权利要求7所述的系统，其特征在于，所述功能设置还包括：

设置在div元素所对应的区域被触发时，将div元素从不可编辑状态转化为可编辑状态的功能；

和/或，

设置在div元素所对应的单元格被触发时，将div元素从不可编辑状态转化为可编辑状态的功能。

9.如权利要求6～8中任一项所述的系统，其特征在于，所述属性分配模块，还用于为处于同一列单元格分别对应的div元素分配一个唯一的class属性。

10.如权利要求6～8中任一项所述的系统，其特征在于，所述数据序列化模块，还用于根据功能设置后的各div元素将网页表格的数据序列化为json格式。