CN110362305B - 一种表单组件状态切换方法及装置 - Google Patents

Abstract

本申请提供了一种表单组件状态切换方法及装置，涉及信息技术领域。本申请通过加载表单状态控制组件，通过表单状态控制组件获取表单页面所使用的第一表单组件，接收对第一表单组件从第一状态切换至第二状态的状态切换指令，通过表单状态控制组件，在表单页面的页面代码中，使用第二状态所对应的代码集合，替换第一状态所对应的代码集合。在页面代码运行过程中，当需要切换第一表单组件的状态时，通过表单状态控制组件进行不同状态的代码集合替换，实现编写一份表单页面的页面代码，可复用于多种状态，通过第一表单组件的状态切换，以达到任意切换表单页面状态的功能，使得编写表单页面的成本大大降低。

Description

一种表单组件状态切换方法及装置

技术领域

本申请涉及信息技术领域，特别是涉及一种表单组件状态切换方法及装置。

背景技术

表单页面生成技术是Web应用开发中的常见技术，通常在编写表单页面时，往往需要编写不同状态的多个表单页面，如订单的新建、编辑、详情等，而不同状态的多个表单页面中极大多数表单元素是相同的，仅仅是表单元素的状态不同。

目前，针对JSP（Java Server Pages，Java服务器页面）表单组件库，可基于浏览器基本组件的只读和编辑状态的切换从而控制表单页面状态的切换，实现同一个表单页面资源在只读和编辑两种状态下，生成不同的HTML（HyperText Markup Language，超级文本标记语言）代码，当浏览器需要切换表单页面的状态时，访问不同的HTML代码。

但是，现有技术中生成后的表单页面的状态不可随意切换，需要生成两种不同状态的页面代码，且只能控制只读和编辑两种状态。

发明内容

鉴于上述问题，本申请实施例提供一种表单组件状态切换方法，以通过加载表单状态控制组件，通过表单状态控制组件获取表单页面所使用的第一表单组件，接收对第一表单组件从第一状态切换至第二状态的状态切换指令，通过表单状态控制组件，在表单页面的页面代码中，使用第二状态所对应的代码集合，替换第一状态所对应的代码集合，解决现有技术中生成后的表单页面的状态不可随意切换，需要生成两种不同状态的页面代码，且只能控制只读和编辑两种状态的问题。

相应的，本申请实施例还提供了一种表单组件状态切换装置，用以保证上述方法的实现及应用。

为了解决上述问题，本申请实施例公开了一种表单组件状态切换方法，包括：

加载表单状态控制组件；

通过所述表单状态控制组件获取表单页面所使用的第一表单组件；所述第一表单组件包括多种状态，所述多种状态分别对应一代码集合；

接收对所述第一表单组件从第一状态切换至第二状态的状态切换指令；

通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合。相应的，本申请实施例还公开了一种表单组件状态切换装置，包括：

加载模块，用于加载表单状态控制组件；

第一表单组件获取模块，用于通过所述表单状态控制组件获取表单页面所使用的第一表单组件；所述第一表单组件包括多种状态，所述多种状态分别对应一代码集合；

指令接收模块，用于接收对所述第一表单组件从第一状态切换至第二状态的状态切换指令；

替换模块，用于通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合。

相应的，本申请实施例还公开了一种装置，其特征在于，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述装置执行一种表单组件状态切换方法。

相应的，本申请实施例还公开了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得装置执行一种表单组件状态切换方法。

本申请实施例包括以下优点：

本申请实施例通过加载表单状态控制组件，通过表单状态控制组件获取表单页面所使用的第一表单组件，第一表单组件包括多种状态，多种状态分别对应一代码集合，接收对第一表单组件从第一状态切换至第二状态的状态切换指令，通过表单状态控制组件，在表单页面的页面代码中，使用第二状态所对应的代码集合，替换第一状态所对应的代码集合。在页面代码运行过程中，当需要切换第一表单组件的状态时，通过表单状态控制组件进行不同状态的代码集合替换，实现编写一份表单页面的页面代码，可复用于多种状态，通过第一表单组件的状态切换，以达到任意切换表单页面状态的功能，使得编写表单页面的成本大大降低。

附图说明

图1是本申请实施例的一种表单组件状态切换方法的处理示意图；

图2是本申请实施例的另一种表单组件状态切换方法的处理示意图；

图3是本申请实施例的一种表单页面的切换示意图；

图4是本申请实施例的一种表单组件状态切换方法的流程图；

图5是本申请实施例的一种表单组件状态切换方法的具体流程图；

图6是本申请实施例的另一种表单组件状态切换方法的流程图；

图7是本申请实施例的一种表单组件状态切换装置的结构图；

图8是本申请实施例提供的一种客户端的结构示意图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

本申请的技术方案主要应用于互联网场景中，以实现对客户端的表单页面中的第一表单组件的状态进行切换。本申请实施例中的客户端可以是浏览器，例如电脑中的浏览器或手机中的浏览器，也可以是其他包括表单页面的应用，如购物平台A、购物平台B等应用，本申请实施例不对其加以限制。

参照图1，示出了本申请实施例的一种表单组件状态切换方法的处理示意图。

本申请实施例中，用户在通过客户端访问表单页面时，客户端会执行步骤S1：向应用服务器发送表单页面请求，应用服务器在接收到客户端发送的表单页面请求后，执行步骤S2：向客户端返回对应的表单页面的页面代码，客户端在接收到应用服务器返回的表单页面的页面代码后，加载该页面代码，在加载页面代码的同时，执行步骤S3，加载表单状态控制组件，接着执行步骤S4，通过表单状态控制组件从适配层中获取表单页面所使用的第一表单组件，第一表单组件包括多种状态，多种状态分别对应一段代码集合。在客户端的表单页面运行过程中，当接收到对第一表单组件从第一状态切换至第二状态的状态切换指令时，则执行步骤S5，通过表单状态控制组件，从适配层中获取第一表单组件的第二状态所对应的代码集合，然后，执行步骤S6，使用第一表单组件的第二状态所对应的代码集合，替换第一表单组件的第一状态所对应的代码集合。其中，适配层可布设在应用服务器中。

其中，表单页面可以有多个代码集合组成，而在本申请实施例中，在切换表单页面的第一表单组件的状态时，除了第一表单组件的代码集合更新，其他代码集合可以保持不变。

其中，表单状态控制组件是本申请实施例的状态切换核心，表单状态控制组件加载后可以以线程的形式运行，然后去获取上述第一表单组件、存储表单值、进行状态切换等逻辑。

参照图2，出了本申请实施例的另一种表单组件状态切换方法的处理示意图。

包括第一表单组件的适配层也可布设在组件服务器中，客户端在接收到应用服务器返回的表单页面的页面代码后，加载该页面代码，通过表单状态控制组件从组件服务器的适配层中获取表单页面所使用的第一表单组件，在客户端的表单页面运行过程中，当接收到对第一表单组件从第一状态切换至第二状态的状态切换指令时，则通过表单状态控制组件，从组件服务器的适配层中获取第一表单组件的第二状态所对应的代码集合，然后，执行后续的步骤。

如图1和图2的描述，本申请实施例中，对于提供第一表单组件的适配层，其可布设在应用服务器中，与表单页面的提供方布设在同一个服务器中，适配层也可布设在组件服务器中，与表单页面的提供方布分别布设在两个不同的服务器中，本申请实施例不对其加以限制。

参照图3，示出了本申请实施例的一种表单页面的切换示意图。

具体的，针对各个原始表单组件库，对原始表单组件库中的原始第二表单组件进行规范化处理，获得适配层，该适配层包括与原始第二表单组件对应的规范化的第一表单组件，且第一表单组件包括多种状态；其中，原始表单组件库包括antd开源表单组件库、开源amazeui表单组件库、开源rc-component表单组件库和开源RSUITE表单组件库等。

在获得适配层后，客户端从应用服务器中获取表单页面的页面代码，加载该页面代码，在加载页面代码的同时，加载表单状态控制组件，通过表单状态控制组件从适配层中获取表单页面所使用的第一表单组件，在表单页面运行过程中，当接收到对第一表单组件从第一状态切换至第二状态的状态切换指令时，则通过表单状态控制组件，从适配层中获取第一表单组件的第二状态所对应的代码集合，使用第一表单组件的第二状态所对应的代码集合，替换第一表单组件的第一状态所对应的代码集合，通过切换第一表单组件的状态，以切换不同状态的表单页面。

在页面代码运行过程中，通过表单状态控制组件进行不同状态的代码集合替换，以切换第一表单组件的状态，达到任意切换表单页面状态的功能。

实施例一

参照图4，示出了本申请实施例的一种表单组件状态切换方法的流程图，具体可以包括如下步骤：

步骤401，加载表单状态控制组件。

在本申请实施例中，从应用服务器获取到表单页面的页面代码后，加载该页面代码，在加载页面代码的同时，加载表单状态控制组件。

该页面代码可以为HTML代码，在页面代码中设置有一个或多个表单标签，此外，还设置有表单状态控制组件，将页面代码中的表单标签与对应的表单状态控制组件绑定，通过表单状态控制组件可控制页面代码中的第一表单组件的状态。

步骤402，通过所述表单状态控制组件获取表单页面所使用的第一表单组件；所述第一表单组件包括多种状态，所述多种状态分别对应一代码集合。

在本申请实施例中，通过表单状态控制组件获取表单页面所使用的第一表单组件，该第一表单组件包括多种状态，如编辑状态、预览状态等，每种状态对应一段代码集合。

在本申请的一种实施例中，将表单页面所使用的第一表单组件的代码集合写入表单页面的页面代码中，在从应用服务器中获取到的表单页面的页面代码时，同时会获取到第一表单组件的代码集合，通过表单状态控制组件加载该第一表单组件的代码集合。

其中，第一表单组件的状态包括：编辑状态、预览状态、禁用状态、加载状态、隐藏状态其中至少一个。

第一表单组件包括<input>输入框、<select>下拉选择框等，<input>输入框用于收集用户输入的内容，其中的type属性指定输入标签的类型，如文本框txet、密码框passwoard、单选框radio、复选框checkbox，隐藏字段hodden和提交按钮submit等。当<input>表单组件的类型为文本框txet时，输入的文本信息直接显示在框中，当<input>表单组件的类型为密码框passwoard时，输入的文本以原点或者星号的形式显示，当<input>表单组件的类型为隐藏字段hodden时，在页面上不显示，但是在提交时也随其他内容一起提交；当<input>表单组件的类型为提交按钮submit时，用于提交表单页面中的内容。

步骤403，接收对所述第一表单组件从第一状态切换至第二状态的状态切换指令。

在本发明实施例中，在表单页面运行过程中，会接收到对第一表单组件从第一状态切换至第二状态的状态切换指令。

