CN111367504B

CN111367504B - 一种全场景适用的数据选择器及数据选择方法

Info

Publication number: CN111367504B
Application number: CN201811600889.1A
Authority: CN
Inventors: 郭成
Original assignee: Shopex Software Co ltd
Current assignee: Shopex Software Co ltd
Priority date: 2018-12-26
Filing date: 2018-12-26
Publication date: 2021-01-26
Anticipated expiration: 2038-12-26
Also published as: CN111367504A

Abstract

本发明公开了一种全场景适用的数据选择器，属于软件开发技术领域，是基于浏览器原配置的<select>选择器，定位需要选择数据表中的数据，判断选择的数据是单选还是多选，显示列表数据的字段，其中，对数据集进行统计，显示数据列表，显示对应数据表字段的列表，第一列为选择框，选择的数据内容追加到选择器内容之后。本发明可以将数据分页呈现，在实际开发过程中只需要输入选择器输入框基本参数，极大地减少了时间和人力，在需要数据关联的时候，只需简单的操作就可以实现，极大地减少了选择录入数据时产生的工作量。

Description

一种全场景适用的数据选择器及数据选择方法

技术领域

本发明涉及数据选择器及数据选择方法，特别是涉及一种全场景适用的数据选择器及数据选择方法，属于软件开发技术领域。

背景技术

在软件开发过程中，经常遇到需要数据关联的问题，在数据录入的时候，就需要选择已经录入的数据，因此所以会产生大量的工作量。而现有的数据选择器如<select>选择器等，对前端操作非常不友好，而且需要将数据全部呈现，对系统负担也非常重。如果单独去写数据选择器，则需要消耗大量的时间、人力。

发明内容

本发明的主要目的是为了提供一种全场景适用的数据选择器及数据选择方法，以解决在软件开发过程中遇到的数据关联问题，即在数据录入时，会产生大量的工作量。

本发明的目的可以通过采用如下技术方案达到：

一种全场景适用的数据选择器，该数据选择器是基于浏览器原配置的<select>选择器，通过“app”“和object”属性定位到需要选择数据表中的数据，通过“select”属性判断选择的数据是单选还是多选，通过“cols”属性，显示列表数据的字段，其中，对数据集进行统计，当数据量少于等于5时，直接将数据添加到<select>选择器中，当数据量大于5时，拦截掉<select>的点击动作，弹出新窗口，显示数据列表，通过“cols”属性显示对应数据表字段的列表，第一列为“select”属性定义的选择框，选择的数据内容追加到选择器内容之后。

一种全场景适用的数据选择方法，包括如下步骤：

S1：输入数据表及选择方式；

S2：定位数据表中的数据；

S3：判断选择的数据是单选还是多选；

S4：显示列表数据的字段；

S5：对数据集进行统计；

S6：选择数据并关闭窗口。

定位数据表中的数据的具体步骤包括：基于浏览器原配置的<select>选择器，通过“app”和“object”属性定位到需要选择哪张数据表中的数据。

判断选择的数据是单选还是多选的具体步骤包括如下：通过“select”属性判断选择的数据是单选还是多选，其中radio为单选，checkbox为多选。

显示列表数据的字段的具体步骤包括如下：通过“cols”属性，显示列表数据的字段。

对数据集进行统计的具体步骤包括如下：对数据集进行统计，当数据量少于等于5时，直接将数据添加到<select>选择器中，当数据量大于5时，为了能够翻页显示多条数据并且提高数据的辨识度，则拦截掉<select>的点击动作，弹出新窗口，显示数据列表。

选择数据并关闭窗口的具体步骤包括如下：通过上述“cols”属性显示对应数据表字段的列表，第一列为“select”属性定义的选择框；选择完成后，关闭该窗口，选择的数据内容追加到选择器内容之后。

在开发过程中，只需要输入选择器输入框基本参数，系统即可转化成为对应的数据选择器；在这个过程中，将输入框的参数进行处理，从数据库中拖取相应的数据，并对数据进行渲染，产生新的页面，在这个页面中选择数据后，将唯一标识符回传至打开页面。

本发明的有益技术效果：本发明提供的数据选择器对前端操作较容易，可以将数据分页呈现，对系统无较大的负担，在实际开发过程中只需要输入选择器输入框基本参数，系统就可以转化成为对应的数据选择器，在不同使用环境中，无需单独写数据选择器了，极大地减少了时间和人力，在需要数据关联的时候，只需简单的操作就可以实现，极大地减少了选择录入数据时产生的工作量。

附图说明

图1为本发明全场景适用的数据选择器工作流程图；

图2为本发明全场景适用的数据选择器入口示意图；

图3为本发明全场景适用的数据选择器操作样式示意图；

图4为本发明数据选择结果示意图。

具体实施方式

为使本领域技术人员更加清楚和明确本发明的技术方案，下面结合实施例及附图对本发明作进一步详细的描述，但本发明的实施方式不限于此。

如图1-图4所示，本实施例提供的全场景适用的数据选择器，该数据选择器是基于浏览器原配置的<select>选择器，通过“app”“和object”属性定位到需要选择数据表中的数据，通过“select”属性判断选择的数据是单选还是多选，通过“cols”属性，显示列表数据的字段，其中，对数据集进行统计，当数据量少于等于5时，直接将数据添加到<select>选择器中，当数据量大于5时，拦截掉<select>的点击动作，弹出新窗口，显示数据列表，通过“cols”属性显示对应数据表字段的列表，第一列为“select”属性定义的选择框，选择的数据内容追加到选择器内容之后。

如图1所示，本实施例提供的全场景适用的数据选择方法，包括如下步骤：

S1：输入数据表及选择方式；

S2：定位数据表中的数据，基于浏览器原配置的<select>选择器，通过“app”和“object”属性定位到需要选择哪张数据表中的数据；

S3：判断选择的数据是单选还是多选，通过“select”属性判断选择的数据是单选还是多选，其中radio为单选，checkbox为多选；

S4：显示列表数据的字段，通过“cols”属性，显示列表数据的字段；

S5：对数据集进行统计，对数据集进行统计，当数据量少于等于5时，直接将数据添加到<select>选择器中，当数据量大于5时，为了能够翻页显示多条数据并且提高数据的辨识度，则拦截掉<select>的点击动作，弹出新窗口，显示数据列表；

S6：选择数据并关闭窗口，通过上述“cols”属性显示对应数据表字段的列表，第一列为“select”属性定义的选择框；选择完成后，关闭该窗口，选择的数据内容追加到选择器内容之后。

在本实施例中，基于浏览器原配置的<select>选择器，通过“app”和“object”属性定位到需要选择哪张数据表中的数据，通过“select”属性判断选择的数据是单选还是多选，其中radio为单选，checkbox为多选，通过“cols”属性，显示列表数据的字段，对数据集进行统计，当数据量少于等于5时，直接将数据添加到<select>选择器中，当数据量大于5时，为了能够翻页显示多条数据并且提高数据的辨识度，则拦截掉<select>的点击动作，弹出新窗口，显示数据列表，通过上述“cols”属性显示对应数据表字段的列表，第一列为“select”属性定义的选择框；选择完成后，关闭该窗口，选择的数据内容追加到选择器内容之后，在开发过程中，只需要输入选择器输入框基本参数，系统即可转化成为对应的数据选择器；在这个过程中，将输入框的参数进行处理，从数据库中拖取相应的数据，并对数据进行渲染，产生新的页面，在这个页面中选择数据后，将唯一标识符回传至打开页面。

在本实施例中，当需要一个选择多个商品的选择器时，则在页面上需要放置商品选择器的地方加入标签“<{input type＝"object"app＝b2c object＝"goods"value＝"$goods_id"name＝"goods_id"cols＝"name"select＝"checkbox"}>”，在页面上即可看到如图2所示。

在本实施例中，当需要输入对应数据的时候，点击如图2所示下拉菜单，会打开如图3所示窗口，此时可以选中左侧的checkbox，点击确定按钮，就可以在需要输入的页面看到所选择的如图4所示内容。

综上所述，在本实施例中，本实施例提供的数据选择器对前端操作较容易，可以将数据分页呈现，对系统无较大的负担，在实际开发过程中只需要输入选择器输入框基本参数，系统就可以转化成为对应的数据选择器，在不同使用环境中，无需单独写数据选择器了，极大地减少了时间和人力，在需要数据关联的时候，只需简单的操作就可以实现，极大地减少了选择录入数据时产生的工作量。

以上所述，仅为本发明进一步的实施例，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明所公开的范围内，根据本发明的技术方案及其构思加以等同替换或改变，都属于本发明的保护范围。

Claims

1.一种全场景适用的数据选择器，其特征在于，该数据选择器是基于浏览器原配置的<select>选择器，通过“app”“和object”属性定位到需要选择数据表中的数据，通过“select”属性判断选择的数据是单选还是多选，通过“cols”属性，显示列表数据的字段，其中，对数据集进行统计，当数据量少于等于5时，直接将数据添加到<select>选择器中，当数据量大于5时，拦截掉<select>的点击动作，弹出新窗口，显示数据列表，通过“cols”属性显示对应数据表字段的列表，第一列为“select”属性定义的选择框，选择的数据内容追加到选择器内容之后。

2.一种全场景适用的数据选择方法，适用于如权利要求1所述的数据选择器，其特征在于，包括如下步骤：

S1：输入数据表及选择方式；

S5：对数据集进行统计；

S6：选择数据并关闭窗口。

3.如权利要求2所述的一种全场景适用的数据选择方法，其特征在于，对数据集进行统计的具体步骤包括如下：对数据集进行统计，当数据量少于等于5时，直接将数据添加到<select>选择器中，当数据量大于5时，为了能够翻页显示多条数据并且提高数据的辨识度，则拦截掉<select>的点击动作，弹出新窗口，显示数据列表。

4.如权利要求2所述的一种全场景适用的数据选择方法，其特征在于，选择数据并关闭窗口的具体步骤包括如下：通过上述“cols”属性显示对应数据表字段的列表，第一列为“select”属性定义的选择框；选择完成后，关闭该窗口，选择的数据内容追加到选择器内容之后。

5.如权利要求2所述的一种全场景适用的数据选择方法，其特征在于，在开发过程中，只需要输入选择器输入框基本参数，系统即可转化成为对应的数据选择器；在这个过程中，将输入框的参数进行处理，从数据库中拖取相应的数据，并对数据进行渲染，产生新的页面，在这个页面中选择数据后，将唯一标识符回传至打开页面。