Data processing method and device based on drop-down box component, equipment and storage medium

Abstract

The present disclosure provides a data processing method and device based on a drop-down box component, equipment and a storage medium, which can be applied to the field of computer technology. The method comprises: obtaining a pre-packaged drop-down box component, wherein the drop-down box component is pre-packaged based on parameter configuration, and the drop-down box component has a mapping relationship with a business module; rendering a component display list based on a preset display type of the pre-packaged drop-down box component and a preset data source calling interface; obtaining a user filtering instruction based on the component display list; and performing page data display based on the user filtering instruction, wherein the page data display comprises drop-down box filtering data display and historical selection data display.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and in particular to a data processing method, apparatus, device, medium, and program product based on a drop-down list component. Background Technology

[0002] In enterprise systems, dropdown lists are widely used as a common component. However, existing dropdown list components typically have limited functionality. When facing complex and ever-changing business scenarios, it is often necessary to add a large amount of code to the basic components to complete the functionality, and the components cannot be reused by other modules. On the other hand, when the data structure is complex, conventional dropdown list components cannot clearly present the data, and the interaction response time is long, resulting in a poor user experience. Summary of the Invention

[0003] In view of the above problems, this disclosure provides a data processing method, apparatus, device, medium and program product based on drop-down box components.

[0004] According to a first aspect of this disclosure, a data processing method based on a dropdown component is provided, comprising: obtaining a pre-encapsulated dropdown component, wherein the dropdown component is pre-encapsulated based on parameter configuration, and the dropdown component has a mapping relationship with a business module; rendering a component display list based on a preset display type and a preset data source calling interface of the pre-encapsulated dropdown component; obtaining user filtering instructions based on the component display list; and displaying page data based on the user filtering instructions, wherein the page data display includes dropdown filtered data display and historical selection data display.

[0005] According to embodiments of this disclosure, the pre-packaged dropdown component includes: configuring component type parameters and interface call parameters corresponding to the business module based on the business module and preset packaging rules, wherein the component type parameters are associated with the dropdown display type, and the interface call parameters are mapped to the data source call interface.

[0006] According to embodiments of this disclosure, the dropdown list display type includes one of the following types: dropdown tree display, checkbox display based on keyword search, or dropdown tree display combined with checkbox display based on keyword search.

[0007] According to embodiments of this disclosure, when the drop-down list display type is a combination of drop-down tree display and keyword search-based checkbox display, the drop-down tree display is the default preset display type.

[0008] According to embodiments of this disclosure, the preset data source calling interface includes a component-built-in calling interface or a custom calling interface.

[0009] According to embodiments of this disclosure, the page data display based on the user filtering instruction includes: displaying the current data filtering result in response to the current user filtering instruction in a first display area, the current data filtering result including the current drop-down box filtering data; and displaying a filtering history result set in a second display area, the filtering history result set including the current drop-down box filtering data and historical selection data, wherein the historical selection data includes historical data filtering results in response to historical user filtering instructions, wherein the first display area and the second display area are located in different preset positions on the same page, and the data filtering result and the filtering history result set are displayed synchronously.

[0010] According to embodiments of this disclosure, user filtering instructions are transmitted through the dropdown component.

[0011] According to an embodiment of this disclosure, before displaying page data, the method further includes: transmitting the user filtering instruction to a backend server through a data call interface associated with the dropdown component; obtaining data processing results from the backend server based on the data call interface, wherein the data processing results include generating current dropdown filter data; filtering and comparing the current dropdown filter data with historical selection data; and modifying the dropdown data element attributes based on the filtering and comparison results to obtain the current data filtering results.

[0012] According to an embodiment of this disclosure, when the data processing result of the backend server does not meet the data format requirements of the drop-down list, the method further includes: converting the data processing result into a data format.

[0013] A second aspect of this disclosure provides a data processing apparatus based on a dropdown component, comprising: a first acquisition module configured to acquire a pre-packaged dropdown component, wherein the pre-packaged dropdown component has a mapping relationship with a business module; a rendering module configured to render a component display list based on a preset display type and a preset data source call interface of the pre-packaged dropdown component; a second acquisition module configured to acquire user filtering instructions based on the component display list; and a display module configured to display page data based on the user filtering instructions, wherein the page data display includes dropdown filtered data display and historical selection data display.

[0014] According to embodiments of this disclosure, the data processing apparatus 700 based on the dropdown component may further include a transmission module, a third acquisition module, a comparison module, and a fourth acquisition module. The transmission module is configured to transmit the user filtering instruction to a backend server via a data call interface associated with the dropdown component. The third acquisition module is configured to acquire data processing results from the backend server based on the data call interface, and is configured to filter and compare the current dropdown filtered data with historical selection data. The fourth acquisition module is configured to modify the dropdown data element attributes based on the filtering and comparison results, and acquire the current data filtering result.

[0015] According to embodiments of this disclosure, the display module includes a first display subunit and a second display subunit. The first display subunit is configured to display the current data filtering results in response to a current user's filtering instruction in a first display area. The current data filtering results include the currently filtered data from the dropdown menu. The second display subunit is configured to display a set of historical filtering results in a second display area. The set of historical filtering results includes the currently filtered data from the dropdown menu and historical selection data. The historical selection data includes historical data filtering results in response to historical user filtering instructions. The first display area and the second display area are located at different preset positions on the same page, and the data filtering results and the set of historical filtering results are displayed synchronously.

[0016] A third aspect of this disclosure provides an electronic device comprising: one or more processors; and a memory for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors perform the methods described above.

[0017] A fourth aspect of this disclosure also provides a computer-readable storage medium having executable instructions stored thereon, which, when executed by a processor, cause the processor to perform the methods described above.

[0018] The fifth aspect of this disclosure also provides a computer program product, including a computer program that, when executed by a processor, implements the above-described method.

[0019] According to the data processing method, apparatus, device, medium, and program product based on dropdown list components provided in this disclosure, the reuse of dropdown list component units can be achieved through parameter configuration of pre-packaged dropdown list components. Due to the correspondence between configurable parameters and business modules, personalized design of dropdown list components for business modules is realized. Furthermore, the method of this disclosure can synchronously display the dropdown list filter count and historical selection data based on user filtering instructions, making the data presentation clear and intuitive, and improving the user experience. Attached Figure Description

[0020] The foregoing contents, as well as other objects, features, and advantages of this disclosure, will become clearer from the following description of embodiments with reference to the accompanying drawings, in which:

[0021] Figure 1 The diagram illustrates an application scenario of a data processing method based on a dropdown component according to an embodiment of the present disclosure.

[0022] Figure 2 A flowchart illustrating a data processing method based on a dropdown component according to an embodiment of the present disclosure is shown.

[0023] Figure 3 A schematic diagram of a parameter passing configuration method according to an embodiment of the present disclosure is shown as an example.

[0024] Figure 4 The flowchart illustrates a method for displaying page data based on the user filtering instructions according to an embodiment of the present disclosure.

[0025] Figure 5A This illustration demonstrates how page data is displayed using a dropdown tree format.

[0026] Figure 5B The illustration shows the display effect of checkboxes based on keyword search.

[0027] Figure 5C The illustration shows the effect of a dropdown tree display that incorporates checkboxes based on keyword search.

[0028] Figure 6 A flowchart illustrating a method for filtering and screening data according to an embodiment of the present disclosure is shown schematically.

[0029] Figure 7 A schematic block diagram of a data processing apparatus based on a drop-down box component according to an embodiment of the present disclosure is shown.

[0030] Figure 8 The diagram schematically illustrates a structural block diagram of a data processing apparatus based on a drop-down box component according to other embodiments of the present disclosure.

[0031] Figure 9 A schematic block diagram of a demonstration module according to an embodiment of the present disclosure is shown.

[0032] Figure 10 A block diagram schematically illustrates an electronic device suitable for implementing a data processing method based on a drop-down box component according to an embodiment of the present disclosure. Detailed Implementation

[0033] The embodiments of the present disclosure will now be described with reference to the accompanying drawings. However, it should be understood that these descriptions are exemplary only and are not intended to limit the scope of the disclosure. In the following detailed description, numerous specific details are set forth to provide a thorough understanding of the embodiments of the present disclosure for ease of explanation. However, it will be apparent that one or more embodiments may be practiced without these specific details. Furthermore, descriptions of well-known structures and techniques are omitted in the following description to avoid unnecessarily obscuring the concepts of the present disclosure.

[0034] The terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit this disclosure. The terms “comprising,” “including,” etc., as used herein indicate the presence of the stated features, steps, operations, and / or components, but do not exclude the presence or addition of one or more other features, steps, operations, or components.

[0035] All terms used herein (including technical and scientific terms) have the meanings commonly understood by those skilled in the art, unless otherwise defined. It should be noted that the terms used herein are to be interpreted in a manner consistent with the context of this specification, and not in an idealized or overly rigid way.

[0036] When using expressions such as "at least one of A, B, and C", they should generally be interpreted in accordance with the meaning that is commonly understood by a person skilled in the art (e.g., "a system having at least one of A, B, and C" should include, but is not limited to, a system having A alone, a system having B alone, a system having C alone, a system having A and B, a system having A and C, a system having B and C, and / or a system having A, B, and C, etc.).