其中，第一表单组件的状态切换指令包括：当在所述表单页面中接收到对指定控件的触发操作，所述表单页面的业务逻辑自动执行到达状态切换逻辑节点的其中至少一种。

例如，当在编辑完成一份订单后，点击提交订单，则表单页面中接收到对指定控件的触发操作，如收货地址、联系电话等的触发操作，订单页面中的第一表单组件从编辑状态切换为预览状态；当需要打开一个表单页面时，第一表单组件处于加载状态，当加载完成时，第一表单组件自动切换为编辑状态。

步骤404，通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合。

在本申请实施例中，在接收到对第一表单组件从第一状态切换至第二状态的状态切换指令后，通过表单状态控制组件，获取第一表单组件的第二状态所对应的代码集合，在表单页面的页面代码中，使用第一表单组件的第二状态所对应的代码集合，替换第一表单组件的第一状态所对应的代码集合，使得第一表单组件的状态切换成功。

其中，表单页面可以由多个代码集合构成，即表单页面中可以包含多个第一表单组件，当其中一个第一表单组件的代码集合被替换了以后，表单页面的状态即被切换。

本申请实施例通过加载表单状态控制组件，通过表单状态控制组件获取表单页面所使用的第一表单组件，第一表单组件包括多种状态，多种状态分别对应一代码集合，接收对第一表单组件从第一状态切换至第二状态的状态切换指令，通过表单状态控制组件，在表单页面的页面代码中，使用第二状态所对应的代码集合，替换第一状态所对应的代码集合。在页面代码运行过程中，当需要切换第一表单组件的状态时，通过表单状态控制组件进行不同状态的代码集合替换，实现编写一份表单页面的页面代码，可复用于多种状态，通过第一表单组件的状态切换，以达到任意切换表单页面状态的功能，使得编写表单页面的成本大大降低。

实施例二

参照图5，示出了本申请实施例的一种表单组件状态切换方法的具体流程图，具体可以包括如下步骤：

步骤501，获取原始表单组件库中的原始第二表单组件。

在本申请实施例中，从原始表单组件库中获取原始第二表单组件，可以是获取所有原始表单组件库中的所有原始第二表单组件，也可以是根据表单页面的需求，从对应的原始表单组件库中获取需要的原始第二表单组件。

该原始表单组件库包括antd开源表单组件库、开源amazeui表单组件库、开源rc-component表单组件库和开源RSUITE表单组件库等，各个原始表单组件库中的标准不同，且每个原始表单组件库中的原始第二表单组件的数量较少，若只获取其中一个原始表单组件库中的原始第二表单元素，难以满足表单页面的需求。

可选的，步骤501可以包括子步骤5011和子步骤5012。

子步骤5011，根据所述页面代码，获取预置的表单组件名以及对应的原始表单组件库名。

子步骤5012，从与所述原始表单组件库名对应的原始表单组件库中获取与所述表单组件名对应的第二表单组件。

根据表单页面中的页面代码，获取预置的表单组件名以及对应的原始表单组件库名，根据原始表单组件库名查找对应的原始表单组件库，然后根据表单组件名，从原始表单组件库中获取对应的第二表单组件。

例如，获取到的原始表单组件库名为antd，获取到的表单组件名为input，可从antd开源表单组件库中获取对应的第二表单组件input。

步骤502，将所述第二表单组件进行规范化处理，获得适配层；所述适配层包括与所述第二表单组件对应的规范化的第一表单组件。

在本申请实施例中，对第二表单组件进行规范化处理，获得适配层，可以只根据表单页面中的页面代码，对需要的第二表单组件进行规范化处理，也可以是对所有的原始表单组件库中的所有原始第二表单组件进行规范化处理。

antd开源表单组件库、开源amazeui表单组件库、开源rc-component表单组件库和开源RSUITE表单组件库中的原始第二表单组件通常只具备编辑状态，对原始第二表单组件进行规范化处理，获得适配层，该适配层包括与第二表单组件对应的规范化的第一表单组件，且适配层中的第一表单组件包括多种状态，如编辑状态、预览状态、禁用状态、加载状态、隐藏状态等。

通过编写适配层，可根据各个表单组件库中的众多表单组件编写不同的表单页面。

可选的，步骤502可以包括子步骤5021。

子步骤5021，对所述第二表单组件添加使用同一处理函数的封装层，在所述封装层中设置多种状态的代码集合，获取与所述第二表单组件对应的第一表单组件以构建所述适配层。

此步骤中，对原始第二表单组件添加使用同一处理函数的封装层，在封装层中设置多种状态的代码集合，如辑状态、预览状态、禁用状态、加载状态、隐藏状态等的代码集合，获取原始第二表单组件封装处理后的第一表单组件，以构建适配层。

例如，针对antd开源表单组件库，根据antd开源表单组件库中的原始第二表单组件编写对应的适配层。

首先，从antd开源表单组件库中获取原始第二表单组件<input>和<select>，对<input>和<select>进行规范化处理，比如对原始的各个第二表单组件按照规定格式进行再封装，在再封装过程中为第二表单组件编写各种状态。

那么对所有表单组件库中的所有原始第二表单组件进行规范化处理后可以得到多种状态的代码集合，以构建适配层，由于在适配层中拥有所有的第一表单组件的各种状态，在进行状态切换时，无需记录第一表单组件的切换历史，始终操作同一个表单组件，便于后期的扩展与使用。

步骤503，加载表单状态控制组件。

该步骤可以参照上述步骤401，此处不再赘述。

步骤504，在从应用服务器获取到表单页面的页面代码后，通过所述表单状态控制组件，扫描所述页面代码中预设的表单标签，确定表单组件名。

