CN112099787A - 一种通过单选框实现级联选择的方法及终端 - Google Patents
一种通过单选框实现级联选择的方法及终端 Download PDFInfo
- Publication number
- CN112099787A CN112099787A CN202010871090.7A CN202010871090A CN112099787A CN 112099787 A CN112099787 A CN 112099787A CN 202010871090 A CN202010871090 A CN 202010871090A CN 112099787 A CN112099787 A CN 112099787A
- Authority
- CN
- China
- Prior art keywords
- radio
- box
- radio box
- selection information
- array
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Mobile Radio Communication Systems (AREA)
Abstract
本发明提供了一种通过单选框实现级联选择的方法及终端，创建与待选项一一对应的单选框，将所述单选框按照所述待选项之间的关系整理成树形结构；将同一父节点下的所有子节点所对应的子单选框存储在同一个数组中，并存储所述数组与对应的所述父节点中父单选框的对应关系；接收选择信息，判断所述选择信息所对应的单选框是否为父单选框，若是，则渲染所述数组中的子单选框；通过存储单选框之间的级联关系，根据单选框之间的级联关系及接收的选择信息对单选框进行选择渲染，实现通过单选框完成级联选择。
Description
技术领域
本发明涉及前端开发领域，尤其涉及一种通过单选框实现级联选择的方法及终端。
背景技术
在基于React框架的前端开发中，若需要用户选择级联数据，通常采用select选择器或Cascader级联选择器实现，但其排布方式较固定，如select选择器无法让用户看到所有的选项，若级联的带选项较少，用户体验不佳；Cascader级联选择器是在同一个浮层中完成选择，排布不灵活，无法适应多样的前端界面设计。
发明内容
本发明所要解决的技术问题是：提供一种通过单选框实现级联选择的方法及终端，实现通过单选框的级联选择，提高前端布局的灵活性。
为了解决上述技术问题，本发明采用的一种技术方案为：
一种通过单选框实现级联选择的方法，包括步骤：
S1、创建与待选项一一对应的单选框，将所述单选框按照所述待选项之间的关系整理成树形结构；
S2、将同一父节点下的所有子节点所对应的子单选框存储在同一个数组中，并存储所述数组与对应的所述父节点中父单选框的对应关系；
S3、接收选择信息，判断所述选择信息所对应的单选框是否为父单选框，若是，则渲染所述数组中的子单选框。
为了解决上述技术问题，本发明采用的另一种技术方案为：
一种通过单选框实现级联选择的终端，包括存储器、处理器及存储在存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
S1、创建与待选项一一对应的单选框，将所述单选框按照所述待选项之间的关系整理成树形结构；
S2、将同一父节点下的所有子节点所对应的子单选框存储在同一个数组中，并存储所述数组与对应的所述父节点中父单选框的对应关系；
S3、接收选择信息，判断所述选择信息所对应的单选框是否为父单选框，若是，则渲染所述数组中的子单选框。
本发明的有益效果在于：通过创建与待选项数目相同的单选框，并通过树形结构表示各个待选项之间的关系，即能得到各个单选框之间的关系，并将对应同一父节点的子节点中的子单选框存储在同一个数组中，同时存储数组与父节点中父单选框的对应关系，在接收选择信息时，若选择信息对应的单选框为父单选框，则继续渲染其对应的数组中的子单选框；实现了通过单选框实现数据的级联选择，并且单选框的排布更加灵活，增加了前端布局的多样性。
附图说明
图1为本发明实施例的一种通过单选框实现级联选择的方法的步骤流程图；
图2为本发明实施例的一种通过单选框实现级联选择的终端的结构示意图；
图3为本发明实施例的单选框存储结构示意图；
图4为本发明实施例的一种通过单选框实现级联选择的方法在实际应用场景中的流程图；
图5为本发明实施例的一种通过单选框实现级联选择的方法在React中实现效果图；
标号说明：
1、一种通过单选框实现级联选择的终端；2、处理器；3、存储器。
具体实施方式
为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
请参照图1及图3-图5，一种通过单选框实现级联选择的方法，包括步骤：
S1、创建与待选项一一对应的单选框，将所述单选框按照所述待选项之间的关系整理成树形结构；
S2、将同一父节点下的所有子节点所对应的子单选框存储在同一个数组中，并存储所述数组与对应的所述父节点中父单选框的对应关系；
S3、接收选择信息，判断所述选择信息所对应的单选框是否为父单选框，若是，则渲染所述数组中的子单选框。
从上述描述可知，本发明的有益效果在于：通过创建与待选项数目相同的单选框，并通过树形结构表示各个待选项之间的关系，即能得到各个单选框之间的关系，并将对应同一父节点的子节点中的子单选框存储在同一个数组中，同时存储数组与父节点中父单选框的对应关系，在接收选择信息时，若选择信息对应的单选框为父单选框，则继续渲染其对应的数组中的子单选框；实现了通过单选框实现数据的级联选择，并且单选框的排布更加灵活，增加了前端布局的多样性。
进一步的，所述S1中所述单选框包括单选框标识及单选框名，所述单选框名与所述待选项的值相同；
所述S3具体为：
接收选择信息，获取所述选择信息所对应的第一单选框标识；
判断所述第一单选框标识所对应的第一单选框是否有对应的所述数组，若有，则所述第一单选框为父单选框，获取所述第一单选框对应的所述数组中的子单选框；
渲染所述子单选框。
由上述描述可知，单选框包括单选框标识及单选框名，设置单选框标识便于对单选框进行存储及调取，设置单选框名能够显示待选项的值，提示用户做出选择，在接收用户的选择信息后，判断选择信息所对应的单选框是否有对应的数组，若有，则说明此单选框有关联级联数据，则渲染其对应的数组中的单选框，实现采用单选框的级联。
进一步的，所述S3之前还包括：
渲染所述树形结构根节点中的所有单选框。
由上述描述可知，最开始渲染单选框时，因此时并无待选的单选框，故首先渲染出树形结构根节点中的所有单选框，再接收用户对渲染出的单选框的选择信息，实现后续步骤，即此时为渲染级联数据的第一层。
进一步的，所述S1还包括：
为所述树形结构的每一层分别分配标签；
所述S3还包括：
渲染所述子单选框所在层级的标签。
由上述描述可知，为树形结构的每一层分别分配标签，在渲染子单选框时，也渲染子单选框所在层的标签，能够清晰地提示用户进行选项的选择。
进一步的，所述S3中所述选择信息所对应的单选框不是父单选框时，则完成渲染，并返回已接收的所述选择信息所对应的单选框的值。
由上述描述可知，当接收的选择信息所对应的单选框不是父单选框时，说明已不存在下一层级的级联数据需要用户进行选择，此时接收到的所有选择信息所对应的单选框的值即为用户最终的选择值，不仅在界面上实现了通过单选框的级联选择，并且也能够与正常的级联选择器一样返回数据以供使用，实现完整意义的单选框构建的级联选择组件。
请参照图2，一种通过单选框实现级联选择的终端，包括存储器、处理器及存储在存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
S1、创建与待选项一一对应的单选框，将所述单选框按照所述待选项之间的关系整理成树形结构；
S2、将同一父节点下的所有子节点所对应的子单选框存储在同一个数组中，并存储所述数组与对应的所述父节点中父单选框的对应关系；
S3、接收选择信息，判断所述选择信息所对应的单选框是否为父单选框，若是，则渲染所述数组中的子单选框。
本发明的有益效果在于：通过创建与待选项数目相同的单选框，并通过树形结构表示各个待选项之间的关系，即能得到各个单选框之间的关系，并将对应同一父节点的子节点中的子单选框存储在同一个数组中，同时存储数组与父节点中父单选框的对应关系，在接收选择信息时，若选择信息对应的单选框为父单选框，则继续渲染其对应的数组中的子单选框；实现了通过单选框实现数据的级联选择，并且单选框的排布更加灵活，增加了前端布局的多样性。
进一步的，所述S1中所述单选框包括单选框标识及单选框名，所述单选框名与所述待选项的值相同；
所述S3具体为：
接收选择信息，获取所述选择信息所对应的第一单选框标识；
判断所述第一单选框标识所对应的第一单选框是否有对应的所述数组，若有，则所述第一单选框为父单选框，获取所述第一单选框对应的所述数组中的子单选框；
渲染所述子单选框。
由上述描述可知，单选框包括单选框标识及单选框名，设置单选框标识便于对单选框进行存储及调取，设置单选框名能够显示待选项的值，提示用户做出选择，在接收用户的选择信息后，判断选择信息所对应的单选框是否有对应的数组，若有，则说明此单选框有关联级联数据，则渲染其对应的数组中的单选框，实现采用单选框的级联。
进一步的，所述S3之前还包括：
渲染所述树形结构根节点中的所有单选框。
由上述描述可知，最开始渲染单选框时，因此时并无待选的单选框，故首先渲染出树形结构根节点中的所有单选框，再接收用户对渲染出的单选框的选择信息，实现后续步骤，即此时为渲染级联数据的第一层。
进一步的，所述S1还包括：
为所述树形结构的每一层分别分配标签；
所述S3还包括：
渲染所述子单选框所在层级的标签。
由上述描述可知，为树形结构的每一层分别分配标签，在渲染子单选框时，也渲染子单选框所在层的标签，能够清晰地提示用户进行选项的选择。
进一步的，所述S3中所述选择信息所对应的单选框不是父单选框时，则完成渲染，并返回已接收的所述选择信息所对应的单选框的值。
由上述描述可知，当接收的选择信息所对应的单选框不是父单选框时，说明已不存在下一层级的级联数据需要用户进行选择，此时接收到的所有选择信息所对应的单选框的值即为用户最终的选择值，不仅在界面上实现了通过单选框的级联选择，并且也能够与正常的级联选择器一样返回数据以供使用，实现完整意义的单选框构建的级联选择组件。
请参照图1，本发明的实施例一为：
一种通过单选框实现级联选择的方法，具体包括：
S1、创建与待选项一一对应的单选框，将所述单选框按照所述待选项之间的关系整理成树形结构；
在本实施例中，单选框包括单选框标识、单选框名及单选框的值，单选框名与单选框的值和单选框对应的待选项的值相同；
在步骤S1中还包括为树形结构的每一层分别分配标签；
S2、将同一父节点下的所有子节点所对应的子单选框存储在同一个数组中，并存储所述数组与对应的所述父节点中父单选框的对应关系；
S3、渲染所述树形结构根节点中的所有单选框；
S4、接收选择信息，判断所述选择信息所对应的单选框是否为父单选框，若是，则渲染所述数组中的子单选框；
具体为：接收选择信息，获取所述选择信息所对应的第一单选框标识；
判断所述第一单选框标识所对应的第一单选框是否有对应的所述数组，若有，则所述第一单选框为父单选框，获取所述第一单选框对应的所述数组中的子单选框并渲染所述子单选框；
渲染子单选框所在层级的标签；
若选择信息所对应的单选框不是父单选框，则完成渲染，并返回已接收的选择信息所对应的单选框的值。
请参照图3至图5，本发明的实施例二为：
一种通过单选框实现级联选择的方法，将上述的一种通过单选框实现级联选择的方法应用于实际场景中：
S1、在React框架中，创建与待选项一一对应的单选框radio，并将单选框radio按照待选项之间的关系整理成树形结构；
请参照图5，待选项包括初中、高中、物理、化学、北京教育出版社、上海教育出版社、江苏教育出版社、八年级上册及八年级下册共9项，则创建9个对应的单选框radio；此处共有两树形结构，一种是初中-物理/化学、化学-北京教育出版社/上海教育出版社/江苏教育出版社、北京教育出版社-八年级上册/八年级下册；另一种是高中；初中和高中分别为不同树形结构的根节点，第一层级包括初中及高中且标签为学段，第二层级包括物理及化学且标签为学科，第三层级包括北京教育出版社、上海教育出版社及江苏教育出版社且标签为版本，第四层级包括八年级上册及八年级下册且标签为年级；
在一种可选的实施方式中，单选框标识、单选框名及单选框的值都与待选项的值相同；
S2、请参照图3，存储单选框信息，单选框信息包括单选框名(radioName)、单选框标识(radioName)及单选框所对应的子单选框(cascaderDatas)；
单选框所对应的所有位于此单选框下一层级中的子单选框存储在数组(CascaderDatasType[])中，若单选框非父单选框，则此数组为空；
如单选框初中所对应的数组中存储有单选框物理和单选框化学，单选框高中所对应的数组为空；
S3、渲染树形结构根节点中的所有单选框，在本实施例中，即渲染单选框初中及单选框高中，并渲染第一层级的标签学段；
S4、接收选择信息，判断选择信息所对应的单选框是否为父单选框，若是，则渲染数组中的子单选框；否则，完成渲染，并返回已接收的选择信息所对应的单选框的值；
请参照图4，S41、接收选择信息后，判断选择信息所对应的单选框的单选框信息中单选框对应的子单选框(cascaderDatas)是否为空；若是，则直接返回空，并返回已接收的选择信息所对应的单选框的值；
S42、否则，则渲染子单选框，并返回S41；
请参照图5，如接收的第一选择信息所对应的单选框为单选框初中，则渲染数组中的子单选框：单选框物理及单选框化学，并渲染单选框物理及单选框化学所在的第二层级的标签学科；再次接收第二选择信息，若第二选择信息所对应的单选框为单选框物理，则其对应的子单选框为空，返回空及单选框初中和单选框物理的值；若第二选择信息所对应的单选框为化学，则渲染其对应的子单选框：单选框北京教育出版社、单选框上海教育出版社及单选框江苏教育出版社，并渲染其对应的第三层级的标签版本；接收第三选择信息，若第三选择信息所对应的单选框为单选框北京教育出版社，则渲染其对应的子单选框：八年级上册单选框及八年级下册单选框，并渲染其对应的第四层级的标签年级；接收第四选择信息，若第四选择信息所对应的单选框为单选框八年级上册，单选框八年级上册所对应的数组为空，则渲染完成，返回空及单选框初中单选框化学、单选框北京教育出版社和单选框八年级上册的值。
请参照图2，本发明的实施例三为：
一种通过单选框实现级联选择的终端1，包括处理器2、存储器3及存储在存储器3上并可在所述处理器2上运行的计算机程序，所述处理器2执行所述计算机程序时实现实施例一或实施例二中的各个步骤。
综上所述，本发明提供了一种通过单选框实现级联选择的方法及终端，创建与所有待选项一一对应的单选框，并将单选框按照待选项之间的关系整理成树形结构，为树形结构中不同层级分配相对应的标签，从树形结构的根节点开始渲染，每渲染完一个层级，就接收相应的选择信息，并判断选择信息所对应的单选框所对应的子单选框是否为空，若为空，则输出当前已接收的所有选择信息所对应的单选框的值并完成渲染；若不为空，则渲染单选框对应的所有子单选框；通过存储单选框之间的级联关系，根据单选框之间的级联关系及接受的选择信息选择单选框进行渲染，实现通过单选框完成数据的级联选择，为实现级联选择提供了新的思路，使前端的界面布局更加灵活。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种通过单选框实现级联选择的方法，其特征在于，包括步骤：
S1、创建与待选项一一对应的单选框，将所述单选框按照所述待选项之间的关系整理成树形结构；
S2、将同一父节点下的所有子节点所对应的子单选框存储在同一个数组中，并存储所述数组与对应的所述父节点中父单选框的对应关系；
S3、接收选择信息，判断所述选择信息所对应的单选框是否为父单选框，若是，则渲染所述数组中的子单选框。
2.根据权利要求1所述的一种通过单选框实现级联选择的方法，其特征在于，所述S1中所述单选框包括单选框标识及单选框名，所述单选框名与所述待选项的值相同；
所述S3具体为：
接收选择信息，获取所述选择信息所对应的第一单选框标识；
判断所述第一单选框标识所对应的第一单选框是否有对应的所述数组，若有，则所述第一单选框为父单选框，获取所述第一单选框对应的所述数组中的子单选框；
渲染所述子单选框。
3.根据权利要求1所述的一种通过单选框实现级联选择的方法，其特征在于，所述S3之前还包括：
渲染所述树形结构根节点中的所有单选框。
4.根据权利要求1所述的一种通过单选框实现级联选择的方法，其特征在于，所述S1还包括：
为所述树形结构的每一层分别分配标签；
所述S3还包括：
渲染所述子单选框所在层级的标签。
5.根据权利要求1所述的一种通过单选框实现级联选择的方法，其特征在于，所述S3中所述选择信息所对应的单选框不是父单选框时，则完成渲染，并返回已接收的所述选择信息所对应的单选框的值。
6.一种通过单选框实现级联选择的终端，包括存储器、处理器及存储在存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下步骤：
S1、创建与待选项一一对应的单选框，将所述单选框按照所述待选项之间的关系整理成树形结构；
S2、将同一父节点下的所有子节点所对应的子单选框存储在同一个数组中，并存储所述数组与对应的所述父节点中父单选框的对应关系；
S3、接收选择信息，判断所述选择信息所对应的单选框是否为父单选框，若是，则渲染所述数组中的子单选框。
7.根据权利要求6所述的一种通过单选框实现级联选择的终端，其特征在于，所述S1中所述单选框包括单选框标识及单选框名，所述单选框名与所述待选项的值相同；
所述S3具体为：
接收选择信息，获取所述选择信息所对应的第一单选框标识；
判断所述第一单选框标识所对应的第一单选框是否有对应的所述数组，若有，则所述第一单选框为父单选框，获取所述第一单选框对应的所述数组中的子单选框；
渲染所述子单选框。
8.根据权利要求6所述的一种通过单选框实现级联选择的终端，其特征在于，所述S3之前还包括：
渲染所述树形结构根节点中的所有单选框。
9.根据权利要求6所述的一种通过单选框实现级联选择的终端，其特征在于，所述S1还包括：
为所述树形结构的每一层分别分配标签；
所述S3还包括：
渲染所述子单选框所在层级的标签。
10.根据权利要求6所述的一种通过单选框实现级联选择的终端，其特征在于，所述S3中所述选择信息所对应的单选框不是父单选框时，则完成渲染，并返回已接收的所述选择信息所对应的单选框的值。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010871090.7A CN112099787A (zh) | 2020-08-26 | 2020-08-26 | 一种通过单选框实现级联选择的方法及终端 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010871090.7A CN112099787A (zh) | 2020-08-26 | 2020-08-26 | 一种通过单选框实现级联选择的方法及终端 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112099787A true CN112099787A (zh) | 2020-12-18 |
Family
ID=73756681
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010871090.7A Pending CN112099787A (zh) | 2020-08-26 | 2020-08-26 | 一种通过单选框实现级联选择的方法及终端 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112099787A (zh) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080313597A1 (en) * | 2007-06-14 | 2008-12-18 | Alan William Brown | System and Method for Describing Method Process Using Guided Architectural Decisions |
| CN109885225A (zh) * | 2018-12-14 | 2019-06-14 | 平安万家医疗投资管理有限责任公司 | 一种级联式选择的显示方法、装置及计算机设备 |
| CN111221528A (zh) * | 2019-12-27 | 2020-06-02 | 广东金赋科技股份有限公司 | 级联数据显示方法 |
-
2020
- 2020-08-26 CN CN202010871090.7A patent/CN112099787A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080313597A1 (en) * | 2007-06-14 | 2008-12-18 | Alan William Brown | System and Method for Describing Method Process Using Guided Architectural Decisions |
| CN109885225A (zh) * | 2018-12-14 | 2019-06-14 | 平安万家医疗投资管理有限责任公司 | 一种级联式选择的显示方法、装置及计算机设备 |
| CN111221528A (zh) * | 2019-12-27 | 2020-06-02 | 广东金赋科技股份有限公司 | 级联数据显示方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP6494061B2 (ja) | 広告情報プッシュ方法、装置、システム、サーバ及びコンピュータ読取り可能な媒体 | |
| CN111104635B (zh) | 一种表格网页的生成方法和装置 | |
| US9026583B2 (en) | Method and apparatus for polymorphic serialization | |
| CN110210731A (zh) | 提醒任务分配方法、装置、计算机设备和存储介质 | |
| CN108040278A (zh) | 智能电视的活动页处理方法、服务器、系统及存储介质 | |
| CN108288208B (zh) | 基于图像内容的展示对象确定方法、装置、介质及设备 | |
| CN107463366A (zh) | 一种基于移动App的界面动态化方法 | |
| CN105138340A (zh) | 一种Native与Web页面的交互方法和系统 | |
| CN107147940A (zh) | 内容轮播的方法、装置、电子设备和存储介质 | |
| CN108881997A (zh) | 动画文件生成及播放方法、装置和系统 | |
| CN108647347B (zh) | 分页显示方法、用户设备、存储介质及装置 | |
| CN111836095B (zh) | 一种tv端循环显示节目的方式 | |
| CN112099787A (zh) | 一种通过单选框实现级联选择的方法及终端 | |
| CN109164996A (zh) | 一种实现android自主点屏方法及相关产品 | |
| CN103246446A (zh) | 多媒体输入方法及电子设备 | |
| CN107291931A (zh) | 一种便签的生成方法、装置及用户终端 | |
| US20130318425A1 (en) | Method for copying multiple content between applications | |
| CA2540519A1 (en) | System and method for flexible application hosting on a wireless device | |
| CN106528733A (zh) | 网页页面展现方法及装置 | |
| CN107977459B (zh) | 报表生成方法及装置 | |
| CN104615697A (zh) | 一种网页层次记忆返回方法 | |
| CN113112084B (zh) | 一种教练机后机身研发流程优化方法及装置 | |
| CN110750514B (zh) | 一种为主数据打标签的方法及终端 | |
| CN105450501A (zh) | 设置定制化回复功能的方法及装置 | |
| CN110333860B (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 |