[0037] In the technical solutions disclosed herein, the collection, storage, use, processing, transmission, provision, disclosure, and application of data (including but not limited to user personal information) comply with the provisions of relevant laws and regulations, necessary confidentiality measures have been taken, and they do not violate public order and good morals.

[0038] In enterprise systems, dropdown lists are widely used as a common component. Existing dropdown components typically have limited functionality. When facing complex and ever-changing business scenarios, they often require adding significant amounts of code to basic components to achieve functionality, and these components cannot be reused by other modules. Furthermore, when data structures are complex, conventional dropdown components cannot clearly present the data and are prone to slow page response, causing system lag and a poor user experience. To address system lag caused by large data volumes, existing solutions include dropdown scrolling pagination or table pagination for querying and selecting values. These methods all aim to improve interface response speed by reducing data requests, but they lack optimization in data display. The initial data display volume is limited, the displayed content is relatively simple and lacks variability, and it cannot meet the needs of displaying hierarchical data.

[0039] This disclosure provides a data processing method based on a dropdown component, comprising: obtaining a pre-packaged dropdown component, wherein the dropdown component is pre-packaged based on parameter configuration and has a mapping relationship with a business module; rendering a component display list based on a preset display type and a preset data source call interface of the pre-packaged dropdown component; triggering a parameter passing instruction, and calling a dropdown display component and a data source call interface that match the parameter passing instruction based on the parameter passing instruction; rendering a component display list based on the dropdown display component and the data source call interface that match the parameter passing instruction; obtaining a user filtering instruction based on the component display list; and displaying page data based on the user filtering instruction, wherein the page data display includes dropdown filtered data display and historical selection data display.

[0040] Figure 1 The diagram illustrates an application scenario of a data processing method based on a dropdown component according to an embodiment of the present disclosure.

[0041] like Figure 1 As shown, application scenario 100 according to this embodiment may include a first terminal device 101, a second terminal device 102, a third terminal device 103, a network 104, and a server 105. The network 104 serves as a medium for providing a communication link between the first terminal device 101, the second terminal device 102, the third terminal device 103, and the server 105. The network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0042] Users can interact with server 105 via network 104 using at least one of the first terminal device 101, second terminal device 102, and third terminal device 103 to receive or send messages, etc. Various communication client applications can be installed on the first terminal device 101, second terminal device 102, and third terminal device 103, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social media platform software, etc. (for example only).

[0043] The first terminal device 101, the second terminal device 102, and the third terminal device 103 can be various electronic devices with displays and support web browsing, including but not limited to smartphones, tablets, laptops, and desktop computers.

[0044] Server 105 can be a server that provides various services, such as a backend management server that supports websites browsed by users using the first terminal device 101, the second terminal device 102, and the third terminal device 103 (this is just an example). The backend management server can analyze and process data such as received user requests, and feed back the processing results (such as web pages, information, or data obtained or generated according to user requests) to the terminal devices.

[0045] It should be noted that the data processing method based on the drop-down component provided in this disclosure can generally be executed by the first terminal device 101, the second terminal device 102, and the third terminal device 103. Correspondingly, the data processing device based on the drop-down component provided in this disclosure can generally be located in the server 105. The data processing method based on the drop-down component provided in this disclosure can also be executed by a server or server cluster that is different from the first terminal device 101, the second terminal device 102, and the third terminal device 103 and is capable of communicating with the server 105 and / or the server 105. Correspondingly, the data processing device based on the drop-down component provided in this disclosure can also be located in a server or server cluster that is different from the first terminal device 101, the second terminal device 102, and the third terminal device 103 and is capable of communicating with the server 105 and / or the server 105.

[0046] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0047] The following will be based on Figure 1 The described scene, through Figures 2-6 The data processing method based on the drop-down box component of the disclosed embodiments will be described in detail.

[0048] Figure 2 A flowchart illustrating a data processing method based on a dropdown component according to an embodiment of the present disclosure is shown.

[0049] like Figure 2 As shown, the data processing method based on the drop-down box component in this embodiment includes operations S210 to S240.

[0050] In operation S210, a pre-packaged dropdown component is obtained, wherein the dropdown component is pre-packaged based on parameter configuration, and the dropdown component has a mapping relationship with the business module.

[0051] According to embodiments of this disclosure, a pre-packaged dropdown component is provided. This component can be pre-packaged based on parameter configuration. The parameter configuration can be associated with a business module. That is, when developers package the dropdown component required by a business module, they can adaptively package the dropdown component by passing parameters to meet the personalized needs of different business modules. When business users use the dropdown component, they can directly display the pre-packaged dropdown component after entering the business module.