在本申请实施例中，从应用服务器中获取到表单页面的页面代码后，通过表单状态控制组件扫描页面代码中预设的表单标签，主要是扫描视图层代码中的表单标签，在扫描到表单标签后，确定表单组件名，其中，页面代码包括视图层代码，视图层代码指的是页面代码中的表单组件部分。

其中，视图层代码由表单标签<Form>确定。可通过表单状态控制组件core扫描表单标签<Form>，根据表单标签<Form>，确定视图层代码中的表单组件名，如input1、select1、input2和select2。

步骤505，根据所述表单组件名，从所述适配层中获取对应的第一表单组件。

在本申请实施例中，根据确定的表单组件名，接入对应的原始表单组件库的适配层，在对应的适配层中获取第一表单组件，不同的原始表单库对应一个适配层的方式，方便管理，并且使各个原始表单库的适配层逻辑解耦。

例如，表单组件名包括input1、select1、input2和select2，input1是antd开源表单组件库的input表单组件，select1是antd开源表单组件库的select表单组件，接入antd开源表单组件库的适配层，从antd开源表单组件库的适配层中获取对应的第一表单组件input1和select1；而input2是开源amazeui表单组件库的input表单组件，select2是开源amazeui表单组件库的select表单组件，接入开源amazeui表单组件库的适配层，从开源amazeui表单组件库的适配层中获取对应的第一表单组件input2和select2。

当然，本申请实施例中，也可以对所有的原始表单组件库构建一个适配层，然后根据所述表单组件名，从该一个适配层中获取对应的第一表单组件。本申请实施例不对其加以限制。

步骤506，接收对所述第一表单组件从第一状态切换至第二状态的状态切换指令。

该步骤可以参照上述步骤403，此处不再赘述。

步骤507，通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合。

在本申请实施例中，在接收到对第一表单组件从第一状态切换至第二状态的状态切换指令后，通过表单状态控制组件core，获取第一表单组件的第二状态所对应的代码集合，在表单页面的页面代码中，使用第一表单组件的第二状态所对应的代码集合，替换第一表单组件的第一状态所对应的代码集合。

例如，将第一表单组件input1从编辑状态切换为预览状态时，表单状态控制组件core通过执行状态设置函数core.setFieldStatus(‘input1’，‘preview’)，从antd开源表单组件库的适配层中获取预览状态‘preview’的‘input1’对应的代码集合，将页面代码中的编辑状态的input1对应的代码集合替换为预览状态的input1对应的代码集合；将第一表单组件select1从编辑状态切换为禁用状态时，表单状态控制组件core通过执行状态设置函数core.setFieldStatus(‘select1’，‘disabeld’)，从antd开源表单组件库的适配层中获取禁用状态‘disabeld’的‘select1’对应的代码集合，将页面代码中的编辑状态的select1对应的代码集合替换为禁用状态的select1对应的代码集合；将第一表单组件input2从编辑状态切换为加载状态时，表单状态控制组件core通过执行状态设置函数core.setFieldStatus(‘input2’，‘loading’)，从开源amazeui表单组件库的适配层中获取加载状态‘loading’的‘input2’对应的代码集合，将页面代码中的编辑状态的input2对应的代码集合替换为加载状态的input2对应的代码集合。当然，上述状态设置函数core.setFieldStatu（）的命名可以根据实际需求设置，本申请实施例不对其加以限制。

可选的，步骤507可以包括子步骤5071。

当在所述表单页面中接收到对指定控件的触发操作，通过所述表单状态控制组件，根据切换后表单页面所需求的第一表单组件的第二状态，使用所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的第一状态所对应的代码集合。

此步骤中，当表单页面中接收到对指定控件的触发操作时，通过表单状态控制组件core，根据切换后表单页面所需求的第一表单组件的第二状态，从适配层中获取第一表单组件的第二状态所对应的代码集合，将页面代码的视图层代码中的第一表单组件的第一状态所对应的代码集合，替换为第一表单组件的第二状态所对应的代码集合。

在本申请一种实施例中，当所述第一表单组件在编辑状态中接收到表单值，则将所述表单值记录到表单状态控制组件中；所述表单值由所述第一表单组件的多种状态共享；当所述第一表单组件从所述编辑状态切换到其他状态时，通过所述表单状态控制组件将记录的表单值填入所述其他状态所对应的代码集合中，并使用所述填入了表单值的代码集合，替换所述页面代码的视图层代码中的编辑状态所对应的代码集合。

其中，表单值指的是当表单页面处于编辑状态时，用户在第一表单组件中输入的字符，例如，当需要在第一表单组件中输入用户名时，可选用<input>表单组件，类型为文本框txet，则输入的表单值为“username”；当需要在第一表单组件中输入密码时，可选用<input>表单组件，类型为密码框passwoard，则输入的表单值为“passwoard”，且输入的文本以原点或者星号的形式显示。

当表单页面处于编辑状态时，第一表单组件接收到表单值后，将表单值记录到表单状态控制组件core中，当第一表单组件从编辑状态切换为其他状态时，通过表单状态控制组件core将记录的表单值填入其他状态所对应的代码集合中，同时，将页面代码的视图层代码中的编辑状态所对应的代码集合，替换为填入了表单值的其他状态所对应的代码集合。

