AntDesign-based table adjustment method and device, medium and electronic equipment

Abstract

Embodiments of the present application provide an Ant Design-based table adjustment method, device, medium and electronic equipment. The method comprises: displaying a table adjustment control in an interface, wherein the area occupied by the table adjustment control is less than a preset threshold in terms of the area ratio of the interface; in response to a click operation of a user on the table adjustment control, triggering a table adjustment event to pop up a layout data editing window of a table in the interface; in response to an editing operation of a user on the layout data editing window, determining target layout data; and based on the target layout data, adjusting the table layout form of table data in a table display area in the interface. The technical solution of the embodiments of the present application can improve the convenience and interactive friendliness of Ant Design-based table adjustment, and enhance the user experience.

Description

Technical Field

[0001] This application relates to the field of computer and data processing technology, and more specifically, to a table adjustment method, apparatus, medium, and electronic device based on Ant Design. Background Technology

[0002] Ant Design is an enterprise-level front-end / design solution for middle and back-end systems. It is committed to building upon design guidelines and basic components to extract typical templates, business components, and supporting design resources, thereby further enhancing the experience for both users and designers in the design and development process of enterprise-level middle and back-end products.

[0003] In Ant Design applications, the adjustment of table layouts based on existing interactive components is not convenient enough. Interface adjustments can easily lead to page errors, affecting component rendering and resulting in a less than user-friendly experience. Therefore, improving the ease of table adjustment and user-friendliness based on Ant Design to enhance the user experience is a pressing technical problem that needs to be solved. Summary of the Invention

[0004] The embodiments of this application provide a table adjustment method, apparatus, computer program product or computer program, computer-readable storage medium and electronic device based on Ant Design, which can at least to some extent improve the convenience and interactivity of table adjustment based on Ant Design and enhance the user experience.

[0005] Other features and advantages of this application will become apparent from the following detailed description, or may be learned in part from practice of this application.

[0006] According to one aspect of the embodiments of this application, a table adjustment method based on Ant Design is provided. The method includes: displaying a table adjustment control in an interface, wherein the area occupied by the table adjustment control is less than the area of ​​the interface compared to the area of ​​the interface; triggering a table adjustment event in response to a user's click operation on the table adjustment control to pop up a table layout data editing window in the interface; determining target layout data in response to a user's editing operation in the layout data editing window; and adjusting the table layout of the table data within the table display area in the interface based on the target layout data.

[0007] In some embodiments of this application, based on the foregoing scheme, the method further includes: displaying a tree list in the interface, the tree list including multiple tree nodes, the tree nodes being used to index table data in the server, wherein each tree node corresponds to a level, and tree nodes in adjacent levels are parent and child nodes; in response to a click operation on any tree node, downloading the table data corresponding to the arbitrary tree node from the server, and displaying the table data according to the default table layout.

[0008] In some embodiments of this application, based on the foregoing scheme, the table data includes data with multiple attributes, each attribute corresponding to a table column, the layout data editing window includes multiple attribute columns corresponding to the multiple attributes, each attribute column is configured with a checkbox, and determining the target layout data includes: in response to the user's checkbox operation, determining the target attribute as the target layout data, the target attribute is used to limit the display of the table column corresponding to the target attribute in the table display area.

[0009] In some embodiments of this application, based on the foregoing scheme, each attribute bar is further configured with a drag icon. The determination of target layout data includes: in response to the user's drag operation on the drag icon corresponding to the target attribute, determining the arrangement order of each target attribute as target layout data. The arrangement order of the target attributes is used to limit the display order of the table columns corresponding to each target attribute in the table display area.

[0010] In some embodiments of this application, based on the aforementioned scheme, the layout data editing window is divided into a left fixed attribute group, a right fixed attribute group, and a non-fixed attribute group. Determining the target layout data includes: responding to a user's drag operation on the drag icon corresponding to the target attribute, dragging the target attribute to the left fixed attribute group, the right fixed attribute group, or the non-fixed attribute group as the target layout data. Specifically, the table column corresponding to the target attribute in the left fixed attribute group is fixedly displayed on the left side of the table display area; the table column corresponding to the target attribute in the right fixed attribute group is fixedly displayed on the right side of the table display area; and the table column corresponding to the target attribute in the non-fixed attribute group is slidably displayed in the middle of the table display area.