[0052] In operation S220, the component display list is rendered based on the preset display type and preset data source call interface of the pre-encapsulated drop-down component.

[0053] In the embodiments of this disclosure, the pre-packaged dropdown component may have preset display types and preset data source call interfaces corresponding to different business modules. It is understood that the preset display types and preset data source call interfaces can be determined based on parameter configuration. After entering a business module, a component display list can be rendered based on the configured preset display types and preset data source call interfaces of the dropdown component for use by business personnel.

[0054] In operation S230, user filtering instructions are obtained based on the component display list. These user filtering instructions can be passed through the component display list to interact with the backend server. In a typical example, the user can pass the filtering instructions by clicking on a user interaction component within a dropdown component, such as a radio button or checkbox.

[0055] In operation S240, page data is displayed based on the user's filtering instruction. This page data display includes displaying dropdown-filtered data and displaying historical selection data. In embodiments of this disclosure, the data processing results after filtering based on the dropdown and historical selection data can be displayed simultaneously. The dropdown-filtered data can be the data selected by the user through the current dropdown operation, and the historical selection data can be historical data selected by the user based on the dropdown operation and not deselected.

[0056] In the embodiments of this disclosure, the reuse of dropdown component units can be achieved by configuring pre-encapsulated dropdown components through parameters. Due to the correspondence between configurable parameters and business modules, personalized design of dropdown components for business modules is realized. Furthermore, the method of the embodiments of this disclosure can synchronously display the dropdown filter count and historical selection data based on user filtering instructions, making the data presentation clear and intuitive, and improving the user experience.

[0057] According to embodiments of this disclosure, a pre-packaged dropdown component may include: configuring component type parameters and interface call parameters corresponding to the business module based on the business module and preset packaging rules. The component type parameters are associated with the dropdown display type, and the interface call parameters are mapped to the data source call interface. Specifically, embodiments of this disclosure can enable different types of dropdown display components through configurable parameter passing, and can configurably set whether to use the component's built-in interface to call data by controlling field parameters within the component's built-in interface.

[0058] In some specific embodiments, the dropdown list display type includes one of the following types: dropdown tree display, keyword search-based checkbox display, or dropdown tree display combined with keyword search-based checkbox display.

[0059] In some specific embodiments, the preset data source calling interface includes a component built-in calling interface or a custom calling interface.

[0060] In some preferred embodiments, when the dropdown list display type is a combination of a dropdown tree display and a keyword-search-based checkbox display, the dropdown tree display is the default preset display type. The tree structure of the dropdown tree can display all data information to the user, and because the dropdown tree is collapsible, it has the advantages of a beautiful and concise interface, avoiding frequent page flipping or scrolling to view data, reducing the resource consumption required for front-end page data display, and making the data display more intuitive. The keyword-search-based checkbox list can display selected / unselected options to the user, facilitating the sorting of options.

[0061] In a typical preferred embodiment, the dropdown component can be further encapsulated based on Vue + Element-UI's el-select combined with el-tree. During encapsulation, receiving parameters and extended items can be set, and the enabling and disabling of parameters can be controlled through external parameters. This allows for the extension of the dropdown component. The encapsulated dropdown component supports configurable parameter passing, allowing a single component to meet various dropdown and popup display needs, improving component reusability, reducing repetitive code usage, and enhancing system performance.

[0062] Specifically, it can be based on, for example Figure 3 The method shown is used for parameter configuration.

[0063] Figure 3 This illustration shows a schematic diagram of a parameter configuration method according to an embodiment of the present disclosure. It includes interface call parameters and multiple component type parameters. For example, `selectList` is used for passing dropdown data parameters; `compType` is a component type control field that controls the display type of the front-end component. When its parameter value is `select`, a select dropdown list is displayed, supporting multiple selections; when the parameter value is `tree`, a checkbox-merged dropdown tree is displayed; `dic` controls whether to enable the component's built-in interface control field. If a parameter is passed, the component's built-in interface is used to obtain template data stored in the database for list rendering, saving code overhead. If no parameter is passed, the component's built-in interface is not enabled, and data can be obtained and processed by calling a custom interface. `checkList` is used to obtain and store the selected content set. Furthermore, the `selectType` field can be configured, which can be a optional parameter that controls whether the dropdown list allows single or multiple selections.