表单页面在新建时，表单状态控制组件默认的第一表单组件的状态为编辑状态，当需要编辑表单页面时，第一表单组件的第一状态为编辑状态，只是在第一表单组件的代码集合中填入对应的表单值，当第一表单组件需要从编辑状态切换为预览状态时，获取第一表单组件的预览状态对应的代码集合，将表单页面的页面代码中第一表单组件的编辑状态的代码集合，替换为预览状态对应的代码集合，并在预览状态的第一表单组件所对应的代码集合中填入对应的表单值。

例如，当在购物平台A购买一件商品时，可新建一份订单，此时订单页面处于编辑状态，通过在订单页面的第一表单组件中填入表单值，如商品的件数、收货地址、联系人姓名、联系电话等，填写完成后提交订单，此时会触发指定控件的触发操作，将第一表单组件的状态从编辑状态切换为预览状态，此时，通过表单状态控制组件core将预览状态的第一表单组件，替换编辑状态的第一表单组件，同时在预览状态的第一表单组件对应的代码集合中填入表单值。

可选的，步骤507还可以包括子步骤5072和子步骤5073。

子步骤5072，当针对所有的第一表单组件从第一状态切换到第二状态时，则调用全局状态切换函数，使用各第一表单组件的所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的所述第一状态所对应的代码集合。

此步骤中，当表单页面中的所有第一表单组件均从第一状态切换到第二状态时，则调用全局状态切换函数core.setGlobalStatus()，从适配层中获取各第一表单组件的第二状态所对应的代码集合，将各第一表单组件的第二状态所对应的代码集合，替换视图层代码中的第一表单组件的第一状态所对应的代码集合。需要说明的是，全局状态切换函数core.setGlobalStatus()的名称本申请实施例不对其加以限制。

例如，当表单页面中的所有第一表单组件从预览状态切换到编辑状态时，包括第一表单组件A1、A2和A3，表单状态控制组件调用core.setGlobalStatus(‘edit’)，从适配层中获取第一表单组件A1、A2和A3的编辑状态的代码集合，将编辑状态的代码集合，替换视图层代码中的第一表单组件A1、A2和A3的预览状态所对应的代码集合。

子步骤5073，当针对部分的第一表单组件从第一状态切换到第二状态时，则分别针对每个第一表单组件调用局部状态切换函数，使用所述第一表单组件的所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中中的所述第一状态所对应的代码集合。

此步骤中，当只需要对表单页面中的部分第一表单组件进行状态切换时，针对需要进行状态切换的第一表单组件，表单状态控制组件分别调用局部状态切换函数core.setFieldStatus（），从适配层中获取第一表单组件的第二状态所对应的代码集合，将第一表单组件的第二状态所对应的代码集合，替换视图层代码中的第一表单组件的第一状态所对应的代码集合。需要说明的是，局部状态切换函数core.setFieldStatus（）的名称本申请实施例不对其加以限制。

基于表单页面中的部分第一表单组件或者所有第一表单组件的状态切换，可实现表单页面的状态切换，当用户访问新建、编辑、预览详情页面时，实际上访问的是一份表单页面，但是该表单页面可通过表单状态控制组件core进行状态切换，使得该表单页面拥有多种状态。

由于本申请只需编写一份表单页面，当需要对表单页面中的某个字段进行修改时，只需修改一个表单页面即可，减小修改的人力成本。

本申请实施例通过对原始表单组件库中的原始第二表单组件进行规范化处理，得到适配层，通过表单状态控制组件从适配层中获取所需的第一表单组件，当需要切换第一表单组件的状态时，通过表单状态控制组件进行不同状态的代码集合替换，实现编写一份表单页面的页面代码，可复用于多种状态，通过第一表单组件的状态切换，以达到任意切换表单页面状态的功能，使得编写表单页面的成本大大降低，同时，可适用于多种表单组件库。

实施例三

参照图6，示出了本申请实施例的另一种表单组件状态切换方法的流程图，具体可以包括如下步骤：

步骤601，分别加载与表单页面中多个表单标签所对应的表单状态控制组件，并将各个表单状态控制组件与相应的表单标签绑定。

在本申请实施例中，在一个表单页面中可包括多个表单标签，一个表单标签对应一个表单状态控制组件。

从应用服务器获取到表单页面的页面代码后，加载该页面代码，在加载页面代码的同时，分别加载与表单页面中多个表单标签所对应的表单状态控制组件，将各个表单状态控制组件与相应的表单标签绑定。

例如，一个表单页面中包括3个表单标签，分别为表单标签1、表单标签2和表单标签3，表单标签1绑定的表单状态控制组件为core1，表单标签2绑定的表单状态控制组件为core2，表单标签3绑定的表单状态控制组件为core3。

步骤602，通过所述表单状态控制组件获取与所述表单状态控制组件绑定的表单标签中的第一表单组件。

在本申请实施例中，通过表单状态控制组件获取与表单状态控制组件绑定的表单标签中的第一表单组件，表单标签中的第一表单组件的个数可以是一个，也可以是多个。

例如，通过表单状态控制组件core1获取表单标签1中的第一表单组件A11和A12，通过表单状态控制组件core2获取表单标签2中的第一表单组件A21、A22和A23，通过表单状态控制组件core3获取表单标签3中的第一表单组件A31。

步骤603，接收对所述第一表单组件从第一状态切换至第二状态的状态切换指令。

在本发明实施例中，在表单页面运行过程中，会接收到对第一表单组件从第一状态切换至第二状态的状态切换指令。

例如，接收到对第一表单组件A11的状态切换指令。

步骤604，通过所述第一表单组件所对应的所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合。

在本发明实施例中，在接收到对第一表单组件从第一状态切换至第二状态的状态切换指令后，通过第一表单组件所对应的表单状态控制组件，获取第一表单组件的第二状态所对应的代码集合，将第一表单组件的第一状态所对应的代码集合替换为第一表单组件的第二状态所对应的代码集合。

例如，接收到对第一表单组件A11的状态切换指令后，通过表单状态控制组件core1，获取第一表单组件A11的第二状态所对应的代码集合，将第一表单组件A11的第一状态所对应的代码集合替换为第一表单组件A11的第二状态所对应的代码集合

本申请实施例针对一个表单页面中包括多个表单标签，分别加载与表单页面中多个表单标签所对应的表单状态控制组件，并将各个表单状态控制组件与相应的表单标签绑定，通过表单状态控制组件获取与表单状态控制组件绑定的表单标签中的第一表单组件，接收对第一表单组件从第一状态切换至第二状态的状态切换指令，通过第一表单组件所对应的表单状态控制组件，在表单页面的页面代码中，使用第二状态所对应的代码集合，替换第一状态所对应的代码集合。在页面代码运行过程中，当需要切换第一表单组件的状态时，通过表单状态控制组件进行不同状态的代码替换，实现编写一份表单页面代码，可复用于多种状态，通过第一表单组件的状态切换，以达到任意切换表单页面状态的功能，使得编写表单页面的成本大大降低。

实施例四

参照图7，示出了本申请实施例的一种表单组件状态切换装置的结构图，该装置700具体可以包括如下模块：

加载模块701，用于加载表单状态控制组件。

第一表单组件获取模块702，用于通过所述表单状态控制组件获取表单页面所使用的第一表单组件；所述第一表单组件包括多种状态，所述多种状态分别对应一代码集合。

指令接收模块703，用于接收对所述第一表单组件从第一状态切换至第二状态的状态切换指令。

替换模块704，用于通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合。

可选的，装置700还包括：

第二表单组件获取模块，用于获取原始表单组件库中的原始第二表单组件；

规范化处理模块，用于将所述第二表单组件进行规范化处理，获得适配层；所述适配层包括与所述第二表单组件对应的规范化的第一表单组件。

可选的，所述规范化处理模块，包括：

封装层添加子模块，用于对所述第二表单组件添加使用同一处理函数的封装层，在所述封装层中设置多种状态的代码集合，获取与所述第二表单组件对应的第一表单组件以构建所述适配层。

可选的，所述第二表单组件获取模块，包括：

名称获取子模块，用于根据所述页面代码，获取预置的表单组件名以及对应的原始表单组件库名；

第二表单组件获取子模块，用于从与所述原始表单组件库名对应的原始表单组件库中获取与所述表单组件名对应的第二表单组件。

可选的，所述第一表单组件获取模块702，包括：

表单标签扫描子模块，用于在从应用服务器获取到表单页面的页面代码后，通过所述表单状态控制组件，扫描所述页面代码中预设的表单标签，确定表单组件名；

第一表单组件第一获取子模块，用于根据所述表单组件名，从所述适配层中获取对应的第一表单组件。

可选的，所述状态切换指令包括：当在所述表单页面中接收到对指定控件的触发操作，所述表单页面的业务逻辑自动执行到达状态切换逻辑节点的其中至少一种。

可选的，当在所述表单页面中接收到对指定控件的触发操作，所述替换模块704，包括：

代码集合第一替换子模块，用于通过所述表单状态控制组件，根据切换后表单页面所需求的第一表单组件的第二状态，使用所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的第一状态所对应的代码集合。

可选的，装置700还包括：

记录模块，用于当所述第一表单组件在编辑状态中接收到表单值，则将所述表单值记录到表单状态控制组件中；所述表单值由所述第一表单组件的多种状态共享。

可选的，所述替换模块704，包括：

表单值填入子模块，用于当所述第一表单组件从所述编辑状态切换到其他状态时，通过所述表单状态控制组件将记录的表单值填入所述其他状态所对应的代码集合中，并使用所述填入了表单值的代码集合，替换所述页面代码的视图层代码中的编辑状态所对应的代码集合。

可选的，所述替换模块704，包括：

全局替换子模块，用于当针对所有的第一表单组件从第一状态切换到第二状态时，则调用全局状态切换函数，使用各第一表单组件的所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的所述第一状态所对应的代码集合；

第一表单组件替换子模块，用于当针对部分的第一表单组件从第一状态切换到第二状态时，则分别针对每个第一表单组件调用局部状态切换函数，使用所述第一表单组件的所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的所述第一状态所对应的代码集合。

可选的，所述加载模块701，包括：

加载子模块，用于分别加载与表单页面中多个表单标签所对应的表单状态控制组件，并将各个表单状态控制组件与相应的表单标签绑定。

可选的，所述第一表单组件获取模块702，包括：

第一表单组件第二获取子模块，用于通过所述表单状态控制组件获取与所述表单状态控制组件绑定的表单标签中的第一表单组件。

可选的，所述替换模块704，包括：

代码集合第二替换子模块，用于通过所述第一表单组件所对应的所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合。

可选的，所述状态包括：编辑状态、预览状态、禁用状态、加载状态、隐藏状态其中至少一个。