[0011] In some embodiments of this application, based on the foregoing scheme, the table display area includes a slider, and the method further includes: in response to the user's sliding operation on the slider, sliding and displaying the table column corresponding to the target attribute in the non-fixed attribute group in the table display area.

[0012] In some embodiments of this application, based on the foregoing scheme, each table column in the table display area is configured with a column width adjustment control, and the method further includes: adjusting the column width of the table column corresponding to the arbitrary column width adjustment control in response to the user's movement operation on any column width adjustment control.

[0013] According to one aspect of the embodiments of this application, a table adjustment device based on Ant Design is provided. The device includes: a display unit for displaying table adjustment controls on an interface, wherein the area occupied by the table adjustment controls is less than the area of ​​the interface compared to a preset threshold; a trigger unit for triggering a table adjustment event in response to a user's click operation on the table adjustment controls, thereby popping up a table layout data editing window on the interface; a determination unit for determining target layout data in response to a user's editing operation on the layout data editing window; and an adjustment unit for adjusting the table layout of the table data within the table display area on the interface based on the target layout data.

[0014] According to one aspect of the embodiments of this application, a computer program product or computer program is provided, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods described in the above embodiments.

[0015] According to one aspect of the embodiments of this application, a computer-readable storage medium is provided, on which a computer program is stored, which, when executed by a processor, implements the method described in the above embodiments.

[0016] According to one aspect of the embodiments of this application, an electronic device is provided, including: one or more processors; and a storage device for storing one or more programs, which, when executed by the one or more processors, cause the one or more processors to perform the method described in the above embodiments.

[0017] In some embodiments of this application, when a user needs to adjust the table layout of the table data within the table display area of ​​the interface, they only need to click the table adjustment control to trigger the pop-up of the layout data editing window. In this window, the user edits the target layout data to adjust the table layout of the table data within the table display area based on the target layout data. When not in use, the layout data editing window is hidden. The advantages of this approach are twofold: firstly, it significantly saves interface space and simplifies the layout of interface elements, thereby improving the simplicity of the Ant Design-based table data display interface; secondly, the user can easily adjust the table layout of the table data within the table display area by clicking the table adjustment control and editing the target layout data within the window. This convenient adjustment method enhances the user-friendliness of the interface and improves the overall user experience.

[0018] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and do not limit this application. Attached Figure Description

[0019] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application. It is obvious that the drawings described below are merely some embodiments of this application, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort. In the drawings:

[0020] Figure 1 A system architecture diagram is shown that can be applied to the technical solutions of the embodiments of this application;

[0021] Figure 2 A flowchart of a table adjustment method based on Ant Design according to an embodiment of this application is shown;

[0022] Figure 3 An interface diagram of an Ant Design-based table adjustment according to an embodiment of this application is shown;

[0023] Figure 4 An interface diagram of an Ant Design-based table adjustment according to an embodiment of this application is shown;

[0024] Figure 5 An interface diagram of an Ant Design-based table adjustment according to an embodiment of this application is shown;

[0025] Figure 6An interface diagram of an Ant Design-based table adjustment according to an embodiment of this application is shown;

[0026] Figure 7 A block diagram of an Ant Design-based table adjustment device according to an embodiment of this application is shown;

[0027] Figure 8 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the present application is shown. Detailed Implementation

[0028] Exemplary embodiments will now be described more fully with reference to the accompanying drawings. However, these exemplary embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided to make this application more comprehensive and complete, and to fully convey the concept of the exemplary embodiments to those skilled in the art.

[0029] Furthermore, the described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. Numerous specific details are provided in the following description to give a thorough understanding of embodiments of this application. However, those skilled in the art will recognize that the technical solutions of this application can be practiced without one or more of the specific details, or other methods, components, apparatuses, steps, etc., can be employed. In other instances, well-known methods, apparatuses, implementations, or operations are not shown or described in detail to avoid obscuring various aspects of this application.

[0030] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0031] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0032] It should be noted that "multiple" in this article refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0033] Figure 1A system architecture diagram is shown that can be applied to the technical solutions of the embodiments of this application.

[0034] like Figure 1 As shown, the system architecture may include terminal devices (such as...) Figure 1 The device shown includes one or more of a smartphone 101, tablet computer 102, and portable computer 103 (which could also be a desktop computer, etc., but is not limited thereto; this application does not impose any limitations here), a network 104, and a server 105. The network 104 is a medium used to provide a communication link between the terminal device and the server 105. The network 104 can include various connection types, such as wired communication links, wireless communication links, etc.

[0035] It should be noted that the table adjustment method based on Ant Design provided in this application embodiment can be executed by a terminal device. Accordingly, the table adjustment device based on Ant Design is generally installed in the terminal device.

[0036] The implementation details of the technical solutions in the embodiments of this application are described in detail below:

[0037] Figure 2 A flowchart of an Ant Design-based table adjustment method according to an embodiment of this application is shown. This Ant Design-based table adjustment method can be executed by a device with computational processing capabilities, such as... Figure 1 The terminal device shown is used to execute this. (Refer to...) Figure 2 As shown, this Ant Design-based table adjustment method includes at least steps 210 to 240, which are detailed below:

[0038] Step 210: Display a table adjustment control on the interface, wherein the area occupied by the table adjustment control is less than the area of ​​the interface compared to a preset threshold.

[0039] Step 220: In response to the user's click operation on the table adjustment control, a table adjustment event is triggered to pop up the table layout data editing window in the interface.

[0040] Step 230: In response to the user's editing operation in the layout data editing window, determine the target layout data.

[0041] Step 240: Based on the target layout data, adjust the table layout of the table data in the table display area of ​​the interface.

[0042] To enable those skilled in the art to better understand this application, the following will be combined with Figure 3 and Figure 4 The following is an illustration using a specific example.

[0043] See Figure 3 and Figure 4 The diagrams show an interface diagram of a table adjustment based on Ant Design according to an embodiment of this application.

[0044] In this application, as Figure 3 The interface displays a table adjustment control 301 (i.e., "column settings"). The area occupied by the table adjustment control 301 is less than the area of ​​the interface compared to a preset threshold. Specifically, the preset threshold can be set to 1 / 100 or 1 / 200. It is understood that the preset threshold can be set arbitrarily and is not limited to those listed above. Furthermore, as... Figure 4 Users can trigger a table adjustment event by clicking the table adjustment control in the interface, which will then pop up a table layout data editing window 401. Users can edit the table in the table adjustment editing window 401 to determine the target layout data, and adjust the table layout of the table data in the table display area of ​​the interface based on the target layout data.

[0045] In this application, when a user needs to adjust the table layout of the table data within the table display area of ​​the interface, they only need to click the table adjustment control to trigger the pop-up layout data editing window. In this window, the user can edit the target layout data to adjust the table layout of the table data within the table display area based on the target layout data. When not in use, the layout data editing window is hidden. The advantages of this approach are twofold: firstly, it significantly saves interface space and simplifies the layout of interface elements, thereby improving the simplicity of the Ant Design-based table data display interface; secondly, users can easily adjust the table layout by clicking the table adjustment control to bring up the layout data editing window and editing the target layout data. This convenient adjustment method enhances the user-friendliness of the interface and improves the overall user experience.

[0046] In this application, steps 201 to 202 may also be performed:

[0047] Step 201: Display a tree list on the interface. The tree list includes multiple tree nodes. The tree nodes are used to index table data in the server. Each tree node corresponds to a level, and tree nodes at adjacent levels are parent and child nodes.

[0048] Step 202: In response to a click operation on any tree node, download the table data corresponding to the tree node from the server and display the table data in the default table layout.

[0049] Please refer to the following in this application: Figure 3 The interface displays a tree list 302. By clicking on any tree node in the tree list 302, table data corresponding to that tree node can be downloaded from the server. For example, in Figure 3 In the middle, by clicking the tree node of "All Material Data" in the tree list 302, the table data corresponding to all materials can be downloaded from the server. If the target layout data has been edited, the table data can be displayed in the table display area of ​​the interface according to the table layout form defined by the target layout data.

[0050] In this application, the table data may include multiple attributes, for example, please refer to... Figure 3 The tabular data corresponding to the material data can include attributes such as "raw material code", "raw material name", "category", and "composition".

[0051] In this application, each attribute can correspond to a column in a table, and the layout data editing window includes multiple attribute columns corresponding to the multiple attributes. Each attribute column is configured with a checkbox, for example... Figure 4 The layout data editing window includes eight attribute columns: "Raw Material Code", "Raw Material Name", "Category", "Ingredients", "Remarks", "Creation Time", "Update Time", and "Status".

[0052] Furthermore, in this application, as Figure 2 Step 230, as shown, determines the target layout data, which can be performed as follows: Step 251:

[0053] Step 251: In response to the user's checkbox operation, determine the target attribute as the target layout data. The target attribute is used to limit the display of the table column corresponding to the target attribute in the table display area.

[0054] Please continue to refer to Figure 4 For example, when a user checks the checkboxes configured in the "Raw Material Code", "Raw Material Name", "Category", "Ingredients", "Remarks", "Creation Time", "Update Time", and "Status" columns, the corresponding table columns for "Raw Material Code", "Raw Material Name", "Category", "Ingredients", "Remarks", "Creation Time", "Update Time", and "Status" columns will be displayed in the table display area. It is understandable that if a checkbox configured in a certain attribute column is not checked, then the table column corresponding to that attribute will not be displayed in the table display area.

[0055] In this application, each attribute bar is also configured with a drag-and-drop icon (e.g., Figure 4 The icon to the left of the checkbox in the layout data editing window 401 shown.

[0056] Furthermore, in this application, as Figure 2 Step 230, as shown, determines the target layout data, which can be performed as follows: Step 252:

[0057] Step 252: In response to the user's drag operation on the drag icon corresponding to the target attribute, determine the arrangement order of each target attribute as target layout data. The arrangement order of the target attributes is used to limit the display order of the table columns corresponding to each target attribute in the table display area.

[0058] To enable those skilled in the art to better understand this application, the following will be combined with Figure 5 and Figure 6 The following is an illustration using a specific example.

[0059] See Figure 5 and Figure 6 The diagrams show an interface diagram of a table adjustment based on Ant Design according to an embodiment of this application.

[0060] Specifically, for example, comparison Figure 5 and Figure 6 When a user drags the "Update Time" attribute to the very front of the layout data editing window, the table column corresponding to the "Update Time" attribute will be displayed on the far left of the table display area.

[0061] See also in this application. Figure 5 The layout data editing window can also be divided into a left fixed attribute group 501 (i.e., "fixed on the left"), a right fixed attribute group 503 (i.e., "fixed on the right"), and a non-fixed attribute group 502 (i.e., "non-fixed").

[0062] Furthermore, in this application, as Figure 2 Step 230, as shown, determines the target layout data, which can be performed as follows: Step 253:

[0063] Step 253: In response to the user's drag operation on the drag icon corresponding to the target attribute, drag the target attribute to the left fixed attribute group, the right fixed attribute group, or the non-fixed attribute group as target layout data. Specifically, the table column corresponding to the target attribute in the left fixed attribute group is fixedly displayed on the left side of the table display area; the table column corresponding to the target attribute in the right fixed attribute group is fixedly displayed on the right side of the table display area; and the table column corresponding to the target attribute in the non-fixed attribute group is slidably displayed in the middle of the table display area.

[0064] Specifically, for example, refer to Figure 5 When the user drags the "Raw Material Name" attribute to the left fixed attribute group 501, the table column corresponding to the "Raw Material Name" attribute is fixedly displayed on the left side of the table display area; when the user drags the "Creation Time" and "Update Time" attributes to the non-fixed attribute group 502, the table columns corresponding to the "Creation Time" and "Update Time" attributes are slidably displayed in the middle of the table display area; when the user drags the "Status" attribute to the right fixed attribute group 503, the table column corresponding to the "Status" attribute is fixedly displayed on the right side of the table display area.

[0065] For example, refer to Figure 6 When the user drags the "Raw Material Name" and "Update Time" attributes to the left fixed attribute group 601, the table columns corresponding to the "Raw Material Name" and "Update Time" attributes are fixedly displayed on the left side of the table display area; when the user drags the "Creation Time" attribute to the non-fixed attribute group 602, the table column corresponding to the "Creation Time" attribute is slidably displayed in the middle of the table display area; when the user drags the "Status" attribute to the right fixed attribute group 603, the table column corresponding to the "Status" attribute is fixedly displayed on the right side of the table display area.

[0066] In this application, reference is made to Figure 6 The table display area may also include a slider 604. Furthermore, this application may also perform the following step 261:

[0067] Step 261: In response to the user's sliding operation on the slider, slide the table column corresponding to the target attribute in the non-fixed attribute group to be displayed in the table display area.

[0068] In this application, reference is made to Figure 6 Each table column within the table display area is configured with a column width adjustment control 605. Furthermore, this application can also perform the following step 271:

[0069] Step 271: In response to the user's movement operation on any column width adjustment control, adjust the column width of the table column corresponding to the arbitrary column width adjustment control.

[0070] It should be noted that the technical solution proposed in this application can be implemented based on the Ant Design framework by designing interactive components. The following points can be used as a reference for understanding the underlying principles:

[0071] (1) Define the basic functions of the component (drag data rows, drag area judgment, fixed order, check state interaction).

[0072] 1.1 Define the configuration column field data.

[0073] 1.2 Define the order of column fields in the configuration.

[0074] (2) The component encapsulation pattern is adopted, and the component rendering is achieved by combining React and Ant Design components. The drag-and-drop logic is implemented by using Popver and React-Dnd.

[0075] 3.1 Define the selected state inside the component.

[0076] 3.2 Define the component's prop parameters to receive the component's display state.

[0077] 3.3 Define the checkbox change event and the drag event.

[0078] 3.4 Define the parameters to monitor.

[0079] (3) Write the component's interaction logic (initialize data, handle common user interaction methods).

[0080] (4) The data (array object) passed from the component is processed internally and then integrated into the component.

[0081] (6) Handle component user interaction events such as user clicks, checkmarks, drags, and drop operations.

[0082] (7) Column setting function: left freeze, no freeze, right freeze, drag to adjust column order logic.

[0083] It's important to note that an interactive component is defined as a component that receives user input (such as keyboard or mouse activity), encapsulates data and methods to achieve new functionalities. Components have their own properties and methods; properties are simple accessors to the component's data, while methods provide simple and visible functionalities.

[0084] In one embodiment of this application, The implementation code for the above technical solution can be found below:

[0085]

[0086] In this application, when a user needs to adjust the table layout of the table data within the table display area of ​​the interface, they only need to click the table adjustment control to trigger the pop-up layout data editing window. In this window, the user can edit the target layout data to adjust the table layout of the table data within the table display area based on the target layout data. When not in use, the layout data editing window is hidden. The advantages of this approach are twofold: firstly, it significantly saves interface space and simplifies the layout of interface elements, thereby improving the simplicity of the Ant Design-based table data display interface; secondly, users can easily adjust the table layout by clicking the table adjustment control to bring up the layout data editing window and editing the target layout data. This convenient adjustment method enhances the user-friendliness of the interface and improves the overall user experience.

[0087] Furthermore, the interactive components provided in this application can significantly reduce the workload during project development, improve development efficiency, greatly enhance the functionality of table components in projects, and easily control the display status of tables. This application also improves the working scenarios of components, making user interaction smooth and convenient, with drag-and-drop sorting and row data selection. Compared with existing technologies, it saves more time in adjusting table layout and improves the user's interactive experience.

[0088] The following describes an apparatus embodiment of this application, which can be used to execute the table adjustment method based on AntDesign in the above embodiments of this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the table adjustment method based on AntDesign described above.

[0089] Figure 7 A block diagram of a table adjustment device based on Ant Design according to an embodiment of this application is shown.

[0090] Reference Figure 7 As shown, an Ant Design-based table adjustment device 700 according to an embodiment of this application includes: a display unit 701, a trigger unit 702, a determination unit 703, and an adjustment unit 704.

[0091] The display unit 701 is used to display a table adjustment control on the interface, wherein the area occupied by the table adjustment control is less than the area of ​​the interface compared to a preset threshold; the triggering unit 702 is used to trigger a table adjustment event in response to a user's click operation on the table adjustment control, so as to pop up a table layout data editing window on the interface; the determining unit 703 is used to determine the target layout data in response to the user's editing operation on the layout data editing window; and the adjusting unit 704 is used to adjust the table layout of the table data in the table display area of ​​the interface based on the target layout data.

[0092] In some embodiments of this application, based on the foregoing scheme, the display unit 701 is configured to: display a tree list in the interface, the tree list including multiple tree nodes, the tree nodes being used to index table data in the server, wherein each tree node corresponds to a level, and tree nodes in adjacent levels are parent and child nodes; in response to a click operation on any tree node, download the table data corresponding to the arbitrary tree node from the server, and display the table data according to the default table layout.

[0093] In some embodiments of this application, based on the foregoing scheme, the table data includes data with multiple attributes, each attribute corresponding to a table column, the layout data editing window includes multiple attribute columns corresponding to the multiple attributes, each attribute column is configured with a checkbox, and the determining unit 703 is configured to: in response to the user's checkbox operation, determine the target attribute as the target layout data, the target attribute is used to limit the display of the table column corresponding to the target attribute in the table display area.

[0094] In some embodiments of this application, based on the foregoing scheme, each attribute bar is further configured with a drag icon, and the determining unit 703 is further configured to: in response to the user's drag operation on the drag icon corresponding to the target attribute, determine the arrangement order of each target attribute as target layout data, wherein the arrangement order of the target attributes is used to limit the display order of the table columns corresponding to each target attribute in the table display area.

[0095] In some embodiments of this application, based on the foregoing scheme, the layout data editing window is divided into a left fixed attribute group, a right fixed attribute group, and a non-fixed attribute group. The determining unit 703 is further configured to: in response to a user's drag operation on the drag icon corresponding to the target attribute, drag the target attribute to the left fixed attribute group, the right fixed attribute group, or the non-fixed attribute group as target layout data. The table column corresponding to the target attribute in the left fixed attribute group is fixedly displayed on the left side of the table display area; the table column corresponding to the target attribute in the right fixed attribute group is fixedly displayed on the right side of the table display area; and the table column corresponding to the target attribute in the non-fixed attribute group is slidably displayed in the middle of the table display area.

[0096] In some embodiments of this application, based on the foregoing scheme, the table display area includes a slider, and the device further includes: a display unit, used to respond to the user's sliding operation on the slider to slide and display the table column corresponding to the target attribute in the non-fixed attribute group in the table display area.

[0097] In some embodiments of this application, based on the foregoing scheme, each table column in the table display area is configured with a column width adjustment control, and the adjustment unit 704 is configured to: adjust the column width of the table column corresponding to any column width adjustment control in response to the user's movement operation on any column width adjustment control.

[0098] Figure 8 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the present application is shown.

[0099] It should be noted that, Figure 8 The computer system 800 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0100] like Figure 8As shown, the computer system 800 includes a Central Processing Unit (CPU) 801, which can perform various appropriate actions and processes based on programs stored in Read-Only Memory (ROM) 802 or programs loaded from storage portion 808 into Random Access Memory (RAM) 803, such as performing the methods described in the above embodiments. The RAM 803 also stores various programs and data required for system operation. The CPU 801, ROM 802, and RAM 803 are interconnected via a bus 804. An Input / Output (I / O) interface 805 is also connected to the bus 804.

[0101] The following components are connected to I / O interface 805: an input section 806 including a keyboard, mouse, etc.; an output section 807 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 808 including a hard disk, etc.; and a communication section 809 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 809 performs communication processing via a network such as the Internet. A drive 810 is also connected to I / O interface 805 as needed. A removable medium 811, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 810 as needed so that computer programs read from it can be installed into storage section 808 as needed.

[0102] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a computer-readable storage medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 809, and / or installed from removable medium 811. When the computer program is executed by central processing unit (CPU) 801, it performs various functions defined in the system of this application.

[0103] It should be noted that the computer-readable storage medium shown in the embodiments of this application can be a computer-readable signal medium, a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable compact disc read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such transmitted data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable storage medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable storage medium can be transmitted using any suitable medium, including but not limited to wireless, wired, etc., or any suitable combination thereof.

[0104] 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 application. Each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains 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, can 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.

[0105] The units described in the embodiments of this application can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the specific unit itself.

[0106] In another aspect, this application also provides a computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods described in the above embodiments.

[0107] In another aspect, this application also provides a computer-readable storage medium, which may be included in the electronic device described in the above embodiments; or it may exist independently and not assembled into the electronic device. The computer-readable storage medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to perform the methods described in the above embodiments.

[0108] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to the embodiments of this application, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0109] Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, touch terminal, or network device, etc.) to execute the method according to the embodiments of this application.

[0110] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the embodiments disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein.

[0111] It should be understood that this application is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A table adjustment method based on Ant Design, characterized in that, The method includes: A table adjustment control is displayed in the interface, and the ratio of the area occupied by the table adjustment control to the area of ​​the interface is less than a preset threshold. In response to the user's click operation on the table adjustment control, a table adjustment event is triggered to pop up the table layout data editing window in the interface; In response to the user's editing operation in the layout data editing window, determine the target layout data; The layout data editing window is divided into a left fixed attribute group, a right fixed attribute group, and a non-fixed attribute group. Determining the target layout data includes: In response to a user's drag operation on the icon corresponding to the target attribute, the target attribute is dragged to the left fixed attribute group, the right fixed attribute group, or the non-fixed attribute group as target layout data. Specifically, the table column corresponding to the target attribute in the left fixed attribute group is fixedly displayed on the left side of the table display area; the table column corresponding to the target attribute in the right fixed attribute group is fixedly displayed on the right side of the table display area; and the table column corresponding to the target attribute in the non-fixed attribute group is slidably displayed in the middle of the table display area. Based on the target layout data, adjust the table layout of the table data in the table display area of ​​the interface; Also includes: The interface displays a tree list, which includes multiple tree nodes. These tree nodes are used to index table data in the server. Each tree node corresponds to a level, and tree nodes at adjacent levels are parent and child nodes. In response to a click operation on any tree node, download the table data corresponding to the tree node from the server and display the table data in the default table layout. The table data includes data with multiple attributes, each attribute corresponding to a table column. The layout data editing window includes multiple attribute columns corresponding to the multiple attributes, each attribute column being configured with a checkbox. Determining the target layout data includes: In response to the user's selection of the target checkbox, the target attribute is determined as the target layout data. The target attribute is used to limit the display of the table column corresponding to the target attribute within the table display area.

2. The method according to claim 1, characterized in that, Each attribute bar also has a drag-and-drop icon. The process of determining the target layout data includes: In response to the user's drag operation on the drag icon corresponding to the target attribute, the arrangement order of each target attribute is determined as target layout data. The arrangement order of the target attributes is used to limit the display order of the table columns corresponding to each target attribute in the table display area.

3. The method according to claim 2, characterized in that, The table display area includes a slider, and the method further includes: In response to the user's sliding operation on the slider, the table column corresponding to the target attribute within the non-fixed attribute group is displayed in the table display area.

4. The method according to any one of claims 1 to 3, characterized in that, Each table column within the table display area is configured with a column width adjustment control, and the method further includes: In response to a user's movement of any column width adjustment control, the column width of the table column corresponding to that column width adjustment control is adjusted.

5. A table adjustment device based on Ant Design, characterized in that, The device includes: The display unit is used to display table adjustment controls in the interface, wherein the area occupied by the table adjustment controls is less than the area of ​​the interface compared to a preset threshold. The triggering unit is used to respond to the user's click operation on the table adjustment control, trigger a table adjustment event, and pop up the table layout data editing window in the interface; The determining unit is used to determine the target layout data in response to the user's editing operation in the layout data editing window; The layout data editing window is divided into a left fixed attribute group, a right fixed attribute group, and a non-fixed attribute group. Determining the target layout data includes: In response to a user's drag operation on the icon corresponding to the target attribute, the target attribute is dragged to the left fixed attribute group, the right fixed attribute group, or the non-fixed attribute group as target layout data. Specifically, the table column corresponding to the target attribute in the left fixed attribute group is fixedly displayed on the left side of the table display area; the table column corresponding to the target attribute in the right fixed attribute group is fixedly displayed on the right side of the table display area; and the table column corresponding to the target attribute in the non-fixed attribute group is slidably displayed in the middle of the table display area. An adjustment unit is used to adjust the table layout of the table data within the table display area of ​​the interface based on the target layout data. Also includes: The interface displays a tree list, which includes multiple tree nodes. These tree nodes are used to index table data in the server. Each tree node corresponds to a level, and tree nodes at adjacent levels are parent and child nodes. In response to a click operation on any tree node, download the table data corresponding to the tree node from the server and display the table data in the default table layout. The table data includes data with multiple attributes, each attribute corresponding to a table column. The layout data editing window includes multiple attribute columns corresponding to the multiple attributes, each attribute column being configured with a checkbox. Determining the target layout data includes: In response to the user's selection of the target checkbox, the target attribute is determined as the target layout data. The target attribute is used to limit the display of the table column corresponding to the target attribute within the table display area.

6. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores at least one piece of program code, which is loaded and executed by a processor to perform the operations performed by the method as described in any one of claims 1 to 4.

7. An electronic device, characterized in that, The electronic device includes one or more processors and one or more memories, wherein at least one piece of program code is stored in the one or more memories, and the at least one piece of program code is loaded and executed by the one or more processors to perform the operation performed by the method as described in any one of claims 1 to 4.

Images