[0064] In a preferred embodiment of this disclosure, the pre-packaged dropdown component can support users in searching for and locating data options by entering keywords based on parameter passing. Each data option group can then display specific information and its selection status. Furthermore, users can select or deselect options from the list, making data manipulation more convenient.

[0065] Figure 4 The flowchart illustrates a method for displaying page data based on the user filtering instructions according to an embodiment of the present disclosure.

[0066] like Figure 4 As shown, the method for displaying page data based on the user filtering instruction in this embodiment includes operations S410 to S420.

[0067] In operation S410, the current data filtering results in response to the current user's filtering instruction are displayed in the first display area. The current data filtering results include the currently filtered data in the drop-down box.

[0068] In operation S420, the filter history result set is displayed in the second display area. The filter history result set includes the current drop-down box filter data and historical selection data, wherein the historical selection data includes historical data filter results in response to historical user filter instructions.

[0069] According to embodiments of this disclosure, the first display area and the second display area are located at different preset positions on the same page, thereby allowing the data filtering results and the filtering history result set to be displayed synchronously in the first and second display areas, respectively. In embodiments of this disclosure, components corresponding to the business module are generated through configuration parameter passing. When using the business module, the user can pass the user filtering instruction through the dropdown component. Specifically, the user can perform filtering operations on the dropdown through the user interaction component in the dropdown component located in the first display area, and the selected results can be displayed in real time in the second display area. Similarly, the user can quickly locate option data through the keyword search function of the dropdown in the first display area, and can simultaneously select or deselect the option data list; this data status can also be synchronized to the second display area. When the user clears the keywords, the interface reverts to the default display type, such as a dropdown tree display, and the user can see the corresponding dropdown node status changes. Likewise, when the user filters out selected data through the second display area, the dropdown node status in the first display area changes synchronously. In a preferred embodiment, the user can also view additional information about the data options in the second display area, such as the number of selected data items and additional notes.

[0070] In the embodiments of this disclosure, by displaying the current filtering results and the filtering history result set in different areas on the same page, the data status can be displayed intuitively, thereby improving the user experience.

[0071] Figures 5A to 5C The illustration shows a rendering of page data displayed according to an example of this disclosure.

[0072] Among them, Figure 5A The image illustrates the effect of displaying page data based on a dropdown tree format. It can be understood that the currently filtered data in the dropdown list is the data filtered based on the second and third child nodes selected in the dropdown tree within the first display area on the left side of the page. The second display area on the right simultaneously displays the result set of the currently selected and not deselected data.

[0073] exist Figure 5B The image illustrates the effect of a checkbox display based on keyword search. After the user enters keywords, the first display area on the left side of the page changes to a checkbox display and returns the data search results from the backend server. The second display area on the right simultaneously displays the result set of currently selected and not deselected data.

[0074] exist Figure 5CThe diagram illustrates the effect of merging a dropdown tree display with a checkbox display based on keyword search. The dropdown tree is the default display format. After entering a keyword search, the first display area on the left transforms into a checkbox display, returning the data search results from the backend server. Users can select multiple checkboxes, and the currently matched search results are displayed in a shaded state in the first display area, while the unmatched selected search results are displayed as additional information. Similarly, the second display area on the right simultaneously displays the result set of currently selected and not deselected data.

[0075] In the embodiments of this disclosure, before the page data is displayed, the backend server can process the user filtering instructions transmitted based on the frontend interface to filter and select data.

[0076] Figure 6 A flowchart illustrating a method for filtering and screening data according to an embodiment of the present disclosure is shown schematically.

[0077] like Figure 6 As shown, the method for filtering and screening data in this embodiment includes operations S610 to S640.

[0078] In operation S610, the user filtering instruction is transmitted to the backend server through the data call interface associated with the drop-down box component.

[0079] In operation S620, the data processing result from the backend server is obtained by calling the interface based on the data source, wherein the data processing result includes generating the current drop-down filter data.

[0080] In operation S630, the current drop-down list filter data and historical selection data are filtered and compared.

[0081] In operation S640, the attributes of the drop-down box data elements are modified based on the filtering comparison results to obtain the current data filtering results.

[0082] According to embodiments of this disclosure, when a user's filtering instruction is passed to a backend server (e.g., server 105) via a data call interface, the backend server processes the data to obtain the current dropdown filter data to be displayed on the front end and the historical selection data to be displayed in the second display area. The current dropdown filter data can differentiate between user operations. For example, in the default state, a default preset display type, such as a dropdown tree display, can be returned; if the user has searched for keywords, a checkbox list can be returned. In embodiments of this disclosure, a common configuration method can be used to filter and compare the current dropdown filter data and the historical selection data, enabling the deletion or storage of selected data, thereby modifying the attributes of matching dropdown data elements and refreshing the data state of the second display area.

[0083] According to embodiments of this disclosure, when the data processing result of the backend server does not meet the dropdown filter data format requirements, the method further includes: converting the data processing result into a data format. The data processing result of the backend server can be in any format. Embodiments of this disclosure expand the applicability of the data processing method by matching the data processing result of the backend server with the dropdown filter data format, converting the format of data that does not match, and then displaying it on the frontend page. Based on the above-described data processing method based on a dropdown component, this disclosure also provides a data processing apparatus based on a dropdown component. The following will be combined with... Figure 7 The device is described in detail.

[0084] Figure 7 A schematic block diagram of a data processing apparatus based on a drop-down box component according to an embodiment of the present disclosure is shown.

[0085] like Figure 7 As shown, the data processing device 700 based on the drop-down box component in this embodiment includes a first acquisition module 710, a rendering module 720, a second acquisition module 730, and a display module 740.

[0086] The first acquisition module 710 is configured to acquire a pre-packaged dropdown component, wherein the pre-packaged dropdown component has a mapping relationship with the business module.

[0087] The rendering module 720 is configured to render the component display list based on the preset display type and preset data source call interface of the pre-encapsulated drop-down component.

[0088] The second acquisition module 730 is configured to acquire user filtering instructions based on the component display list.

[0089] The display module 740 is configured to display page data based on the user's filtering instructions, wherein the page data display includes drop-down filter data display and historical selection data display.

[0090] According to embodiments of this disclosure, the display module further includes a first display subunit and a second display subunit.

[0091] Figure 8 The diagram schematically illustrates a structural block diagram of a data processing apparatus based on a drop-down box component according to other embodiments of the present disclosure.

[0092] like Figure 8 As shown, in addition to the first acquisition module 710, rendering module 720, second acquisition module 730 and display module 740, the data processing device 700 based on the drop-down box component in some other embodiments may also include a transmission module 750, a third acquisition module 760, a comparison module 770 and a fourth acquisition module 780.

[0093] The functions of the first acquisition module 710, the rendering module 720, the second acquisition module 730, and the display module 740 can be combined with those of the other modules. Figure 7 The same applies, so I won't repeat it here.

[0094] The transmission module 750 is configured to transmit the user filtering instruction to the backend server via a data call interface associated with the drop-down component.

[0095] The third acquisition module 760 is configured to acquire data processing results from the backend server based on the data call interface, wherein the data processing results include generating the current drop-down filter data.

[0096] The comparison module 770 is configured to filter and compare the current dropdown selection data and the historical selection data.

[0097] The fourth acquisition module 780 is configured to modify the attributes of the drop-down box data elements based on the filter comparison results, and acquire the current data filtering results.

[0098] Figure 9 A schematic block diagram of a demonstration module according to an embodiment of the present disclosure is shown.

[0099] like Figure 9 As shown, the display module 740 of this embodiment includes a first display subunit 7401 and a second display subunit 7402.

[0100] The first display subunit 7401 is configured to display the current data filtering results in response to the current user's filtering instruction in the first display area, wherein the current data filtering results include the current drop-down box filtering data.

[0101] The second display subunit 7402 is configured to display a set of filtered historical results in the second display area. The set of filtered historical results includes the current dropdown filter data and historical selection data. The historical selection data includes historical data filtering results in response to historical user filtering instructions. The first display area and the second display area are located at different preset positions on the same page, and the data filtering results and the set of filtered historical results are displayed synchronously. According to embodiments of this disclosure, any multiple modules among the first acquisition module 710, rendering module 720, second acquisition module 730, display module 740, transmission module 750, third acquisition module 760, comparison module 770, fourth acquisition module 780, first display subunit 7401, and second display subunit 7402 can be merged into one module, or any one of these modules can be split into multiple modules. Alternatively, at least some functions of one or more of these modules can be combined with at least some functions of other modules and implemented in one module. According to embodiments of this disclosure, at least one of the first acquisition module 710, rendering module 720, second acquisition module 730, display module 740, transmission module 750, third acquisition module 760, comparison module 770, fourth acquisition module 780, first display subunit 7401, and second display subunit 7402 can be at least partially implemented as hardware circuits, such as field-programmable gate arrays (FPGAs), programmable logic arrays (PLAs), systems-on-a-chip, systems-on-a-substrate, systems-on-package, application-specific integrated circuits (ASICs), or implemented in hardware or firmware by any other reasonable means of integrating or packaging circuits, or implemented in software, hardware, and firmware, or in any suitable combination of any of these three implementation methods. Alternatively, at least one of the first acquisition module 710, rendering module 720, second acquisition module 730, display module 740, transmission module 750, third acquisition module 760, comparison module 770, fourth acquisition module 780, first display subunit 7401 and second display subunit 7402 can be at least partially implemented as a computer program module, which can perform corresponding functions when the computer program module is run.

[0102] Figure 10 A block diagram schematically illustrates an electronic device suitable for implementing a data processing method based on a drop-down box component according to an embodiment of the present disclosure.

[0103] like Figure 10As shown, an electronic device 900 according to an embodiment of the present disclosure includes a processor 901, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 902 or a program loaded from a storage portion 908 into a random access memory (RAM) 903. The processor 901 may include, for example, a general-purpose microprocessor (e.g., a CPU), an instruction set processor and / or an associated chipset and / or a special-purpose microprocessor (e.g., an application-specific integrated circuit (ASIC)), etc. The processor 901 may also include onboard memory for caching purposes. The processor 901 may include a single processing unit or multiple processing units for performing different actions of the method flow according to an embodiment of the present disclosure.

[0104] RAM 903 stores various programs and data required for the operation of electronic device 900. Processor 901, ROM 902, and RAM 903 are interconnected via bus 904. Processor 901 performs various operations of the method flow according to embodiments of the present disclosure by executing programs in ROM 902 and / or RAM 903. It should be noted that the programs may also be stored in one or more memories other than ROM 902 and RAM 903. Processor 901 may also perform various operations of the method flow according to embodiments of the present disclosure by executing programs stored in said one or more memories.

[0105] According to embodiments of this disclosure, the electronic device 900 may further include an input / output (I / O) interface 905, which is also connected to a bus 904. The electronic device 900 may also include one or more of the following components connected to the I / O interface 905: an input section 906 including a keyboard, mouse, etc.; an output section 907 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 908 including a hard disk, etc.; and a communication section 909 including a network interface card such as a LAN card, modem, etc. The communication section 909 performs communication processing via a network such as the Internet. A drive 910 is also connected to the I / O interface 905 as needed. A removable medium 911, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on the drive 910 as needed so that computer programs read from it can be installed into the storage section 908 as needed.

[0106] This disclosure also provides a computer-readable storage medium, which may be included in the device / apparatus / system described in the above embodiments; or it may exist independently and not assembled into the device / apparatus / system. The computer-readable storage medium carries one or more programs that, when executed, implement the method according to the embodiments of this disclosure.

[0107] According to embodiments of this disclosure, the computer-readable storage medium may be a non-volatile computer-readable storage medium, such as including, but not limited to: portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this disclosure, the computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. For example, according to embodiments of this disclosure, the computer-readable storage medium may include ROM 902 and / or RAM 903 and / or one or more memories other than ROM 902 and RAM 903 described above.

[0108] Embodiments of this disclosure also include a computer program product comprising a computer program containing program code for performing the methods shown in the flowchart. When the computer program product is run on a computer system, the program code is used to cause the computer system to implement the item recommendation method provided in the embodiments of this disclosure.

[0109] When the computer program is executed by the processor 901, it performs the functions defined in the system / apparatus of this disclosure embodiments. According to embodiments of this disclosure, the systems, apparatuses, modules, units, etc., described above can be implemented by computer program modules.

[0110] In one embodiment, the computer program may rely on a tangible storage medium such as an optical storage device or a magnetic storage device. In another embodiment, the computer program may also be transmitted and distributed in the form of signals over a network medium, and downloaded and installed via the communication section 909, and / or installed from a removable medium 911. The program code contained in the computer program can be transmitted using any suitable network medium, including but not limited to: wireless, wired, etc., or any suitable combination thereof.

[0111] In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 909, and / or installed from the removable medium 911. When the computer program is executed by the processor 901, it performs the functions defined in the system of this disclosure embodiment. According to embodiments of this disclosure, the systems, devices, apparatuses, modules, units, etc., described above can be implemented by computer program modules.

[0112] According to embodiments of this disclosure, program code for executing the computer programs provided in embodiments of this disclosure can be written in any combination of one or more programming languages. Specifically, these computational programs can be implemented using high-level procedural and / or object-oriented programming languages, and / or assembly / machine languages. Programming languages ​​include, but are not limited to, languages ​​such as Java, C++, Python, "C", or similar programming languages. The program code can execute entirely on the user's computing device, partially on the user's device, partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via the Internet using an Internet service provider).

[0113] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0114] Those skilled in the art will understand that the features described in the various embodiments and / or claims of this disclosure can be combined or combined in various ways, even if such combinations or combinations are not explicitly described in this disclosure. In particular, the features described in the various embodiments and / or claims of this disclosure can be combined or combined in various ways without departing from the spirit and teachings of this disclosure. All such combinations and / or combinations fall within the scope of this disclosure.

[0115] The embodiments of this disclosure have been described above. However, these embodiments are for illustrative purposes only and are not intended to limit the scope of this disclosure. Although various embodiments have been described above, this does not mean that the measures in the various embodiments cannot be used advantageously in combination. The scope of this disclosure is defined by the appended claims and their equivalents. Various substitutions and modifications can be made by those skilled in the art without departing from the scope of this disclosure, and all such substitutions and modifications should fall within the scope of this disclosure.

Claims

1. A data processing method based on a dropdown list component, characterized in that, include: Obtain a pre-packaged dropdown component, wherein the dropdown component is pre-packaged based on parameter configuration, and the dropdown component has a mapping relationship with a business module; The component displays a list based on the preset display type and preset data source call interface of the pre-encapsulated dropdown component; Based on the component's display list, user filtering instructions are obtained; and The page data is displayed based on the user's filtering instructions, wherein the page data display includes displaying dropdown filtered data and displaying historical selection data: The dropdown list display type includes one of the following types: dropdown tree display, checkbox display based on keyword search, or dropdown tree display combined with checkbox display based on keyword search. The step of displaying page data based on the user's filtering instruction includes: displaying the current data filtering result in response to the current user's filtering instruction in a first display area, the current data filtering result including the current drop-down box filtering data; and displaying a filtering history result set in a second display area, the filtering history result set including the current drop-down box filtering data and historical selection data, wherein the historical selection data includes historical data filtering results in response to historical user filtering instructions, wherein the first display area and the second display area are located in different preset positions on the same page, and the data filtering result and the filtering history result set are displayed synchronously.

2. The method according to claim 1, wherein, Pre-packaged dropdown components include: Based on the business module and the preset encapsulation rules, configure the component type parameters and interface call parameters corresponding to the business module. The component type parameters are associated with the drop-down list display type, and the interface call parameters are mapped to the data source call interface.

3. The method according to claim 1, wherein, When the dropdown list is displayed as a dropdown tree and combined with a checkbox display based on keyword search, the dropdown tree display is the default preset display type.

4. The method according to claim 1, wherein, The preset data source call interface includes either a component-built-in call interface or a custom call interface.

5. The method according to claim 1, wherein, User filtering instructions are transmitted through the dropdown component.

6. The method according to claim 5, wherein, Before displaying page data, the method further includes: The user's filtering instructions are transmitted to the backend server through the data call interface associated with the drop-down component; The data processing results from the backend server are obtained based on the data call interface, wherein the data processing results include generating the current dropdown filter data; The current dropdown selection data and historical selection data are filtered and compared; and Modify the attributes of the dropdown data elements based on the filtering comparison results to obtain the current data filtering results.

7. The method according to claim 6, wherein, When the data processing result of the backend server does not meet the data format requirements of the dropdown filter, the method further includes: The data processing results are then converted to a new data format.

8. A data processing device based on a dropdown list component, characterized in that, include: The first acquisition module is configured to acquire a pre-packaged dropdown component, wherein the pre-packaged dropdown component has a mapping relationship with the business module; The rendering module is configured to render the component display list based on the preset display type and preset data source call interface of the pre-encapsulated drop-down component; The second acquisition module is configured to acquire user filtering instructions based on the list displayed by the component; and The display module is configured to display page data based on the user's filtering instructions, wherein the page data display includes displaying dropdown filtered data and displaying historical selection data. The dropdown list display type includes one of the following types: dropdown tree display, checkbox display based on keyword search, or dropdown tree display combined with checkbox display based on keyword search. The step of displaying page data based on the user's filtering instruction includes: displaying the current data filtering result in response to the current user's filtering instruction in a first display area, the current data filtering result including the current drop-down box filtering data; and displaying a filtering history result set in a second display area, the filtering history result set including the current drop-down box filtering data and historical selection data, wherein the historical selection data includes historical data filtering results in response to historical user filtering instructions, wherein the first display area and the second display area are located in different preset positions on the same page, and the data filtering result and the filtering history result set are displayed synchronously.

9. An electronic device, comprising: One or more processors; Storage device for storing one or more programs. Wherein, when the one or more programs are executed by the one or more processors, the one or more processors perform the method according to any one of claims 1 to 7.

10. A computer-readable storage medium having executable instructions stored thereon, which, when executed by a processor, cause the processor to perform the method according to any one of claims 1 to 7.

11. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1 to 7.

Images