本申请实施例通过加载表单状态控制组件，通过表单状态控制组件获取表单页面所使用的第一表单组件，第一表单组件包括多种状态，多种状态分别对应一代码集合，接收对第一表单组件从第一状态切换至第二状态的状态切换指令，通过表单状态控制组件，在表单页面的页面代码中，使用第二状态所对应的代码集合，替换第一状态所对应的代码集合。在页面代码运行过程中，当需要切换第一表单组件的状态时，通过表单状态控制组件进行不同状态的代码集合替换，实现编写一份表单页面的页面代码，可复用于多种状态，通过第一表单组件的状态切换，以达到任意切换表单页面状态的功能，使得编写表单页面的成本大大降低。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

图8是本申请实施例提供的一种客户端的结构示意图。参见图8，客户端800可以用于实施上述实施例一、实施例二和实施例三中提供的表单组件状态切换方法。该客户端800可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上中央处理器（centralprocessing units，CPU）822（例如，一个或一个以上处理器）和存储器832，一个或一个以上存储应用程序842或数据844的存储介质830（例如一个或一个以上海量存储设备）。其中，存储器832和存储介质830可以是短暂存储的或持久存储的。存储在存储介质830的程序可以包括一个或一个以上模块（图示没标出），每个模块可以包括对服务器中的一系列指令操作。更进一步地，中央处理器822可以设置为与存储介质830通信，在客户端800上执行存储介质830中的一系列指令操作。

客户端800还可以包括一个或一个以上电源826，一个或一个以上有线或无线网络接口850，一个或一个以上输入输出接口858，一个或一个以上键盘856，和/或，一个或一个以上操作系统841，例如Windows ServerTM，Mac OS XTM，UnixTM, LinuxTM，FreeBSDTM等等。其中，中央处理器822可以在客户端800上执行以下操作的指令：

加载表单状态控制组件；

通过所述表单状态控制组件获取表单页面所使用的第一表单组件；所述第一表单组件包括多种状态，所述多种状态分别对应一代码集合；

接收对所述第一表单组件从第一状态切换至第二状态的状态切换指令；

通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合。

本申请提供一种装置，其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述装置执行一种表单组件状态切换方法。

本申请还提供一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得装置执行一种表单组件状态切换方法。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本申请实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本申请所提供的一种表单组件状态切换方法及装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (30)

1.一种表单组件状态切换方法，其特征在于，包括：

加载表单状态控制组件；所述表单状态控制组件是客户端在接收到应用服务器返回的表单页面的页面代码后加载的；

通过所述表单状态控制组件获取所述表单页面所使用的第一表单组件；所述第一表单组件包括多种状态，所述多种状态分别对应一代码集合；

接收对所述第一表单组件从第一状态切换至第二状态的状态切换指令；

通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合；所述第二状态所对应的代码集合是所述表单状态控制组件从适配层获取的。

2.根据权利要求1所述的方法，其特征在于，还包括：

获取原始表单组件库中的原始第二表单组件；

将所述第二表单组件进行规范化处理，获得适配层；所述适配层包括与所述第二表单组件对应的规范化的第一表单组件。

3.根据权利要求2所述的方法，其特征在于，所述将所述第二表单组件进行规范化处理，获得适配层的步骤，包括：

对所述第二表单组件添加使用同一处理函数的封装层，在所述封装层中设置多种状态的代码集合，获取与所述第二表单组件对应的第一表单组件以构建所述适配层。

4.根据权利要求2所述的方法，其特征在于，所述获取原始表单组件库中的原始第二表单组件的步骤，包括：

根据所述页面代码，获取预置的表单组件名以及对应的原始表单组件库名；

从与所述原始表单组件库名对应的原始表单组件库中获取与所述表单组件名对应的第二表单组件。

5.根据权利要求2所述的方法，其特征在于，所述通过所述表单状态控制组件获取表单页面所使用的第一表单组件的步骤，包括：

在从应用服务器获取到表单页面的页面代码后，通过所述表单状态控制组件，扫描所述页面代码中预设的表单标签，确定表单组件名；

根据所述表单组件名，从所述适配层中获取对应的第一表单组件。

6.根据权利要求1所述的方法，其特征在于，所述状态切换指令包括：当在所述表单页面中接收到对指定控件的触发操作，所述表单页面的业务逻辑自动执行到达状态切换逻辑节点的其中至少一种。

7.根据权利要求6所述的方法，其特征在于，在所述表单页面中接收到对指定控件的触发操作，所述通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合的步骤，包括：

通过所述表单状态控制组件，根据切换后表单页面所需求的第一表单组件的第二状态，使用所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的第一状态所对应的代码集合。

8.根据权利要求1所述的方法，其特征在于，还包括：

当所述第一表单组件在编辑状态中接收到表单值，则将所述表单值记录到表单状态控制组件中；所述表单值由所述第一表单组件的多种状态共享。

9.根据权利要求8所述的方法，其特征在于，所述通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合的步骤，包括：

当所述第一表单组件从所述编辑状态切换到其他状态时，通过所述表单状态控制组件将记录的表单值填入所述其他状态所对应的代码集合中，并使用所述填入了表单值的代码集合，替换所述页面代码的视图层代码中的编辑状态所对应的代码集合。

10.根据权利要求6所述的方法，其特征在于，所述通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合的步骤，包括：

当针对所有的第一表单组件从第一状态切换到第二状态时，则调用全局状态切换函数，使用各第一表单组件的所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的所述第一状态所对应的代码集合；

当针对部分的第一表单组件从第一状态切换到第二状态时，则分别针对每个第一表单组件调用局部状态切换函数，使用所述第一表单组件的所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的所述第一状态所对应的代码集合。

11.根据权利要求1所述的方法，其特征在于，所述加载表单状态控制组件的步骤包括：

分别加载与表单页面中多个表单标签所对应的表单状态控制组件，并将各个表单状态控制组件与相应的表单标签绑定。

12.根据权利要求11所述的方法，其特征在于，所述通过所述表单状态控制组件获取表单页面所使用的第一表单组件的步骤，包括：

通过所述表单状态控制组件获取与所述表单状态控制组件绑定的表单标签中的第一表单组件。

13.根据权利要求12所述的方法，其特征在于，所述通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合的步骤，包括：

通过所述第一表单组件所对应的所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合。

14.根据权利要求1所述的方法，其特征在于，所述状态包括：编辑状态、预览状态、禁用状态、加载状态、隐藏状态其中至少一个。

15.一种表单组件状态切换装置，其特征在于，包括：

加载模块，用于加载表单状态控制组件；所述表单状态控制组件是客户端在接收到应用服务器返回的表单页面的页面代码后加载的；

第一表单组件获取模块，用于通过所述表单状态控制组件获取表单页面所使用的第一表单组件；所述第一表单组件包括多种状态，所述多种状态分别对应一代码集合；

指令接收模块，用于接收对所述第一表单组件从第一状态切换至第二状态的状态切换指令；

替换模块，用于通过所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合；所述第二状态所对应的代码集合是所述表单状态控制组件从适配层获取的。

16.根据权利要求15所述的装置，其特征在于，还包括：

第二表单组件获取模块，用于获取原始表单组件库中的原始第二表单组件；

规范化处理模块，用于将所述第二表单组件进行规范化处理，获得适配层；所述适配层包括与所述第二表单组件对应的规范化的第一表单组件。

17.根据权利要求16所述的装置，其特征在于，所述规范化处理模块，包括：

封装层添加子模块，用于对所述第二表单组件添加使用同一处理函数的封装层，在所述封装层中设置多种状态的代码集合，获取与所述第二表单组件对应的第一表单组件以构建所述适配层。

18.根据权利要求16所述的装置，其特征在于，所述第二表单组件获取模块，包括：

名称获取子模块，用于根据所述页面代码，获取预置的表单组件名以及对应的原始表单组件库名；

第二表单组件获取子模块，用于从与所述原始表单组件库名对应的原始表单组件库中获取与所述表单组件名对应的第二表单组件。

19.根据权利要求16所述的装置，其特征在于，所述第一表单组件获取模块，包括：

表单标签扫描子模块，用于在从应用服务器获取到表单页面的页面代码后，通过所述表单状态控制组件，扫描所述页面代码中预设的表单标签，确定表单组件名；

第一表单组件第一获取子模块，用于根据所述表单组件名，从所述适配层中获取对应的第一表单组件。

20.根据权利要求15所述的装置，其特征在于，所述状态切换指令包括：当在所述表单页面中接收到对指定控件的触发操作，所述表单页面的业务逻辑自动执行到达状态切换逻辑节点的其中至少一种。

21.根据权利要求20所述的装置，其特征在于，当在所述表单页面中接收到对指定控件的触发操作，所述替换模块，包括：

代码集合第一替换子模块，用于通过所述表单状态控制组件，根据切换后表单页面所需求的第一表单组件的第二状态，使用所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的第一状态所对应的代码集合。

22.根据权利要求15所述的装置，其特征在于，还包括：

记录模块，用于当所述第一表单组件在编辑状态中接收到表单值，则将所述表单值记录到表单状态控制组件中；所述表单值由所述第一表单组件的多种状态共享。

23.根据权利要求22所述的装置，其特征在于，所述替换模块，包括：

表单值填入子模块，用于当所述第一表单组件从所述编辑状态切换到其他状态时，通过所述表单状态控制组件将记录的表单值填入所述其他状态所对应的代码集合中，并使用所述填入了表单值的代码集合，替换所述页面代码的视图层代码中的编辑状态所对应的代码集合。

24.根据权利要求20述的装置，其特征在于，所述替换模块，包括：

全局替换子模块，用于当针对所有的第一表单组件从第一状态切换到第二状态时，则调用全局状态切换函数，使用各第一表单组件的所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的所述第一状态所对应的代码集合；

第一表单组件替换子模块，用于当针对部分的第一表单组件从第一状态切换到第二状态时，则分别针对每个第一表单组件调用局部状态切换函数，使用所述第一表单组件的所述第二状态所对应的代码集合，替换所述页面代码的视图层代码中的所述第一状态所对应的代码集合。

25.根据权利要求15所述的装置，其特征在于，所述加载模块，包括：

加载子模块，用于分别加载与表单页面中多个表单标签所对应的表单状态控制组件，并将各个表单状态控制组件与相应的表单标签绑定。

26.根据权利要求25所述的装置，其特征在于，所述第一表单组件获取模块，包括：

第一表单组件第二获取子模块，用于通过所述表单状态控制组件获取与所述表单状态控制组件绑定的表单标签中的第一表单组件。

27.根据权利要求26所述的装置，其特征在于，所述替换模块，包括：

代码集合第二替换子模块，用于通过所述第一表单组件所对应的所述表单状态控制组件，在所述表单页面的页面代码中，使用所述第二状态所对应的代码集合，替换所述第一状态所对应的代码集合。

28.根据权利要求15所述的装置，其特征在于，所述状态包括：编辑状态、预览状态、禁用状态、加载状态、隐藏状态其中至少一个。

29.一种装置，其特征在于，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行所述指令时，使得所述装置执行如权利要求1-14任一项所述的方法。

30.一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行所述指令时，执行如权利要求1-14任一项所述的方法。