CN117521608A - 表单控制方法、装置、设备及存储介质 - Google Patents
表单控制方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN117521608A CN117521608A CN202311467273.2A CN202311467273A CN117521608A CN 117521608 A CN117521608 A CN 117521608A CN 202311467273 A CN202311467273 A CN 202311467273A CN 117521608 A CN117521608 A CN 117521608A
- Authority
- CN
- China
- Prior art keywords
- data
- control component
- node
- target
- content data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 57
- 238000000547 structure data Methods 0.000 claims abstract description 195
- 238000012545 processing Methods 0.000 claims description 26
- 230000004044 response Effects 0.000 claims description 23
- 238000004891 communication Methods 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 9
- 230000006870 function Effects 0.000 description 9
- 238000009877 rendering Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 6
- 230000008569 process Effects 0.000 description 5
- 230000001351 cycling effect Effects 0.000 description 3
- 238000012217 deletion Methods 0.000 description 3
- 230000037430 deletion Effects 0.000 description 3
- 230000007246 mechanism Effects 0.000 description 3
- 238000006243 chemical reaction Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 239000000945 filler Substances 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000002457 bidirectional effect Effects 0.000 description 1
- 238000004883 computer application Methods 0.000 description 1
- 238000013499 data model Methods 0.000 description 1
- 238000007667 floating Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 238000000844 transformation Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/174—Form filling; Merging
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请实施例公开了表单控制方法、装置、设备及存储介质。该方法包括：显示表单；其中，所述表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件；响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据；其中，所述表单内容数据包括所述至少一个结构数据；基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单；显示所述更新后的表单。采用本申请实施例能够高效地对表单进行控制。
Description
技术领域
本申请涉及计算机应用技术领域，尤其涉及表单控制方法、装置、设备及存储介质。
背景技术
渲染(Render)在电脑绘图中是指用软件从模型生成图像的过程，模型是用严格定义的语言或者数据结构对于三维物体的描述，它包括几何、视点、纹理以及照明信息等。
结构数据指的是组织结构或行政区划分等类型的数据，对于由结构数据组成的表单，由于各个结构数据之间存在结构关系，如果新增或者删减某个结构数据，那么表单中各个结构数据的结构关系就会发生变化，进而需要重新渲染更新后的表单。因此，如何高效地对表单进行控制，是目前亟需解决的技术问题。
发明内容
本申请实施例提供了表单控制方法、装置、设备及存储介质，能够高效地对表单进行控制。
一方面，本申请实施例提供一种表单控制方法，该方法包括：
显示表单；其中，所述表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件；
响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据；其中，所述表单内容数据包括所述至少一个结构数据；
基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单；
显示所述更新后的表单。
在一个实施例中，所述目标控制组件指的是用于新增结构数据的第一控制组件；
所述响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第一控制组件所控制的目标结构数据包括所述第一控制组件所属的目标显示区域中的所有结构数据，则在所述表单内容数据中所述目标结构数据的下方新增至少一个第一结构数据，得到所述更新后的表单内容数据；其中，所述至少一个第一结构数据与所述目标显示区域所填充的结构数据相同，且各个第一结构数据的结构关系与所述目标显示区域所填充的相应结构数据的结构关系相同；
所述基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
在所述表单中所述目标显示区域的下方新增一行显示区域，并基于所述至少一个第一结构数据的结构关系，在新增的显示区域填充所述至少一个第一结构数据，得到所述更新后的表单内容数据。
在一个实施例中，所述目标控制组件指的是用于新增结构数据的第一控制组件；
所述响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第一控制组件所控制的目标结构数据包括所述第一控制组件所属的目标显示区域中的部分结构数据，则在所述表单内容数据中所述目标结构数据的下方新增至少一个第二结构数据，得到所述更新后的表单内容数据；其中，所述至少一个第二结构数据包括与所述第一控制组件对应的第一节点相同的结构数据，以及与所述第一节点的各个子孙节点相同的结构数据；
所述基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
在所述表单中所述第一节点及其子孙节点的下方新增一行显示区域，并基于所述至少一个第二结构数据的结构关系，在新增的显示区域填充所述至少一个第二结构数据；
针对所述第一节点的任一祖先节点，将所述祖先节点的高度更新为所述祖先节点所在父容器的高度加上所述新增的显示区域的高度，得到所述更新后的表单内容数据。
在一个实施例中，所述方法还包括：
在所述第一节点存在兄弟节点的情况下，在所述兄弟节点以及所述兄弟节点的子孙节点的下方新增一行显示区域；其中，所述兄弟节点的下方新增的显示区域未填充结构数据。
在一个实施例中，所述方法还包括：
在所述第一节点的父节点存在兄弟节点的情况下，在所述兄弟节点以及所述兄弟节点的子孙节点的下方新增一行显示区域；其中，所述兄弟节点的下方新增的显示区域未填充结构数据。
在一个实施例中，所述目标控制组件指的是用于删除结构数据的第二控制组件；
所述响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第二控制组件所控制的目标结构数据包括所述第二控制组件所属的目标显示区域中的所有结构数据，则在所述表单内容数据中删除所述目标结构数据，得到所述更新后的表单内容数据；
所述基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
将所述表单中的所述目标显示区域以及所述目标显示区域所填充的目标结构数据删除，得到所述更新后的表单内容数据。
在一个实施例中，所述目标控制组件指的是用于删除结构数据的第二控制组件；
所述响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第二控制组件所控制的目标结构数据包括所述第二控制组件所属的目标显示区域中的部分结构数据，则在所述表单内容数据中删除所述目标结构数据，得到所述更新后的表单内容数据；
所述基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
将所述表单中的所述第二控制组件对应的第二节点，所述第二节点的各个子孙节点以及用于填充所述目标结构数据的显示区域删除；
针对所述第二节点的任一祖先节点，将所述祖先节点的高度更新为所述祖先节点所在父容器的高度减去删除的显示区域的高度，得到所述更新后的表单内容数据。
在一个实施例中，所述方法还包括：
在所述第二节点存在兄弟节点的情况下，在所述表单中删除所述兄弟节点以及所述兄弟节点的子孙节点的未填充结构数据的一行显示区域。
在一个实施例中，所述方法还包括：
在所述第二节点的父节点存在兄弟节点的情况下，在所述表单中删除所述兄弟节点以及所述兄弟节点的子孙节点的未填充结构数据的一行显示区域。
在一个实施例中，所述目标控制组件指的是用于删除结构数据的第二控制组件；所述方法还包括：
若所述第二控制组件所属的目标显示区域中，所述第二控制组件对应的第二节点的数量为一个，则拒绝响应对所述第二控制组件的点击操作。
另一方面，本申请实施例提供了一种表单控制装置，该表单控制装置包括：
显示单元，用于显示表单；其中，所述表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件；
处理单元，用于响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据；其中，所述表单内容数据包括所述至少一个结构数据；
所述处理单元，还用于基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单；
所述显示单元，还用于显示所述更新后的表单。
另一方面，本申请实施例提供一种电子设备，包括处理器、存储装置和通信接口，处理器、存储装置和通信接口相互连接，其中，存储装置用于存储支持计算机设备执行上述方法的计算机程序，计算机程序包括程序指令，处理器被配置用于调用程序指令，执行如下步骤：
显示表单；其中，所述表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件；
响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据；其中，所述表单内容数据包括所述至少一个结构数据；
基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单；
显示所述更新后的表单。
另一方面，本申请实施例提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序包括程序指令，程序指令当被处理器执行时使处理器执行上述表单控制方法。
另一方面，本申请实施例提供了一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序适于由处理器加载并执行上述表单控制方法。
本申请实施例在显示表单之后，可以响应对表单中某个控制组件的点击操作，基于该控制组件所控制的目标结构数据，对表单的表单内容数据进行更新，得到更新后的表单内容数据，然后基于更新后的表单内容数据，对表单进行更新，并显示更新后的表单，操作便捷，能够高效地对表单进行控制。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的一种表单创建方式的流程示意图；
图2是本申请实施例提供的一种表单的界面示意图；
图3是本申请实施例提供的一种表单控制方法的流程示意图；
图4是本申请实施例提供的另一种表单控制方法的流程示意图；
图5是本申请实施例提供的另一种表单的界面示意图；
图6是本申请实施例提供的另一种表单的界面示意图；
图7是本申请实施例提供的另一种表单的界面示意图；
图8是本申请实施例提供的另一种表单的界面示意图；
图9是本申请实施例提供的另一种表单的界面示意图；
图10是本申请实施例提供的另一种表单控制方法的流程示意图；
图11是本申请实施例提供的一种表单控制装置的结构示意图；
图12是本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本申请实施例提供的表单控制方法可以应用在电子设备中，电子设备可以包括客户端、服务器或者计算机设备中。客户端或者服务器可以用于显示渲染得到的表单(即JsonTable)等，客户端或者服务器可以安装或者集成在内容发布平台或者浏览器中，内容发布平台或者浏览器可以运行在计算机设备中。计算机设备包括但不限定于智能手机、相机、可穿戴设备或者电脑等。
在本申请的具体实施方式中，涉及到用户相关的数据，例如点击操作等，当本申请实施例运用到具体产品或技术中时，需要获得用户许可或者同意，且相关数据的收集、使用和处理需要遵守当地法律法规和标准。
在对本申请实施例提供的表单控制方法进行介绍之前，先对表单的创建过程进行描述。
如图1所示，本申请实施例提供的表单的创建方式可以为：表格创建者进入JsonTree页面，通过一系列可视化交互最终完成建表动作的过程。完成建表后，引擎会生成对应字段配置，即treeData。引擎产出字段配置后，字段配置可以存入数据库，以备后续使用。另外，treeData转化成initTableData，这一步需要用到函数generateInitTableData()，该函数内部会依次遍历treeData中的各个树节点，采用递归算法计算得出相应的初始化表格数据。表格填写者欲进入页面做填写操作时，引擎会在页面初始化的生命周期钩子中从数据库取出对应配置，即之前保存入库的treeData，引擎还会从数据库中取出当前表单的内容数据(即contentList)，例如图1中的通过取表格内容得到contentList。引擎会对上一步取出的表格内容数据进行判断，根据其是否有值做不同处理，再与initTableData一起经过计算最终得出一份数据——tableData，它记录了表格字段结构和具体的内容。进一步的，可以通过执行generateTableTrList()(一段具备复杂逻辑的数据处理函数，能将tableData转化成trList)，得到trList，然后基于trList渲染得到JsonTable。现在，表格填写者可以在JsonTable中录入数据了，数据录入后，会得到新的tableData，新的tableData和录入数据之前的tableData的结构相似，但数据已发生变化。新的tableData依然还是前端概念的数据，要被后端数据库存储，就需要使用函数frontToServer()进行转换，该函数的产物是后端能识别的contentList，最终将转换后的表格内容数据存入数据库。
通过上述描述可知，表单的渲染是靠trList驱动的，而trList又是根据tableData转化而来的。因此，在检测到对任一第一控制组件或者第二控制组件的点击操作之后，可以响应该点击操作更新tableData中的数据。基于更新后的tableData，就可以转换得到更新后的trList，进而基于更新后的trList就可以渲染得到更新后的表单。
下面从三个实体(tableData(即表单内容数据)、trList(即二维数组数据)、JsonTable(即目标表单))和两个联系(转化、渲染)的角度详细剖析。
举例来说，随着笔记和商品的不断添加，表单整体的行数相应增加，其余三列也被随之撑开，并时刻保持纵向居中，即所谓的合并单元格。这样一来，JsonTable便以视图的形式直观地表达了数据间的结构关系。
在一种可选的实施方式中，trList是一个二维数组，第一层数组里的“每个数组”代表着“表单的每一行”，第二层数组里的“每个对象”代表着“该行的每一列”，而第三层对象里的每个字段代表的含义如下：
firstPath：自身参考的首行路径，用于未来的新增一行(因为第一行最规整，所以下面新增的行都以第一行作为标准)。
path：自身的路径，为了后期通过loadsh的get方法取到对应节点来做双向数据绑定(这里涉及了Vue的数据模型概念)。
type：字段类型，struct表示结构，引擎会渲染出操作区，即+/-号；string表示文本型，对应的组件是输入框；int和float分别表示整数型和小数型，最终渲染成数字输入框……还有很多种类型，这里不再赘述。
rowspan：当前单元格需要跨越(合并)的行数，若是5即表示合并5行(如果此时再新增一件商品，该行的rowspan都会变成6)。
modelValue：模型值，指当前单元格输入控件具体的值，会在控件中体现，也是最终提交表单时存档的值。
name：字段名称，用于渲染当前列的表头和输入控件的提示文案(placeholder)。
remark：字段备注，这串文本会渲染在表头标题后面的问号悬浮窗中(鼠标需悬浮至图标处才能看到悬浮窗)。
isPrimaryKey：是否作为主键，全局只有一个字段可以设为true，当前设置主播ID为主键，则填表者若输入重复的主播ID将会收到提示。
isRequired：是否必填，设为true的会在表头标题右侧渲染星型符号，表示必填。
config：字段配置，比如这里要求输入框的前缀为“ID”、最大输入长度为24……，它用来约束输入控件的形态和功能。
示例性的，创建的表单可以如图2所示，该表单支持多级嵌套，即表单中不同单元格填充的结构数据之间存在不同结构关系，例如从属关系或者兄弟关系。图2所示表单中的“主播ID”所在的第一列、“主播粉丝数”所在的第二列和最后一列(即“主播备注”所在列)各自都是一个合并5行的单元格。从图2可知，该表单中的“主播ID”、“主播粉丝数”以及“主播备注”的层级均为第一层级。“笔记ID”以及“商品ID”的层级均为第二层级。“规格ID”的层级为第三层级。其中，“规格ID”为“商品ID”的子节点。“商品ID”为“笔记ID”的兄弟节点。
由上述可知，在JsonTable的渲染是靠trList驱动的，而trList又是根据tableData转化而来的基础上，如果检测到对JsonTable中任一控制组件的点击操作，那么tableData数组中的数据就会发生改变，利用Vue的数据监控机制，会自动触发trList的更新，这将导致JsonTable重新渲染最新的布局，至此，在JsonTable操作区利用控制组件可快速实现“增删一行”。
下面对如何基于tableData数组中的数据，触发更新trList的，从而渲染得到新的JsonTable进行具体描述。
可以通过执行generateTableTrList(tableData)，generateTableTrList()内部包含复杂的运算逻辑，下面具体讲解该函数内部原理，tableData是整张表的数据，它有很多行，由于每行只是在具体的值上有区别而总体遵循的数据结构是类似的，所以generateTableTrList(tableData)内部会调用generateTableItemTrList(tableItem)一行一行地处理(注意后者方法名中多了一个”Item“字样，参数也变成了”tableItem“，表示”表单的单项“，也就是每一行的意思)，当我们获取到所有行的数据(即每一行的trList)后，再统一汇总累加成最终的、整张表的trList。
示例性的，generateTableItemTrList()内部的算法可以简要概括为四步。
第1步：getMaxRowNum()——获取tableItem的最多行数maxRowNum。
最多行数maxRowNum就是表单单项tableItem的实际行数，有了最多行数，就知道要渲染多少个<tr></tr>标签，在后面第4步中就可以循环maxRowNum次，最终往数组里塞入maxRowNum个行数据。
可选的，可以用递归算法从最里面的层级往外计算，最终得出最外层被顶开了多少行，再与其平级的兄弟节点数量累加。举例来说：商品是外层，规格是里层，规格的数量会决定其父级商品所占的行数，可以再发散一下思维，假设规格下面还能再细分，那么这个再细分的维度又能决定其父级规格所占的行数，且进而决定其祖父级商品所占的行数，依次类推，在层级非常深的场景下，这套递归算法也能完美地计算出最外层的行数，再与其兄弟节点的行数依次累加，最终得到表单单项tableItem的最多行数maxRowNum。
第2步：getFirstRowPaths()——获取tableItem的首行路径列表(为下面groupColumns()根据首行路径分组做准备)。
首行路径列表主要是为了第3步根据首行路径分组做准备。
第3步：groupColumns()——以tableItem的首行路径分组，获取tableItem的各路径数据columnData(它是按列维度分组的，后续需要将其“扭转”过来，变成行维度的数据，才能被原生<table></table>标签使用和渲染)。
第2步拿到了每列数据的路径，这一步会沿着这些路径找到每列的具体数据，该方法中依然使用递归算法依次遍历各级节点，收集firstPath、path、rowspan、modelValue、name、type、remark、isPrimaryKey、isRequired、config字段，最终生成tableItem的各路径数据。
第4步：getItemTrList()——汇总上述三项数据，获取tableItem的trList(itemTrList)。
现在拿到了tableItem的三项数据：最多行数maxRowNum、首行路径firstRowPaths、各路径数据columnData，接下来就是整合了，我们发现columnData是按列维度分组的(所以每一项的值才正好是长度为5的数组，这个5其实是tableItem的最多行数maxRowNum)，我们需要把它“扭转”过来，变成行维度的数据，这才是我们需要的itemTrList。
可选的，可以采用双重循环语句，外层循环maxRowNum次，内层遍历firstRowPaths，从columnData中找出该路径(变量v)下的该行(变量i)数据，内层循环产出每小行数据，外层循环产出tableItem大行数据——itemTrList。
本申请实施例可以利用原生<table>标签加rowspan(即行数总和)实现多级嵌套及合并单元格的原理，即通过原生<table>标签加rowspan(跨越行数)特性来实现单元格的合并，再辅以数据的递归算法，达到单元格的多级嵌套。
简而言之，在拿到tableData(记录表单字段结构和具体内容的数据)后，传入generateTableTrList()(一段具备复杂逻辑的数据处理函数，能将tableData转化成trList)，得到trList(原生表单标签<table><tr></tr></table>中的tr列表数据)后，再在原生<table></table>标签中通过双层v-for指令分别循环出<tr>(行数据)和<td>(列数据)，最终渲染出JsonTable这一表单视图，JsonTable这一表单视图可以如图2所示。
要渲染出JsonTable，则需要一份特殊结构的数据——trList，再经过代码渲染出表单视图。代码的原理是使用原生<table></table>标签，内部首行的<tr></tr>渲染表头(内容包括name(表头标题)、isRequired(必填红星)、remark(字段备注悬浮窗)等)，其余行的<tr></tr>渲染表体，由于表体是多行多列(trList也是一个二维数组，刚好与之后所述的v-for双层循环相契合)，所以可以采用双层v-for(Vue的一种指令)循环渲染机制，逐行逐列读取trList数据，将每行每列的rowspan(合并行数)、component(组件)、modelValue(模型值)等数据都准确地赋给<tr>或<td>标签，标签接收到这些数据后，逐行逐列渲染每个单元格(决定当前单元格要合并多少行、要渲染什么组件、要带入何值等等)，直到循环结束，最终渲染完成JsonTable。
基于上述描述，请参见图3，图3是本申请实施例提供的一种表单控制方法的流程示意图，该表单控制方法可以由电子设备执行；如图3所示的表单控制方案包括但不限于步骤S301～步骤S304，其中：
S301，显示表单，表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件。
具体实现中，电子设备可以在显示屏幕中显示表单，表单可以包括至少一行显示区域，一行显示区域可以包括至少一个单元格。对于任一单元格，该单元格可以填充有结构数据，或者该单元格未填充结构数据，即该单元格为空。不同节点的对应单元格可以填充控制组件，控制组件可以包括第一控制组件和第二控制组件中的至少一种，第一控制组件用于指示在表单中新增结构数据，第二控制组件用于指示在表单中删除结构数据。表单中的至少一个结构数据之间存在结构关系，例如从属关系或者兄弟关系等。
示例性的，表单可以如图2所示，该表单可以包括表头数据。表头是指表单中位于顶部的一行或者一列，用于说明表单中所包含的数据的含义。在一个表单中，表头可以分为行表头和列表头两种。行表头通常位于表单的顶部，包含了所有的列名，用来说明每一列中所包含的数据的含义。以图2为例，该表单包括行表头，该行表头可以包含结构数据“主播ID”、“主播粉丝数”、“笔记ID”、“商品ID”、“规格ID”以及“主播备注”等列名，用来说明每一列所包含的数据的含义。列表头则通常位于表单的左侧，包含了所有的行名，用来说明每一行中所包含的数据的含义。例如，在一个课程表的表单中，列表头可以包含星期一、星期二、星期三等不同的时间区间，用来说明每一行代表的是哪个时间段的课程信息。
在一种实现方式中，电子设备可以通过上述实施例描述的方式获取表单内容数据，通过执行表单内容数据内部包含的运算逻辑，得到二维数组数据，然后基于二维数组数据渲染得到表单，进而显示该表单。
S302，响应对至少一个控制组件中的目标控制组件的点击操作，基于目标控制组件所控制的目标结构数据，对表单的表单内容数据进行更新，得到更新后的表单内容数据，表单内容数据包括至少一个结构数据。
其中，表单中的至少一个控制组件可以包括至少一个第一控制组件，以及至少一个第二控制组件中的一个或者多个，目标控制组件可以指的是表单中的任一第一控制组件或者任一第二控制组件。
在一种实现方式中，在用户点击表单中的任一第一控制组件的情况下，电子设备可以响应对该第一控制组件的点击操作，确定该第一控制组件控制的目标结构数据，电子设备还可以确定该第一控制组件所在的行号，然后在表单内容数据中该行号的下方新增上述目标结构数据，以对表单的表单内容数据进行更新，得到更新后的表单内容数据。
举例来说，假设用户点击了图2所示表单中从左至右的第一个第一控制组件(即图2所示表单中位于第一列的+号按钮)，那么电子设备可以响应对该第一控制组件的点击操作，确定该第一控制组件控制的目标结构数据可以包括表单内容数据中的首行结构数据，电子设备还可以确定该第一控制组件所在的行号，然后在表单内容数据中该行号的下方新增一行数据，新增的这行数据就是上述目标结构数据，以对表单的表单内容数据进行更新，得到更新后的表单内容数据。
在另一种实现方式中，在用户点击表单中的任一第二控制组件的情况下，电子设备可以响应对该第二控制组件的点击操作，确定该第二控制组件控制的目标结构数据，电子设备还可以确定该第二控制组件所在的行号，然后在表单内容数据中该行号指示的结构数据中删除该目标结构数据，以对表单的表单内容数据进行更新，得到更新后的表单内容数据。
举例来说，假设用户点击了图2所示表单中位于第四列第三行的第二控制组件(即图2所示表单中位于第四列第三行的-号按钮)，那么电子设备可以响应对该第二控制组件的点击操作，确定该第二控制组件控制的目标结构数据可以包括填充至表单中第四列第三行的单元格中的结构数据，电子设备还可以确定该第二控制组件所在的行号，然后将表单内容数据中该行号指示的行显示区域中位于第四列的结构数据删除，以对表单的表单内容数据进行更新，得到更新后的表单内容数据。
S303，基于更新后的表单内容数据，对表单进行更新，得到更新后的表单。
具体实现中，如果目标控制组件为第一控制组件，那么基于更新后的表单内容数据，可以实现在表单中第一控制组件对应的节点下方新增一行数据，新增的数据即第一控制组件对应的节点的副本，从而实现利用第一控制组件可快速实现“新增一行”。如果目标控制组件为第二控制组件，那么基于更新后的表单内容数据，可以实现在表单中删除第二控制组件对应的节点，从而实现利用第二控制组件可快速实现“删除一行”。
举例来说，图2所示表单中的“主播ID”、“主播粉丝数”以及“主播备注”的层级均为第一层级。“笔记ID”以及“商品ID”的层级均为第二层级。“规格ID”的层级为第三层级。其中，“规格ID”为“商品ID”的子节点。“商品ID”为“笔记ID”的兄弟节点。基于上述结构关系，图2中从左至右第一个第一控制组件(即图2所示表单中位于第一列的+号按钮)可以用于在该行显示区域(即第一控制组件所在的显示区域)的下方新增一行显示区域。图2中从左至右第一个第二控制组件(即图2所示表单中位于第一列的-号按钮)可以用于在表单中删除该行显示区域(即第二控制组件所在的显示区域)。
在一种实现方式中，电子设备可以通过上述实施例描述的方式获取更新后的表单内容数据，通过执行更新后的表单内容数据内部包含的运算逻辑，得到更新后的二维数组数据，然后基于更新后的二维数组数据渲染得到新的表单，即更新后的表单，进而显示该更新后的表单。
在一个示例中，在用户点击图2中的+号按钮时，可以获取用户点击的按钮所在的行号index，在tableData中的该index的下方新增一行数据，得到更新后的tableData，新增的这行数据就是tableData中首行数据的副本。由于tableData已经发生了改变，那么利用Vue的数据监控机制，会自动触发trList的更新，这将导致JsonTable重新渲染最新的布局，至此，表单实现了新增一行。
在另一个示例中，在用户点击图2中的-号按钮时，可以获取用户点击的按钮所在的行号index，然后删除tableData数组中的索引为index的那项，通过链式反应，最终表格实现了删除一行。
S304，显示更新后的表单。
本申请实施例中，在显示表单之后，可以响应对表单中某个控制组件的点击操作，基于该控制组件所控制的目标结构数据，对表单的表单内容数据进行更新，得到更新后的表单内容数据，然后基于更新后的表单内容数据，对表单进行更新，并显示更新后的表单，操作便捷，能够高效地对表单进行控制。
基于上述描述，请参见图4，图4是本申请实施例提供的另一种表单控制方法的流程示意图，该表单控制方法可以由电子设备执行；如图4所示的表单控制方案包括但不限于步骤S401～步骤S407，其中：
S401，显示表单，表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件。
表单可以呈现各个结构数据的结构关系，例如从属关系或者兄弟关系等。以图5所示的表单为例，该表单可以包括结构数据“文本”，“结构列表1”以及“结构列表1-1”。其中，结构数据“文本”和结构数据“结构列表1”的结构关系为兄弟关系。结构数据“结构列表1”和结构数据“结构列表1-1”的结构关系为从属关系，具体的，结构数据“结构列表1”的子节点包括结构数据“结构列表1-1”。该表单在任一节点对应的显示区域还可以包括该节点的第一控制组件和/或第二控制组件。第一控制组件可以用于新增一行数据，新增的数据就是该第一控制组件对应的节点的子孙节点的副本，示例性的，第一控制组件可以如图1中的+号按钮所示。第二控制组件可以用于删除该第二控制组件对应的节点的子孙节点，示例性的，第二控制组件可以如图1中的-号按钮所示。因此用户可以通过点击任一第一控制组件的方式，实现对表单中该第一控制组件对应的节点的复制功能，从而实现在该第一控制组件对应的节点的下方新增一行数据。
可以理解的是，本申请实施例中的第一控制组件或者第二控制组件的表现形式包含但不限定于图5所示的+号按钮或者-号按钮，也可以通过其他方式呈现，例如第一控制组件为第一方框，第一方框中包括用于提示新增一行数据的提示信息，第二控制组件为第二方框，第二方框中包括用于提示删除一行数据的提示信息；又如第一控制组件为用于提示新增一行数据的卡通图案，第二控制组件为用于提示删除一行数据的卡通图案，等等，具体不受本申请实施例的限定。
S402，响应对至少一个控制组件中的第一控制组件的点击操作，若第一控制组件所控制的目标结构数据包括所述第一控制组件所属的目标显示区域中的所有结构数据，则在表单内容数据中目标结构数据的下方新增至少一个第一结构数据，得到更新后的表单内容数据。
其中，至少一个第一结构数据与目标显示区域所填充的结构数据相同，且各个第一结构数据的结构关系与目标显示区域所填充的相应结构数据的结构关系相同。
S403，在表单中目标显示区域的下方新增一行显示区域，并基于至少一个第一结构数据的结构关系，在新增的显示区域填充至少一个第一结构数据，得到更新后的表单内容数据。
如图5所示，表单中包括至少一行数据，每行数据包括至少一个节点，不同节点存在与其他节点之间的结构关系。例如图5中从左至右的第一个+/-号按钮所在的节点，即属性包括文本、是否、单选、日期时间、图片上传、结构列表1、自定义、结构列表1-1、自定义的数据。第二个+/-号按钮所在的节点，即属性包括结构列表1、自定义、结构列表1-1、自定义的数据。第三个+/-号按钮所在的节点，即属性包括结构列表1-1、自定义的数据。其中，第一个+/-号按钮所在的节点为第二个+/-号按钮所在的节点的父节点，第二个+/-号按钮所在的节点为第三个+/-号按钮所在的节点的父节点，即第一个+/-号按钮所在的节点为第二个+/-号按钮所在的节点，以及第三个+/-号按钮所在的节点的祖先节点。
可选的，如果用户将鼠标指针移动至第一个+/-号按钮的上方，那么可以检测到鼠标指针位于第一个+/-号按钮所在区域，因此可以在第一个+/-号按钮所在行显示背景颜色为预设颜色(例如绿色或者黄色等)，以对第一个+/-号按钮进行辖区提示，即提示第一个+/-号按钮能管理的全部区域。
在用户点击第一个+/-号按钮中的+号按钮的情况下，如图1中的箭头所示，可以在用户点击的按钮所在行的下方新增一行数据，新增的这行数据就是tableData数组首行数据的副本，如图1中最后一行数据所示。
S404，响应对至少一个控制组件中的第一控制组件的点击操作，若第一控制组件所控制的目标结构数据包括第一控制组件所属的目标显示区域中的部分结构数据，则在表单内容数据中目标结构数据的下方新增至少一个第二结构数据，得到更新后的表单内容数据。
其中，至少一个第二结构数据包括与第一控制组件对应的第一节点相同的结构数据，以及与第一节点的各个子孙节点相同的结构数据。
S405，在表单中第一节点及其子孙节点的下方新增一行显示区域，并基于至少一个第二结构数据的结构关系，在新增的显示区域填充至少一个第二结构数据。
在一个示例中，在用户点击第二个+/-号按钮中的+号按钮的情况下，如图6中的箭头所示，可以在用户点击的按钮所在节点及其子孙节点的下方新增一行数据，新增的这行数据就是tableData数组首行数据中与用户点击的按钮所在节点相应的节点及其子孙节点的副本，如图2中最后一行数据所示。
在一种实现方式中，如图2所示，如果用户将鼠标指针移动至第二个+/-号按钮的上方，那么可以检测到鼠标指针位于第二个+/-号按钮所在区域，因此可以在第二个+/-号按钮所在节点及其子孙节点显示背景颜色为预设颜色，以对第二个+/-号按钮进行辖区提示，即提示第二个+/-号按钮能管理的全部区域。
在另一个示例中，如果用户将鼠标指针移动至第三个+/-号按钮的上方，那么可以检测到鼠标指针位于第三个+/-号按钮所在区域，由于第三个+/-号按钮所在节点为叶子节点，因此可以在第三个+/-号按钮所在节点显示背景颜色为预设颜色，以对第三个+/-号按钮进行辖区提示，即提示第三个+/-号按钮能管理的全部区域。在用户点击第三个+/-号按钮中的+号按钮的情况下，如图7中的箭头所示，可以在用户点击的按钮所在节点的下方新增一行数据，新增的这行数据就是tableData数组首行数据中与用户点击的按钮所在节点相应的节点的副本，用户点击的按钮所在节点的祖先节点(不包含用户点击的按钮所在节点)的高度更新为：祖先节点所在父容器的高度加上新增一行数据的高度，如图7中最后一行数据所示。
在一种实现方式中，在第一节点存在兄弟节点的情况下，在兄弟节点以及该兄弟节点的子孙节点的下方新增一行显示区域；其中，兄弟节点的下方新增的显示区域未填充结构数据。
在一个示例中，如图8所示，表单中包括至少一行数据，每行数据包括至少一个节点，不同节点存在与其他节点之间的逻辑关系。例如图8中从左至右的第一个+/-号按钮所在的节点，即属性包括主播ID、主播粉丝数、主播备注、发过的笔记、笔记ID、带过的商品、商品ID、该商品的规格、规格ID的数据。第二个+/-号按钮所在的节点，即属性包括发过的笔记、笔记ID的数据。第三个+/-号按钮所在的节点，即属性包括带过的商品、商品ID、该商品的规格、规格ID的数据。第四个+/-号按钮所在的节点，即属性包括该商品的规格、规格ID的数据。其中，第一个+/-号按钮所在的节点为第二个+/-号按钮所在的节点和第三个+/-号按钮所在的节点的父节点，第二个+/-号按钮所在的节点和第三个+/-号按钮所在的节点为兄弟节点，第三个+/-号按钮所在的节点为第四个+/-号按钮所在的节点的父节点。
如图8所示，如果用户将鼠标指针移动至第二个+/-号按钮的上方，那么可以检测到鼠标指针位于第二个+/-号按钮所在区域，由于第二个+/-号按钮所在节点为叶子节点，因此可以在第二个+/-号按钮所在节点显示背景颜色为预设颜色，以对第二个+/-号按钮进行辖区提示，即提示第二个+/-号按钮能管理的全部区域。
在用户点击第二个+/-号按钮中的+号按钮的情况下，可以在用户点击的按钮所在节点的下方新增一行数据，新增的这行数据就是tableData数组首行数据中与用户点击的按钮所在节点相应的节点的副本，用户点击的按钮所在节点的祖先节点(不包含用户点击的按钮所在节点)的高度更新为：祖先节点所在父容器的高度加上新增一行数据的高度，用户点击的按钮所在节点的兄弟节点及其子孙节点(即第三个+/-号按钮所在的节点以及第四个+/-号按钮所在的节点)的下方也会新增一行，但是新增一行的数据为空，如图4中最后一行数据所示。
在另一个示例中，如图8所示，如果用户将鼠标指针移动至第三个+/-号按钮的上方，那么可以检测到鼠标指针位于第三个+/-号按钮所在区域，因此可以在第三个+/-号按钮所在节点及其子孙节点显示背景颜色为预设颜色，以对第三个+/-号按钮进行辖区提示，即提示第三个+/-号按钮能管理的全部区域。在用户点击第三个+/-号按钮中的+号按钮的情况下，可以在用户点击的按钮所在节点及其子孙节点的下方新增一行数据，新增的这行数据就是tableData数组首行数据中与用户点击的按钮所在节点相应的节点及其子孙节点的副本，用户点击的按钮所在节点的祖先节点(不包含用户点击的按钮所在节点)的高度更新为：祖先节点所在父容器的高度加上新增一行数据的高度，用户点击的按钮所在节点的兄弟节点(即第二个+/-号按钮所在的节点)的下方也会新增一行，但是新增一行的数据为空，如图5中最后一行数据所示。
在一种实现方式中，在第一节点的父节点存在兄弟节点的情况下，在兄弟节点以及该兄弟节点的子孙节点的下方新增一行显示区域；其中，兄弟节点的下方新增的显示区域未填充结构数据。
在一个实施例中，如果用户将鼠标指针移动至第四个+/-号按钮的上方，那么可以检测到鼠标指针位于第四个+/-号按钮所在区域，由于第四个+/-号按钮所在节点为叶子节点，因此可以在第四个+/-号按钮所在节点显示背景颜色为预设颜色，以对第四个+/-号按钮进行辖区提示，即提示第四个+/-号按钮能管理的全部区域。在用户点击第四个+/-号按钮中的+号按钮的情况下，可以在用户点击的按钮所在节点的下方新增一行数据，新增的这行数据就是tableData数组首行数据中与用户点击的按钮所在节点相应的节点的副本，用户点击的按钮所在节点的祖先节点(不包含用户点击的按钮所在节点)的高度更新为：祖先节点所在父容器的高度加上新增一行数据的高度，与用户点击的按钮所在节点所属的子树不同的其他子树所包含的节点(即第二个+/-号按钮所在的节点)的下方也会新增一行，但是新增一行的数据为空，如图9中最后一行数据所示。
S406，针对第一节点的任一祖先节点，将祖先节点的高度更新为祖先节点所在父容器的高度加上新增的显示区域的高度，得到更新后的表单内容数据。
举例来说，在用户点击第二个+/-号按钮中的+号按钮的情况下，如图6中的箭头所示，可以在用户点击的按钮所在节点及其子孙节点的下方新增一行数据，用户点击的按钮所在节点的祖先节点(不包含用户点击的按钮所在节点)的高度更新为：祖先节点所在父容器的高度加上新增一行数据的高度，如图6中最后一行数据所示。
S407，显示更新后的表单。
本申请实施例中，在显示表单之后，可以响应对表单中某个第一控制组件的点击操作，基于该第一控制组件所控制的目标结构数据，对表单的表单内容数据进行更新，得到更新后的表单内容数据，然后基于更新后的表单内容数据，对表单进行更新，并显示更新后的表单，操作便捷，能够一键实现新增一行。
基于上述描述，请参见图10，图10是本申请实施例提供的另一种表单控制方法的流程示意图，该表单控制方法可以由电子设备执行；如图10所示的表单控制方案包括但不限于步骤S1001～步骤S1007，其中：
S1001，显示表单，表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件。
本申请实施例中，用户点击第二控制组件实现删除一行的原理与用户点击第一控制组件实现新增一行的原理类似，具体可参见上述实施例的相关描述。
S1002，响应对至少一个控制组件中的第二控制组件的点击操作，若第二控制组件所控制的目标结构数据包括第二控制组件所属的目标显示区域中的所有结构数据，则在表单内容数据中删除目标结构数据，得到更新后的表单内容数据。
S1003，将表单中的目标显示区域以及目标显示区域所填充的目标结构数据删除，得到更新后的表单内容数据。
S1004，响应对至少一个控制组件中的第二控制组件的点击操作，若第二控制组件所控制的目标结构数据包括第二控制组件所属的目标显示区域中的部分结构数据，则在表单内容数据中删除目标结构数据，得到更新后的表单内容数据。
S1005，将表单中的第二控制组件对应的第二节点，第二节点的各个子孙节点以及用于填充目标结构数据的显示区域删除。
在一种实现方式中，在第二节点存在兄弟节点的情况下，在表单中删除兄弟节点以及该兄弟节点的子孙节点的未填充结构数据的一行显示区域。
在一种实现方式中，在第二节点的父节点存在兄弟节点的情况下，在表单中删除兄弟节点以及该兄弟节点的子孙节点的未填充结构数据的一行显示区域。
在一种实现方式中，若第二控制组件所属的目标显示区域中，第二控制组件对应的第二节点的数量为一个，则拒绝响应对第二控制组件的点击操作。
具体的，对于tableData数组中任一行数据而言，假设该行数据中的某个+/-号按钮所在节点的数量仅为一个，如果用户点击-号按钮，那么不会响应该-号按钮的点击操作，即不会实现删除一行。如图5所示，如果用户点击第二行中从左至右的第二个-号按钮，由于该-号按钮所在的节点在图5的第二行数据中的数量仅为一个，那么不会响应该-号按钮的点击操作，即不会实现删除该-号按钮所在的节点。
S1006，针对第二节点的任一祖先节点，将祖先节点的高度更新为祖先节点所在父容器的高度减去删除的显示区域的高度，得到更新后的表单内容数据。
S1007，显示更新后的表单。
本申请实施例中，在显示表单之后，可以响应对表单中某个第二控制组件的点击操作，基于该第二控制组件所控制的目标结构数据，对表单的表单内容数据进行更新，得到更新后的表单内容数据，然后基于更新后的表单内容数据，对表单进行更新，并显示更新后的表单，操作便捷，能够一键实现删除一行。
本申请实施例还提供了一种计算机存储介质，该计算机存储介质中存储有程序指令，该程序指令被执行时，用于实现上述实施例中描述的相应方法。
再请参见图11，图11是本申请实施例的提供一种表单控制装置的结构示意图。
本申请实施例的表单控制装置的一个实现方式中，表单控制装置包括如下结构。
显示单元1101，用于显示表单；其中，所述表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件；
处理单元1102，用于响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据；其中，所述表单内容数据包括所述至少一个结构数据；
所述处理单元1102，还用于基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单；
所述显示单元1101，还用于显示所述更新后的表单。
在一个实施例中，所述目标控制组件指的是用于新增结构数据的第一控制组件；
所述处理单元1102响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第一控制组件所控制的目标结构数据包括所述第一控制组件所属的目标显示区域中的所有结构数据，则在所述表单内容数据中所述目标结构数据的下方新增至少一个第一结构数据，得到所述更新后的表单内容数据；其中，所述至少一个第一结构数据与所述目标显示区域所填充的结构数据相同，且各个第一结构数据的结构关系与所述目标显示区域所填充的相应结构数据的结构关系相同；
所述处理单元1102基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
在所述表单中所述目标显示区域的下方新增一行显示区域，并基于所述至少一个第一结构数据的结构关系，在新增的显示区域填充所述至少一个第一结构数据，得到所述更新后的表单内容数据。
在一个实施例中，所述目标控制组件指的是用于新增结构数据的第一控制组件；
所述处理单元1102响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第一控制组件所控制的目标结构数据包括所述第一控制组件所属的目标显示区域中的部分结构数据，则在所述表单内容数据中所述目标结构数据的下方新增至少一个第二结构数据，得到所述更新后的表单内容数据；其中，所述至少一个第二结构数据包括与所述第一控制组件对应的第一节点相同的结构数据，以及与所述第一节点的各个子孙节点相同的结构数据；
所述处理单元1102基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
在所述表单中所述第一节点及其子孙节点的下方新增一行显示区域，并基于所述至少一个第二结构数据的结构关系，在新增的显示区域填充所述至少一个第二结构数据；
针对所述第一节点的任一祖先节点，将所述祖先节点的高度更新为所述祖先节点所在父容器的高度加上所述新增的显示区域的高度，得到所述更新后的表单内容数据。
在一个实施例中，所述处理单元1102还用于在所述第一节点存在兄弟节点的情况下，在所述兄弟节点以及所述兄弟节点的子孙节点的下方新增一行显示区域；其中，所述兄弟节点的下方新增的显示区域未填充结构数据。
在一个实施例中，所述处理单元1102还用于在所述第一节点的父节点存在兄弟节点的情况下，在所述兄弟节点以及所述兄弟节点的子孙节点的下方新增一行显示区域；其中，所述兄弟节点的下方新增的显示区域未填充结构数据。
在一个实施例中，所述目标控制组件指的是用于删除结构数据的第二控制组件；
所述处理单元1102响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第二控制组件所控制的目标结构数据包括所述第二控制组件所属的目标显示区域中的所有结构数据，则在所述表单内容数据中删除所述目标结构数据，得到所述更新后的表单内容数据；
所述处理单元1102基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
将所述表单中的所述目标显示区域以及所述目标显示区域所填充的目标结构数据删除，得到所述更新后的表单内容数据。
在一个实施例中，所述目标控制组件指的是用于删除结构数据的第二控制组件；
所述处理单元1102响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第二控制组件所控制的目标结构数据包括所述第二控制组件所属的目标显示区域中的部分结构数据，则在所述表单内容数据中删除所述目标结构数据，得到所述更新后的表单内容数据；
所述处理单元1102基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
将所述表单中的所述第二控制组件对应的第二节点，所述第二节点的各个子孙节点以及用于填充所述目标结构数据的显示区域删除；
针对所述第二节点的任一祖先节点，将所述祖先节点的高度更新为所述祖先节点所在父容器的高度减去删除的显示区域的高度，得到所述更新后的表单内容数据。
在一个实施例中，所述处理单元1102还用于在所述第二节点存在兄弟节点的情况下，在所述表单中删除所述兄弟节点以及所述兄弟节点的子孙节点的未填充结构数据的一行显示区域。
在一个实施例中，所述处理单元1102还用于在所述第二节点的父节点存在兄弟节点的情况下，在所述表单中删除所述兄弟节点以及所述兄弟节点的子孙节点的未填充结构数据的一行显示区域。
在一个实施例中，所述目标控制组件指的是用于删除结构数据的第二控制组件；所述处理单元1102还用于若所述第二控制组件所属的目标显示区域中，所述第二控制组件对应的第二节点的数量为一个，则拒绝响应对所述第二控制组件的点击操作。
本申请实施例中，通过显示单元1101显示表单，处理单元1102响应对至少一个控制组件中的目标控制组件的点击操作，基于目标控制组件所控制的目标结构数据，对表单的表单内容数据进行更新，得到更新后的表单内容数据；处理单元1102基于更新后的表单内容数据，对表单进行更新，得到更新后的表单，显示单元1101显示更新后的表单，操作便捷，能够高效地对表单进行控制。
再请参见图12，图12是本申请实施例提供的一种电子设备的结构示意图，本申请实施例的电子设备包括供电模块等结构，并包括处理器1201、存储装置1202以及通信接口1203。处理器1201、存储装置1202以及通信接口1203之间可以交互数据，由处理器1201实现相应的表单控制方法。
存储装置1202可以包括易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储装置1202也可以包括非易失性存储器(non-volatilememory)，例如快闪存储器(flash memory)，固态硬盘(solid-state drive，SSD)等；存储装置1202还可以包括上述种类的存储器的组合。
处理器1201可以是中央处理器(central processing unit，CPU)。处理器1201也可以是由CPU和GPU的组合。在服务器中，可以根据需要包括多个CPU和GPU进行相应的表单控制。在一个实施例中，存储装置1202用于存储程序指令。处理器1201可以调用程序指令，实现如本申请实施例中上述涉及的各种方法。
在第一个可能的实施方式中，电子设备的处理器1201，调用存储装置1202中存储的程序指令，用于通过通信接口1203显示表单；其中，所述表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件；响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据；其中，所述表单内容数据包括所述至少一个结构数据；基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单；通过通信接口1203显示所述更新后的表单。
在一个实施例中，所述目标控制组件指的是用于新增结构数据的第一控制组件；
所述处理器1201在响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据时，可以执行如下操作：
若所述第一控制组件所控制的目标结构数据包括所述第一控制组件所属的目标显示区域中的所有结构数据，则在所述表单内容数据中所述目标结构数据的下方新增至少一个第一结构数据，得到所述更新后的表单内容数据；其中，所述至少一个第一结构数据与所述目标显示区域所填充的结构数据相同，且各个第一结构数据的结构关系与所述目标显示区域所填充的相应结构数据的结构关系相同；
所述处理器1201在基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单时，可以执行如下操作：
在所述表单中所述目标显示区域的下方新增一行显示区域，并基于所述至少一个第一结构数据的结构关系，在新增的显示区域填充所述至少一个第一结构数据，得到所述更新后的表单内容数据。
在一个实施例中，所述目标控制组件指的是用于新增结构数据的第一控制组件；
所述处理器1201在响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据时，可以执行如下操作：
若所述第一控制组件所控制的目标结构数据包括所述第一控制组件所属的目标显示区域中的部分结构数据，则在所述表单内容数据中所述目标结构数据的下方新增至少一个第二结构数据，得到所述更新后的表单内容数据；其中，所述至少一个第二结构数据包括与所述第一控制组件对应的第一节点相同的结构数据，以及与所述第一节点的各个子孙节点相同的结构数据；
所述处理器1201在基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单时，可以执行如下操作：
在所述表单中所述第一节点及其子孙节点的下方新增一行显示区域，并基于所述至少一个第二结构数据的结构关系，在新增的显示区域填充所述至少一个第二结构数据；
针对所述第一节点的任一祖先节点，将所述祖先节点的高度更新为所述祖先节点所在父容器的高度加上所述新增的显示区域的高度，得到所述更新后的表单内容数据。
在一个实施例中，所述处理器1201还用于执行如下操作：
在所述第一节点存在兄弟节点的情况下，在所述兄弟节点以及所述兄弟节点的子孙节点的下方新增一行显示区域；其中，所述兄弟节点的下方新增的显示区域未填充结构数据。
在一个实施例中，所述处理器1201还用于执行如下操作：
在所述第一节点的父节点存在兄弟节点的情况下，在所述兄弟节点以及所述兄弟节点的子孙节点的下方新增一行显示区域；其中，所述兄弟节点的下方新增的显示区域未填充结构数据。
在一个实施例中，所述目标控制组件指的是用于删除结构数据的第二控制组件；
所述处理器1201在响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据时，用于执行如下操作：
若所述第二控制组件所控制的目标结构数据包括所述第二控制组件所属的目标显示区域中的所有结构数据，则在所述表单内容数据中删除所述目标结构数据，得到所述更新后的表单内容数据；
所述处理器1201在基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单时，用于执行如下操作：
将所述表单中的所述目标显示区域以及所述目标显示区域所填充的目标结构数据删除，得到所述更新后的表单内容数据。
在一个实施例中，所述目标控制组件指的是用于删除结构数据的第二控制组件；
所述处理器1201在响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据时，用于执行如下操作：
若所述第二控制组件所控制的目标结构数据包括所述第二控制组件所属的目标显示区域中的部分结构数据，则在所述表单内容数据中删除所述目标结构数据，得到所述更新后的表单内容数据；
所述处理器1201在基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单时，用于执行如下操作：
将所述表单中的所述第二控制组件对应的第二节点，所述第二节点的各个子孙节点以及用于填充所述目标结构数据的显示区域删除；
针对所述第二节点的任一祖先节点，将所述祖先节点的高度更新为所述祖先节点所在父容器的高度减去删除的显示区域的高度，得到所述更新后的表单内容数据。
在一个实施例中，所述处理器1201还用于执行如下操作：
在所述第二节点存在兄弟节点的情况下，在所述表单中删除所述兄弟节点以及所述兄弟节点的子孙节点的未填充结构数据的一行显示区域。
在一个实施例中，所述处理器1201还用于执行如下操作：
在所述第二节点的父节点存在兄弟节点的情况下，在所述表单中删除所述兄弟节点以及所述兄弟节点的子孙节点的未填充结构数据的一行显示区域。
在一个实施例中，所述目标控制组件指的是用于删除结构数据的第二控制组件；所述处理器1201还用于执行如下操作：
若所述第二控制组件所属的目标显示区域中，所述第二控制组件对应的第二节点的数量为一个，则拒绝响应对所述第二控制组件的点击操作。
本申请实施例中，处理器1201通过通信接口1203显示表单，响应对至少一个控制组件中的目标控制组件的点击操作，基于目标控制组件所控制的目标结构数据，对表单的表单内容数据进行更新，得到更新后的表单内容数据；基于更新后的表单内容数据，对表单进行更新，得到更新后的表单，通过通信接口1203显示更新后的表单，操作便捷，能够高效地对表单进行控制。
本领域普通技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成的，计算机程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，计算机可读取存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(RandomAccess Memory，RAM)等。计算机可读存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。
以上所揭露的仅为本申请的部分实施例而已，当然不能以此来限定本申请之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本申请权利要求所作的等同变化，仍属于本发明所涵盖的范围。
Claims (13)
1.一种表单控制方法，其特征在于，包括：
显示表单；其中，所述表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件；
响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据；其中，所述表单内容数据包括所述至少一个结构数据；
基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单；
显示所述更新后的表单。
2.根据权利要求1所述的方法，其特征在于，所述目标控制组件指的是用于新增结构数据的第一控制组件；
所述响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第一控制组件所控制的目标结构数据包括所述第一控制组件所属的目标显示区域中的所有结构数据，则在所述表单内容数据中所述目标结构数据的下方新增至少一个第一结构数据，得到所述更新后的表单内容数据；其中，所述至少一个第一结构数据与所述目标显示区域所填充的结构数据相同，且各个第一结构数据的结构关系与所述目标显示区域所填充的相应结构数据的结构关系相同；
所述基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
在所述表单中所述目标显示区域的下方新增一行显示区域，并基于所述至少一个第一结构数据的结构关系，在新增的显示区域填充所述至少一个第一结构数据，得到所述更新后的表单内容数据。
3.根据权利要求1所述的方法，其特征在于，所述目标控制组件指的是用于新增结构数据的第一控制组件；
所述响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第一控制组件所控制的目标结构数据包括所述第一控制组件所属的目标显示区域中的部分结构数据，则在所述表单内容数据中所述目标结构数据的下方新增至少一个第二结构数据，得到所述更新后的表单内容数据；其中，所述至少一个第二结构数据包括与所述第一控制组件对应的第一节点相同的结构数据，以及与所述第一节点的各个子孙节点相同的结构数据；
所述基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
在所述表单中所述第一节点及其子孙节点的下方新增一行显示区域，并基于所述至少一个第二结构数据的结构关系，在新增的显示区域填充所述至少一个第二结构数据；
针对所述第一节点的任一祖先节点，将所述祖先节点的高度更新为所述祖先节点所在父容器的高度加上所述新增的显示区域的高度，得到所述更新后的表单内容数据。
4.根据权利要求3所述的方法，其特征在于，所述方法还包括：
在所述第一节点存在兄弟节点的情况下，在所述兄弟节点以及所述兄弟节点的子孙节点的下方新增一行显示区域；其中，所述兄弟节点的下方新增的显示区域未填充结构数据。
5.根据权利要求3所述的方法，其特征在于，所述方法还包括：
在所述第一节点的父节点存在兄弟节点的情况下，在所述兄弟节点以及所述兄弟节点的子孙节点的下方新增一行显示区域；其中，所述兄弟节点的下方新增的显示区域未填充结构数据。
6.根据权利要求1所述的方法，其特征在于，所述目标控制组件指的是用于删除结构数据的第二控制组件；
所述响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第二控制组件所控制的目标结构数据包括所述第二控制组件所属的目标显示区域中的所有结构数据，则在所述表单内容数据中删除所述目标结构数据，得到所述更新后的表单内容数据；
所述基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
将所述表单中的所述目标显示区域以及所述目标显示区域所填充的目标结构数据删除，得到所述更新后的表单内容数据。
7.根据权利要求1所述的方法，其特征在于，所述目标控制组件指的是用于删除结构数据的第二控制组件；
所述响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据，包括：
若所述第二控制组件所控制的目标结构数据包括所述第二控制组件所属的目标显示区域中的部分结构数据，则在所述表单内容数据中删除所述目标结构数据，得到所述更新后的表单内容数据；
所述基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单，包括：
将所述表单中的所述第二控制组件对应的第二节点，所述第二节点的各个子孙节点以及用于填充所述目标结构数据的显示区域删除；
针对所述第二节点的任一祖先节点，将所述祖先节点的高度更新为所述祖先节点所在父容器的高度减去删除的显示区域的高度，得到所述更新后的表单内容数据。
8.根据权利要求7所述的方法，其特征在于，所述方法还包括：
在所述第二节点存在兄弟节点的情况下，在所述表单中删除所述兄弟节点以及所述兄弟节点的子孙节点的未填充结构数据的一行显示区域。
9.根据权利要求7所述的方法，其特征在于，所述方法还包括：
在所述第二节点的父节点存在兄弟节点的情况下，在所述表单中删除所述兄弟节点以及所述兄弟节点的子孙节点的未填充结构数据的一行显示区域。
10.根据权利要求1所述的方法，其特征在于，所述目标控制组件指的是用于删除结构数据的第二控制组件；所述方法还包括：
若所述第二控制组件所属的目标显示区域中，所述第二控制组件对应的第二节点的数量为一个，则拒绝响应对所述第二控制组件的点击操作。
11.一种表单控制装置，其特征在于，所述装置包括：
显示单元，用于显示表单；其中，所述表单包括至少一行显示区域，任一行显示区域填充有至少一个结构数据以及至少一个控制组件；
处理单元，用于响应对所述至少一个控制组件中的目标控制组件的点击操作，基于所述目标控制组件所控制的目标结构数据，对所述表单的表单内容数据进行更新，得到更新后的表单内容数据；其中，所述表单内容数据包括所述至少一个结构数据；
所述处理单元，还用于基于所述更新后的表单内容数据，对所述表单进行更新，得到更新后的表单；
所述显示单元，还用于显示所述更新后的表单。
12.一种电子设备，其特征在于，所述电子设备包括处理器、存储装置和通信接口，所述处理器、存储装置和通信接口相互连接，其中：
所述存储装置，用于存储计算机程序，所述计算机程序包括程序指令；
所述处理器，用于调用所述程序指令，执行如权利要求1至10任一项所述的表单控制方法。
13.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，所述计算机程序包括程序指令，所述程序指令被处理器执行时，用于执行如权利要求1至10任一项所述的表单控制方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311467273.2A CN117521608A (zh) | 2023-11-06 | 2023-11-06 | 表单控制方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311467273.2A CN117521608A (zh) | 2023-11-06 | 2023-11-06 | 表单控制方法、装置、设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117521608A true CN117521608A (zh) | 2024-02-06 |
Family
ID=89765575
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311467273.2A Pending CN117521608A (zh) | 2023-11-06 | 2023-11-06 | 表单控制方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117521608A (zh) |
-
2023
- 2023-11-06 CN CN202311467273.2A patent/CN117521608A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP7354294B2 (ja) | 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法 | |
| US9792354B2 (en) | Context aware user interface parts | |
| CN109614424B (zh) | 页面布局生成方法、装置、计算设备和介质 | |
| CN111552473A (zh) | 一种应用程序的处理方法、装置及设备 | |
| US20150324453A1 (en) | Representation of datasets using view-specific visual bundlers | |
| CN109408764B (zh) | 页面区域划分方法、装置、计算设备和介质 | |
| US8732615B2 (en) | Unified interface for display and modification of data arrays | |
| US20080303827A1 (en) | Methods and Systems for Animating Displayed Representations of Data Items | |
| US10089372B2 (en) | Data visualization using level of detail magnification | |
| US8836704B2 (en) | Automatic tree restriction | |
| KR20120135243A (ko) | 공유가능한 사용자 인터페이스를 이용해 정보를 구성하는 방법 및 시스템 | |
| US20080303826A1 (en) | Methods and Systems for Animating Displayed Representations of Data Items | |
| US20200394055A1 (en) | System and method for providing a configurable user interface using a self-describing data system | |
| US7404176B2 (en) | Creating and using nested context structures | |
| CN111857718A (zh) | 列表的编辑方法、装置、设备及存储介质 | |
| US10776351B2 (en) | Automatic core data service view generator | |
| CN112527288B (zh) | 可生成代码的可视化系统原型设计方法、系统及存储介质 | |
| US7900159B2 (en) | Techniques for representing and organizing user interface data | |
| US20240037325A1 (en) | Ability to add non-direct ancestor columns in child spreadsheets | |
| CN117521608A (zh) | 表单控制方法、装置、设备及存储介质 | |
| CN114090666A (zh) | 幻灯片显示方法、装置、设备以及存储介质 | |
| CN114722112A (zh) | 一种可视化列表数据展示方法及其装置 | |
| US11093572B2 (en) | Hierarchical modeling for network sites | |
| US11816320B2 (en) | Paginated growing widgets | |
| CN113763497B (zh) | 链接关系管理方法、装置、计算机设备和存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |