Configurable list field screening method and device based on antd and storage medium

Abstract

The invention relates to an antd-based configurable list field screening method and device and a storage medium, and is applied to the technical field of software development, and the method comprises the following steps: introducing an Ant Design framework, and applying Table in the Ant Design framework to configure a corresponding list item Columns; the method comprises the following steps of: expanding list items (columns); a getColumnsFiltersProps function is created, the getColumnsFiltersProps function is used for configuring the expanded list item columns, and a list field needing to be displayed is defined; by providing the configurable list field screening panel, the code writing amount can be greatly reduced, the development efficiency can be improved, meanwhile, the maintainability and the expansibility of codes are also improved, developers can flexibly customize the field screening function of the list in a file configuration mode, and the requirements in different scenes are met.

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and in particular to a configurable list field screening method, device and storage medium based on antd. Background Art

[0002] In the field of software development, there are currently many UI component libraries based on the React framework, such as Ant Design, which provide a wealth of reusable components for building user interfaces. In terms of list data display and filtering functions, it is usually necessary to write a lot of repetitive code to implement the list field filtering function, which is not only labor-intensive but also difficult to maintain and expand. Summary of the invention

[0003] In view of this, the purpose of the present invention is to provide a configurable list field screening method, device and storage medium based on antd, so as to solve the problem in the prior art that in terms of list data display and screening functions, a large amount of repeated code is usually required to implement the list field screening function, which not only has a large workload but is also difficult to maintain and expand.

[0004] According to a first aspect of an embodiment of the present invention, a configurable list field screening method based on antd is provided, the method comprising:

[0005] Introduce the Ant Design framework and apply the Table in it to configure the corresponding list item columns;

[0006] Expand the list item columns;

[0007] Create a getColumnsFiltersProps function, use the getColumnsFiltersProps function to configure the expanded list item columns, and define the list fields that need to be displayed.

[0008] Preferably,

[0009] The step of expanding the list item columns includes:

[0010] Create a function getColumnsFiltersProps;

[0011] The function getColumnsFiltersProps returns the filterDropdown and filterIcon in the element of the list item columns, thereby implementing the expansion of the list item columns.

[0012] Preferably,

[0013] The list fields that need to be displayed in the definition include:

[0014] Define the fields checkOptions and defaultCheckedValue that need to be displayed in the configuration file, as well as the corresponding filtered processing function onChange.

[0015] Preferably,

[0016] The parameters received by the getColumnsFiltersProps function include:

[0017] checkOptions, defaultCheckedValue and onChange;

[0018] The checkOptions is a filterable list, and the filterable category contains sub-filtering items;

[0019] The defaultCheckedValue is the filter item selected by default;

[0020] The onChange is a confirmation process after screening.

[0021] Preferably,

[0022] The fields checkOptions and

[0023] defaultCheckedValue, and the corresponding filtered processing function onChange include:

[0024] The filterDropdown in the element of the list item columns is returned through the getColumnsFiltersProps function, and the filterDropdown in the element of the list item columns returns a list filter panel FilterPanel component;

[0025] The list filter panel FilterPanel component includes a search input box at the top, a filter item list in the middle, and an operation button at the bottom.

[0026] Preferably,

[0027] When the user enters a field in the search input box in the header, the middle filter list item displays the corresponding text, check status and secondary filter menu according to checkOptions and defaultCheckedValue;

[0028] When the user clicks the confirmation button in the operation buttons at the bottom, onChange is triggered and the Table displays the filtered data.

[0029] According to a second aspect of an embodiment of the present invention, a configurable list field screening device based on antd is provided, the device comprising:

[0030] Configuration module: used to introduce the Ant Design framework and apply the Table configuration to the corresponding list item columns;

[0031] Extension module: used to expand the list item columns;

[0032] Display module: used to create a getColumnsFiltersProps function, use the getColumnsFiltersProps function to configure the expanded list item columns, and define the list fields that need to be displayed.

[0033] According to a third aspect of an embodiment of the present invention, there is provided a storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a main controller, each step in the above method is implemented.

[0034] The technical solution provided by the embodiments of the present invention may have the following beneficial effects:

[0035] This application introduces the Ant Design framework and applies the Table configuration to the corresponding list item columns; expands the list item columns; creates a getColumnsFiltersProps function, uses the getColumnsFiltersProps function to configure the expanded list item columns, and defines the list fields to be displayed; this application provides a configurable list field filtering panel, which can greatly reduce the amount of code writing and improve development efficiency, while also improving the maintainability and extensibility of the code. Through configuration files, developers can flexibly customize the field filtering function of the list to meet the needs of different scenarios.

[0036] It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.

[0038] Figure 1is a flowchart of a configurable list field screening method based on antd according to an exemplary embodiment;

[0039] Figure 2 is a system schematic diagram of a configurable list field screening device based on antd according to another exemplary embodiment;

[0040] In the attached figure: 1- configuration module, 2- extension module, 3- display module. DETAILED DESCRIPTION

[0041] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. Instead, they are merely examples of devices and methods consistent with some aspects of the present invention as detailed in the appended claims.

[0042] Embodiment 1

[0043] Figure 1 is a flowchart of a configurable list field screening method based on antd according to an exemplary embodiment, such as Figure 1 As shown, the method includes:

[0044] S1, introduce the Ant Design framework and apply the Table configuration to the corresponding list item columns;

[0045] S2, expanding the list item columns;

[0046] S3, create a getColumnsFiltersProps function, use the getColumnsFiltersProps function to configure the expanded list item columns, and define the list fields that need to be displayed;

[0047] It is understandable that this application introduces the Ant Design framework and applies the Table therein to configure the corresponding list item columns; it is worth noting that antd is a React UI component library based on the Ant Design design system, which is mainly used for the development of enterprise-level mid- and back-end products; Ant Design is an enterprise-level UI design language and React component library launched by the Ant Financial team, aiming to provide developers and designers with better and more complete design solutions, which can meet the complex design needs of modern enterprises, and integrate user experience into services in a detailed and complete manner, thereby achieving the ultimate interactive effect and service quality; Ant Design is mainly used in the mid- and back-end systems, and it provides a wealth of components and tools to help developers quickly build beautiful and easy-to-use interfaces; at the same time, Ant Design also provides detailed documentation and examples for developers to learn and use;

[0048] Expand the list item columns; create a function getColumnsFiltersProps to return the filterDropdown and filterIcon in the list item columns element; the getColumnsFiltersProps function is a method commonly used in data tables or list components. Its function is to obtain the properties of the column filter (such as the search box). It is usually used to dynamically generate filters in the table header so that users can filter data as needed; filterDropdown is a custom filter menu. The interaction is written by the user according to the needs and has a high degree of freedom. For high reusability, this application encapsulates it into a function. The function only needs to pass in the function to be executed when the filtering operation occurs. Other parameters are taken from the props given by antd. Therefore, you can still use antd's filters and other APIs to return a complete menu component; in the main interface of filtericon, click the "Add Rule" button, enter the rule name and description, select the text range to be filtered, and set the filtering conditions; define rules through regular expressions or other filtering methods; filtericon supports exporting and importing rule files, which is convenient for users to share and synchronize rules between different devices;

[0049] Create a getColumnsFiltersProps function that accepts the following parameters:

[0050] checkOptions: filterable list, including sub-filter items;

[0051] defaultCheckedValue: the filter item selected by default;

[0052] onChange: confirmation processing after screening;

[0053] The filterDropdown returned by this function returns a list filter panel FilterPanel component, which includes a search input box at the top, a filter item list in the middle, and an operation button at the bottom. When the user enters in the search box, only the corresponding matching filter items are displayed in the middle. The filter list items in the middle display the corresponding text, check status, and secondary filter menu according to checkOptions and defaultCheckedValue. When the user clicks the confirmation operation button at the bottom, onChange is triggered, and the Table displays the filtered data. Among them, the FilterPanel component is a component specially designed for filters, and it has the following functional features:

[0054] Adsorption ability: As the page scrolls, the Filter Panel may have adsorption ability, that is, it will be fixed at a certain position on the screen, usually at a certain distance from the top, so that users can easily perform filtering operations.

[0055] Diversity: Both Panel and navItem may have animation effects, providing diverse display forms. The display form of the Panel is not fixed and can be customized according to user needs.

[0056] Performance optimization: For complex Panel content, performance optimization needs to be considered to ensure smooth operation under high load conditions.

[0057] Custom configuration: The configuration parameters of the Filter Panel can be specified, and the panel selection state can be initialized by passing the relevant filter ID through the URL.

[0058] Multiple selection and single selection: According to the filterMultiple setting of the column, the Filter Panel is divided into two parts based on whether multiple selections are allowed. The multiple selection part is implemented using checkbox, and the single selection part is implemented directly using list.

[0059] Popper effect: To achieve the popper effect, Popper in mixin is used and initialized in the mounted life cycle. When the table theme scrolls, the position of the popper is recalculated.

[0060] Advanced Filters: The Filters panel is divided into two parts: Filters and Advanced Filters; Filters can be quickly added to the panel from the Add filter menu, while Advanced filters can be set up in the Advanced Filter Settings dialog and then added to the Filters panel; Multiple filters can be combined into one Advanced Filter, with and / or any statements between each filter.

[0061] These features make the FilterPanel component a powerful and flexible filtering tool suitable for various scenarios where users need to perform filtering operations.

[0062] According to the above functional components and functions, when using the getColumnsFiltersProps function to extend the list item configuration column of Table, define the fields checkOptions and defaultCheckedValue to be displayed in the configuration file, as well as the corresponding filtered processing function onChange.

[0063] This application can flexibly customize the field filtering function of the list by configuring different fields and types. Developers can define the fields and filtering types to be displayed in the configuration file according to actual needs, including text input boxes, drop-down selection boxes, date selection boxes, etc.; the system generates corresponding interface elements based on the configuration information and supports users to enter filtering conditions.

[0064] Embodiment 2

[0065] Figure 2 is a system schematic diagram showing a configurable list field screening device based on antd according to another exemplary embodiment, the device comprising:

[0066] Configuration module 1: used to introduce the Ant Design framework and apply the Table configuration to the corresponding list item columns;

[0067] Extension module 2: used to expand the list item columns;

[0068] Display module 3: used to create a getColumnsFiltersProps function, use the getColumnsFiltersProps function to configure the expanded list item columns, and define the list fields that need to be displayed.

[0069] Embodiment three:

[0070] This embodiment provides a storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a main controller, each step in the above method is implemented;

[0071] It is understandable that the storage medium mentioned above can be a read-only memory, a magnetic disk or an optical disk, etc.

[0072] It can be understood that the same or similar parts of the above embodiments can be referenced to each other, and the contents not described in detail in some embodiments can refer to the same or similar contents in other embodiments.

[0073] It should be noted that, in the description of the present invention, the terms "first", "second", etc. are only used for descriptive purposes and cannot be understood as indicating or implying relative importance. In addition, in the description of the present invention, unless otherwise specified, the meaning of "plurality" refers to at least two.

[0074] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, segment or portion of code that includes one or more executable instructions for implementing the steps of a specific logical function or process, and the scope of the preferred embodiments of the present invention includes alternative implementations in which functions may not be performed in the order shown or discussed, including performing functions in a substantially simultaneous manner or in the reverse order depending on the functions involved, which should be understood by those skilled in the art to which the embodiments of the present invention belong.

[0075] It should be understood that the various parts of the present invention can be implemented by hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, a plurality of steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0076] A person skilled in the art may understand that all or part of the steps in the method for implementing the above-mentioned embodiment may be completed by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, which, when executed, includes one or a combination of the steps of the method embodiment.

[0077] In addition, each functional unit in each embodiment of the present invention may be integrated into a processing module, or each unit may exist physically separately, or two or more units may be integrated into one module. The above-mentioned integrated module may be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it may also be stored in a computer-readable storage medium.

[0078] The storage medium mentioned above can be a read-only memory, a magnetic disk or an optical disk, etc.

[0079] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "examples", "specific examples", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner.

[0080] Although the embodiments of the present invention have been shown and described above, it is to be understood that the above embodiments are exemplary and are not to be construed as limitations of the present invention. A person skilled in the art may change, modify, replace and vary the above embodiments within the scope of the present invention.

Claims

1. A configurable list field screening method based on antd, characterized in that: The method comprises: Introduce the Ant Design framework and apply the Table in it to configure the corresponding list item columns; Expand the list item columns; Create a getColumnsFiltersProps function, use the getColumnsFiltersProps function to configure the expanded list item columns, and define the list fields that need to be displayed.

2. The method according to claim 1, characterized in that The step of expanding the list item columns includes: Create a function getColumnsFiltersProps; The function getColumnsFiltersProps returns the filterDropdown and filterIcon in the element of the list item columns, thereby implementing the expansion of the list item columns.

3. The method according to claim 2, characterized in that The list fields that need to be displayed in the definition include: Define the fields checkOptions and defaultCheckedValue that need to be displayed in the configuration file, as well as the corresponding filtered processing function onChange.

4. The method according to claim 3, characterized in that: The parameters received by the getColumnsFiltersProps function include: checkOptions, defaultCheckedValue and onChange; The checkOptions is a filterable list, and the filterable category contains sub-filtering items; The defaultCheckedValue is the filter item selected by default; The onChange is a confirmation process after screening.

5. The method according to claim 4, characterized in that The fields checkOptions and defaultCheckedValue that need to be displayed are defined in the configuration file, and the corresponding filtered processing function onChange includes: The filterDropdown in the element of the list item columns is returned through the getColumnsFiltersProps function, and the filterDropdown in the element of the list item columns returns a list filter panel FilterPanel component; The list filter panel FilterPanel component includes a search input box at the top, a filter item list in the middle, and an operation button at the bottom.

6. The method according to claim 5, characterized in that When the user enters a field in the search input box in the header, the middle filter list item displays the corresponding text, check status and secondary filter menu according to checkOptions and defaultCheckedValue; When the user clicks the confirmation operation button in the operation buttons at the bottom, onChange is triggered, and the Table displays the filtered data.

7. A configurable list field screening device based on antd, characterized in that: The device comprises: Configuration module: used to introduce the Ant Design framework and apply the Table configuration to the corresponding list item columns; Extension module: used to expand the list item columns; Display module: used to create a getColumnsFiltersProps function, use the getColumnsFiltersProps function to configure the expanded list item columns, and define the list fields that need to be displayed.

8. A storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by the main controller, each step in the configurable list field screening method based on antd as described in any one of claims 1 to 6 is implemented.

Images