隶属关系展示方法、装置、电子设备和存储介质制造方法及图纸

本申请实施例提供的隶属关系展示方法、装置、电子设备和存储介质，通过CSS语言构建用于展示父级输入框和子级输入框的隶属关系的折线，并将该构建好的折线设置在父级输入框和子级输入框的相应位置上，从而可以实现对父级输入框和子级输入框的隶属关系的展示。当父级输入框或子级输入框的行高变化时，通过修改CSS语言的代码即可修改折线的尺寸，以使该折线与父级输入框及子级输入框匹配。

Method, device, electronic equipment and storage medium of membership relationship display

【技术实现步骤摘要】
隶属关系展示方法、装置、电子设备和存储介质
本申请涉及网页
，具体而言，涉及一种隶属关系展示方法、装置、电子设备和存储介质。
技术介绍
随着网页技术的不断发展，网页应用的使用场景越来越复杂。例如通过网页对用户可以在网页的输入框中输入的含有隶属关系的数据进行展示。网页在提供相应的展示界面时，需要展示数据输入框之间的隶属关系，一般来说是使用折线表示输入框之间的关系。目前常见的一种方式是使用图片的方式展示用于表示输入框之间的关系的折线，但由于不同的隶属关系所需要使用的折线是不同的，因此需要准备较多种不同的图片，同时，若使用图片的形式展示折线，则输入框的行高无法修改，若修改了输入框的行高，则需要重新制作折线图片。
技术实现思路
有鉴于此，本申请的目的在于提供隶属关系展示方法、装置、电子设备和存储介质。第一方面，实施例提供一种隶属关系展示方法，应用于电子设备，所述方法包括：设置至少一个父级输入框及与所述父级输入框并列设置的至少一个子级输入框，其中，所述父级输入框的宽度大于所述子级输入框的宽度，且所述父级输入框的一端与所述子级输入框的一端齐平；通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，其中，所述折线的尺寸能够通过修改所述CSS语言进行修改；将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端。在可选的实施方式中，通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，包括：通过CSS语言构建L型折线，其中，所述L型折线的第一线段的长度小于所述父级输入框与所述子级输入框的宽度差，所述L型折线的第二线段的长度为子级输入框的行高及相邻两个子级输入框之间的间隙高度之和。在可选的实施方式中，通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，包括：通过CSS语言构建L型折线，其中，所述L型折线的第一线段的长度为所述父级输入框与所述子级输入框的宽度差的一半，所述L型折线的第二线段的长度为子级输入框的行高及相邻两个子级输入框之间的间隙高度之和。在可选的实施方式中，将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端，包括：将所述L型折线的一端连接各所述子级输入框的一端，所述L型折线的另一端连接另一折线或所述父级输入框。在可选的实施方式中，所述子级输入框包括相互平行的第一边及第二边，其中，所述第一边位于所述第二边与所述父级输入框之间，所述将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端，包括：根据所述子级输入框的位置将所述L型折线设置在所述子级输入框未与所述父级输入框齐平的一端，且所述L型折线的第一线段位于所述子级输入框的第二边所在的直线上；将所述L型折线沿所述子级输入框行高所在的方向朝向所述父级输入框移动，以使所述第一线段所在直线位于所述子级输入框的第一边所在直线及第二边所在直线之间。在可选的实施方式中，所述将所述L型折线沿所述子级输入框行高所在的方向朝向所述父级输入框移动，包括：将所述L型折线沿所述子级输入框行高所在的方向朝向所述父级输入框移动半个所述子级输入框的行高的距离。第二方面，实施例提供一种隶属关系展示装置，应用于电子设备，所述装置包括：输入框设置模块，用于设置至少一个父级输入框及与所述父级输入框并列设置的至少一个子级输入框，其中，所述父级输入框的宽度大于所述子级输入框的宽度，且所述父级输入框的一端与所述子级输入框的一端齐平；折线构建模块，用于通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，其中，所述折线的尺寸能够通过修改所述CSS语言进行修改；折线位置确定模块，用于将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端。在可选的实施方式中，所述折线构建模块具体用于：通过CSS语言构建L型折线，其中，所述L型折线的第一线段的长度小于所述父级输入框与所述子级输入框的宽度差，所述L型折线的第二线段的长度为子级输入框的行高及相邻两个子级输入框之间的间隙高度之和。第三方面，实施例提供一种电子设备，包括处理器及存储有计算机指令的非易失性存储器，所述计算机指令被所述处理器执行时，所述电子设备执行前述实施方式中任意一项所述的隶属关系展示方法。第四方面，实施例提供一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序被执行时实现前述实施方式中任意一项所述的隶属关系展示方法。本申请的有益效果：本申请实施例提供的隶属关系展示方法、装置、电子设备和存储介质，通过CSS语言构建用于展示父级输入框和子级输入框的隶属关系的折线，并将该构建好的折线设置在父级输入框和子级输入框的相应位置上，从而可以实现对父级输入框和子级输入框的隶属关系的展示。当父级输入框或子级输入框的行高变化时，通过修改CSS语言的代码即可修改折线的尺寸，以使该折线与父级输入框及子级输入框匹配。为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。附图说明为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。图1为
技术介绍
提供的一种使用图片进行隶属关系展示的示意图；图2为本申请实施例提供的电子设备的结构示意图；图3为本申请实施例提供的应用于图2中电子设备的隶属关系展示方法的流程图；图4为本申请实施例提供的父级输入框和子级输入框的示意图；图5为申请实施例提供的L型折线的示意图；图6为本申请实施例提供的图3中的步骤S330的子步骤流程图；图7为本申请实施例的图6中子步骤S3301及子步骤S3302提供L型折线设置示意图；图8为本申请实施例提供的隶属关系展示装置的功能模块图。主要元件符号说明：100-电子设备；110-隶属关系展示装置；120-存储器；130-处理器；1101-输入框设置模块；1102-折线构建模块；1103-折线位置确定模块；21-父级输入框；22-子级输入框；211-父级输入框的第一端；212-父级输入框的第二端；221-子级输入框的第一端；222-子级输入框的第二端；223-第一边；224-第二边；231-第一线段；232-第二线段。具体实施方式为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并本文档来自技高网...

【技术保护点】
1.一种隶属关系展示方法，其特征在于，应用于电子设备，所述方法包括：/n设置至少一个父级输入框及与所述父级输入框并列设置的至少一个子级输入框，其中，所述父级输入框的宽度大于所述子级输入框的宽度，且所述父级输入框的一端与所述子级输入框的一端齐平；/n通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，其中，所述折线的尺寸能够通过修改所述CSS语言进行修改；/n将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端。/n

【技术特征摘要】
1.一种隶属关系展示方法，其特征在于，应用于电子设备，所述方法包括：
设置至少一个父级输入框及与所述父级输入框并列设置的至少一个子级输入框，其中，所述父级输入框的宽度大于所述子级输入框的宽度，且所述父级输入框的一端与所述子级输入框的一端齐平；
通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，其中，所述折线的尺寸能够通过修改所述CSS语言进行修改；
将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端。


2.根据权利要求1所述的方法，其特征在于，通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，包括：
通过CSS语言构建L型折线，其中，所述L型折线的第一线段的长度小于所述父级输入框与所述子级输入框的宽度差，所述L型折线的第二线段的长度为子级输入框的行高及相邻两个子级输入框之间的间隙高度之和。


3.根据权利要求1所述的方法，其特征在于，通过CSS语言构建用于展示所述父级输入框和所述子级输入框的隶属关系的折线，包括：
通过CSS语言构建L型折线，其中，所述L型折线的第一线段的长度为所述父级输入框与所述子级输入框的宽度差的一半，所述L型折线的第二线段的长度为子级输入框的行高及相邻两个子级输入框之间的间隙高度之和。


4.根据权利要求2或3所述的方法，其特征在于，将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端，包括：
将所述L型折线的一端连接各所述子级输入框的一端，所述L型折线的另一端连接另一L型折线或所述父级输入框。


5.根据权利要求2或3所述的方法，其特征在于，所述子级输入框包括相互平行的第一边及第二边，其中，所述第一边位于所述第二边与所述父级输入框之间，所述将所述折线设置在各所述子级输入框与所述父级输入框存在宽度差的一端，包括：
根据所述子级输入框的位置将所述L型折线设置在所述...

【专利技术属性】
技术研发人员：陈玖，
申请(专利权)人：北京明略软件系统有限公司，
类型：发明
国别省市：北京;11