A community governance data display method, device and medium based on Antd
By dynamically constructing the columns and dataSource properties of the Antd Table component, the problem of fixed header field configuration is solved, the flexibility and real-time display of community governance data are achieved, and the user experience and data interactivity are improved.
Patent Information
- Application Number
- CN202410716578.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2024-06-04
- Publication Date
- 2025-09-26
- Estimated Expiration
- 2044-06-04
AI Technical Summary
The Antd Table component has a fixed header field configuration in the community governance field and cannot adapt to dynamically changing data requirements, resulting in increased development complexity and limited application scope.
By dynamically constructing the columns and dataSource properties of the table, the table header and data source are generated according to the actual structure and content of the community governance data, achieving flexible display of the table.
It improves the flexibility and adaptability of data display, reduces development and maintenance costs, enhances user experience and data interactivity, and ensures the real-time nature of data.
Smart Images
Figure CN118689923B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of Internet technology, and in particular to a method, device, and medium for displaying community governance data based on Antd. Background Art
[0002] In the field of community governance, effective data presentation is crucial for decision-making, information dissemination, and communication among community members. Tables, as an intuitive and structured data display method, are widely used in this field. With the continuous development of web technology, front-end frameworks such as React have become increasingly popular due to their efficiency and flexibility. Antd, a React UI component library based on the AntDesign design system, has gained a strong foothold in the development of community governance-related web applications with its elegant design and powerful functionality.
[0003] However, while the Antd component library provides a rich set of UI components to meet the diverse needs of developers, its Table component exhibits certain limitations in practical applications. Specifically, the traditional Antd Table component's header (columns) design is fixed, meaning it cannot dynamically adjust header fields based on actual application scenarios. In the field of community governance, data fields may change due to governance needs, policy changes, or data updates. Therefore, a fixed header design clearly cannot meet such dynamic needs.
[0004] To accommodate diverse data display requirements, developers often have to write and maintain multiple sets of header configurations. This not only increases development workload and code complexity, but also hinders future maintenance and expansion. More importantly, this static header configuration method cannot flexibly respond to changes in data fields, limiting the scope and efficiency of the Table component in displaying community governance data.
[0005] In summary, the fixed nature of the Antd Table component's header field configuration has become a major technical bottleneck hindering its wider application in community governance. Therefore, how to break the fixed nature of the Antd Table component's header field configuration and improve community governance efficiency has become a pressing technical issue. Summary of the Invention
[0006] The embodiments of the present application provide a community governance data display method, device and medium based on Antd to solve the following technical problem: how to break the current fixed application of the Antd Table component in the header field configuration to improve community governance efficiency.
[0007] In the first aspect, an embodiment of the present application provides a community governance data display method based on Antd, characterized in that the method includes: obtaining the community governance data to be displayed based on a preset back-end interface, and converting the community governance data to be displayed into a community governance data array; traversing the community governance data array, and dynamically constructing the header columns attribute of the governance data table to be displayed corresponding to the community governance data array; and traversing the community governance data array, and dynamically constructing the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array; displaying the governance data table to be displayed based on the header columns attribute and the data source dataSource attribute.
[0008] In one implementation of the present application, the community governance data to be displayed is converted into a community governance data array, specifically including: parsing the community governance data to be displayed to extract the data fields to be displayed; and organizing the data fields into an array form according to a preset data format to form a community governance data array.
[0009] In one implementation of the present application, the community governance data array is traversed, and the header columns attribute of the governance data table to be displayed corresponding to the community governance data array is dynamically constructed, specifically including: extracting the key fields of each element in the community governance data array; based on the key fields, dynamically constructing the title, dataIndex and key fields in the columns attribute; combining all constructed columns attributes into a columns attribute array, and determining the columns attribute array as the header of the governance data table to be displayed.
[0010] In one implementation of the present application, the community governance data array is traversed, and the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array is dynamically constructed, specifically including: for each element in the community governance data array, according to its data structure and the dataIndex of the columns attribute, constructing the key-value pairs of each object in the dataSource attribute; combining all constructed key-value pairs into a key-value pair array, and determining the key-value pair array as the data source of the governance data table to be displayed.
[0011] In one implementation of the present application, the governance data table to be displayed is displayed based on the table header columns attribute and the data source dataSource attribute, specifically including: using the Table component in the Antd component library to pass the dynamically constructed columns attribute and dataSource attribute to the Table component; through the rendering function of the Table component, the governance data table to be displayed is presented in a visual form for users to view and analyze community governance data.
[0012] In one implementation of the present application, obtaining the community governance data to be displayed based on a preset back-end interface specifically includes: sending an HTTP request to the preset back-end interface; receiving response data returned by the back-end interface; wherein the response data includes the community governance data to be displayed; parsing the response data to extract the community governance data to be displayed.
[0013] In one implementation of the present application, after displaying the governance data table to be displayed based on the table header columns attribute and the data source dataSource attribute, the method also includes: sorting, filtering or paging the governance data table to be displayed according to the user's interactive operation; wherein the sorting processing includes sorting the data in the data source dataSource attribute according to the sorting field and sorting method selected by the user, and re-rendering the table to display the sorted data; the filtering processing includes filtering the data in the data source dataSource attribute according to the filtering conditions set by the user, and re-rendering the table to display the filtered data; the paging processing includes extracting the corresponding data from the data source dataSource attribute according to the page number selected by the user and the number of data items displayed per page, and re-rendering the table to display the data of the current page.
[0014] In one implementation of the present application, the method further includes: monitoring data update events of the back-end interface; when data updates are monitored, re-obtaining the latest community governance data to be displayed from the back-end interface, and updating the governance data table to be displayed.
[0015] In the second aspect, an embodiment of the present application also provides a community governance data display device based on Antd, characterized in that the device includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can: obtain the community governance data to be displayed based on a preset back-end interface, and convert the community governance data to be displayed into a community governance data array; traverse the community governance data array, and dynamically construct the header columns attribute of the governance data table to be displayed corresponding to the community governance data array; and traverse the community governance data array, and dynamically construct the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array; display the governance data table to be displayed based on the header columns attribute and the data source dataSource attribute.
[0016] In the third aspect, an embodiment of the present application also provides a non-volatile computer storage medium for displaying community governance data based on Antd, which stores computer executable instructions, and is characterized in that the computer executable instructions are set to: obtain the community governance data to be displayed based on a preset back-end interface, and convert the community governance data to be displayed into a community governance data array; traverse the community governance data array, and dynamically construct the header columns attribute of the governance data table to be displayed corresponding to the community governance data array; and traverse the community governance data array, and dynamically construct the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array; display the governance data table to be displayed based on the header columns attribute and the data source dataSource attribute.
[0017] The embodiments of the present application provide a method, device, and medium for displaying community governance data based on Antd, which have the following beneficial effects:
[0018] 1. Improved flexibility and adaptability of data display: By dynamically constructing the table's columns and dataSource properties, this invention can flexibly generate corresponding tables based on different data structures and contents, eliminating the need to write and maintain multiple sets of table headers. This greatly improves the system's flexibility and adaptability to different data formats.
[0019] 2. Reduced development and maintenance costs: Traditional data display methods often require writing specific table display code for each data format, which not only increases development complexity but also increases maintenance costs. The dynamic construction method of this invention greatly simplifies this process, reducing development and maintenance costs.
[0020] 3. Improved user experience: Since tables can be dynamically constructed in real time based on the data returned by the back-end interface, users can see the latest and most accurate data display more quickly, which undoubtedly improves the user experience.
[0021] 4. Enhanced data interactivity: The present invention not only supports dynamic display of data, but also provides interactive functions such as sorting, filtering and paging, which enables users to view and analyze data more conveniently and meets users' needs for in-depth data mining and personalized viewing.
[0022] 5. Ensures real-time data: By monitoring data update events on the back-end interface and re-acquiring and updating the table when the data is updated, the present invention can ensure that the data seen by users is always the latest, which is crucial for community governance work that requires real-time grasp of data dynamics. BRIEF DESCRIPTION OF THE DRAWINGS
[0023] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:
[0024] Figure 1 A flowchart of a community governance data display method based on Antd provided in an embodiment of this application;
[0025] Figure 2 A schematic diagram of the internal structure of an Antd-based community governance data display device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0026] To make the purpose, technical solutions, and advantages of this application more clear, the technical solutions of this application will be clearly and completely described below in conjunction with the specific embodiments of this application and the corresponding drawings. Obviously, the embodiments described are only part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.
[0027] The embodiments of the present application provide a community governance data display method, device and medium based on Antd to solve the following technical problem: how to break the current fixed application of the Antd Table component in the header field configuration to improve community governance efficiency.
[0028] The technical solutions proposed in the embodiments of the present application are described in detail below with reference to the accompanying drawings.
[0029] Figure 1 This is a flow chart of a method for displaying community governance data based on Antd provided in the embodiment of this application. Figure 1 As shown, the embodiment of the present application provides a community governance data display method based on Antd, which specifically includes the following steps:
[0030] Step 101: Obtain the community governance data to be displayed based on a preset backend interface, and convert the community governance data to be displayed into a community governance data array.
[0031] In one embodiment of the present application, in order to realize the display of community governance data based on Antd, the community governance data to be displayed is first obtained based on a preset backend interface.
[0032] Specifically, an HTTP request is sent to a preset backend interface; response data returned by the backend interface is received; wherein the response data includes the community governance data to be displayed; and the response data is parsed to extract the community governance data to be displayed.
[0033] In one embodiment, a suitable HTTP request is constructed based on the definition and requirements of the backend interface. This typically includes specifying the requested URL (i.e., the address of the backend interface), the request method (e.g., GET, POST, etc.), request header information (e.g., authentication information, content type, etc.), and possibly a request body (for POST or PUT requests, some data may need to be sent to the backend). The constructed HTTP request is sent to the backend interface using a frontend network request library (e.g., axios, fetch API, etc.).
[0034] After sending a request, the frontend waits for a response from the backend. After processing the request, the backend returns an HTTP response. After receiving the HTTP response from the backend, the frontend needs to extract the data in the response body. This data is typically encoded in JSON format and contains the community governance data to be displayed.
[0035] Since the data returned by the backend is typically in JSON format, the frontend needs to use a JSON parsing library (such as JavaScript's native JSON.parse method) to parse the received JSON string into a data structure that the frontend can manipulate, such as a JavaScript object or array. After parsing the JSON data, the frontend needs to extract the community governance data to be displayed from the parsed data structure. This data may include various statistical indicators, governance event details, resident feedback information, etc., depending on the design of the backend interface and the actual needs of community governance.
[0036] During the process of sending requests, receiving responses, and parsing data, the frontend also needs to implement error handling mechanisms. For example, if the backend interface is unreachable, an unexpected HTTP status code is returned, or the response body is malformed, the frontend should be able to catch these errors and provide appropriate prompts or retry. To improve system robustness, the frontend can also implement a request retry mechanism. When encountering network fluctuations or temporary unavailability of the backend service, retrying the request can increase the probability of successfully retrieving data.
[0037] Furthermore, the community governance data to be displayed is converted into a community governance data array.
[0038] Specifically, the community governance data to be displayed is parsed to extract the data fields to be displayed; the data fields are organized into an array form according to a preset data format to form a community governance data array.
[0039] In one embodiment, parsing the community governance data to be displayed requires identifying the format of the community governance data to be displayed. These data may be provided in JSON, XML, or other structured data formats. For JSON data, you can use JavaScript's JSON.parse method for parsing; for XML data, you may need to use methods such as DOM parser or SAX parser. After parsing the data, extract the data fields that need to be displayed. These fields may include community name, governance event type, event occurrence time, processing status, relevant responsible persons, etc. Which fields are extracted depends on the subsequent display requirements and user concerns.
[0040] Based on the preset data display format, determine how to organize the extracted data fields into array form. This usually involves organizing the data according to a specific structure to match the data format of the front-end display component (such as a table). Create an empty array to store the organized community governance data. Then, traverse the parsed data, convert each data item into an array element according to the preset format, and add it to the data array. In the process of organizing the data, you may encounter anomalies such as missing data and incorrect format. In order to ensure the accuracy and completeness of the data, these anomalies need to be handled, such as providing default values, performing data cleaning, or marking abnormal data.
[0041] After completing the above steps, an array containing all the community governance data to be displayed is generated. This array will serve as input for subsequent data display components, dynamically generating tables or other visualizations on the front-end interface. After generating the data array, it is recommended to verify the data to ensure its correctness and consistency. This can be achieved through simple data validation, logical checks, or comparisons with other data sources.
[0042] Step 102: traverse the community governance data array and dynamically construct the header columns attribute of the governance data table to be displayed corresponding to the community governance data array.
[0043] In one embodiment of the present application, after the community governance data to be displayed is converted into a community governance data array, it is necessary to traverse the community governance data array and dynamically construct the header columns attribute of the governance data table to be displayed corresponding to the community governance data array.
[0044] Specifically, extract the key fields of each element in the community governance data array; based on the key fields, dynamically construct the title, dataIndex and key fields in the columns attribute; combine all constructed columns attributes into a columns attribute array, and determine the columns attribute array as the header of the governance data table to be displayed.
[0045] In one embodiment, before starting the traversal, an empty array needs to be created to store the columns property objects that will be constructed later. Ensure that the community governance data array has been obtained and transformed so that key fields can be extracted from it.
[0046] Use a loop structure (such as a for loop or the array's .forEach() method) to iterate over each element of the community governance data array. During the traversal, focus on the key fields in each element, which will serve as the basis for the table columns.
[0047] For each element in the array, analyze and extract the key fields it contains. Key fields are those that are important in data presentation and need to be displayed as column headers in the table. Extracted key fields may include, but are not limited to: community name, event type, processing status, timestamp, etc., depending on the structure and content of the community governance data.
[0048] For each extracted key field, a columns property object is dynamically constructed. This object contains at least the following fields: title: The text displayed in the table column title, which usually corresponds to the name of the key field. dataIndex: Specifies the name of the corresponding field in the data source for this column, which is used to extract the corresponding data from the data source. key: A unique identifier used to identify and optimize rendering performance in front-end frameworks such as React. Other properties such as width (width), rendering function (render), etc. can also be added as needed to customize the display and behavior of the column.
[0049] Append each dynamically constructed columns property object to the previously created empty array. As the traversal completes, this array will contain information about all table columns to be displayed. After the traversal is complete, the resulting columns property array will be the header of the governance data table to be displayed. This array will be used directly in subsequent table component rendering to ensure that the table columns correspond to the fields in the data source.
[0050] Step 103: traverse the community governance data array and dynamically construct the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array.
[0051] In one embodiment of the present application, after converting the community governance data to be displayed into a community governance data array, it is also necessary to traverse the community governance data array and dynamically construct the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array.
[0052] Specifically, for each element in the community governance data array, construct the key-value pairs of each object in the dataSource attribute according to its data structure and the dataIndex of the columns attribute; combine all constructed key-value pairs into a key-value pair array, and determine the key-value pair array as the data source of the governance data table to be displayed.
[0053] In one embodiment, when dynamically constructing the dataSource property, before starting to traverse, it is necessary to ensure that the community governance data array has been correctly converted and the data structure of each element in the array is understood. Then, an empty array is created to store the constructed dataSource property objects.
[0054] Use appropriate loop structures (such as for loops, forEach methods, etc.) to iterate over each element of the community governance data array.
[0055] For each element in the data array, construct a key-value pair of the object in the dataSource property based on its data structure and the dataIndex of the previously defined columns property. The key usually corresponds to the dataIndex defined in the columns property, which indicates which field in the data source should be used to fill a column of the table. The value is the value of the corresponding field extracted from the data element currently traversed. Add the key-value pair object constructed for each element to the empty array created previously. As the traversal proceeds, this array will gradually be filled, eventually forming a dataSource array containing all the table data.
[0056] After the traversal is complete, the resulting key-value array is determined as the dataSource property of the management data table to be displayed. This dataSource array will be directly used as the data source of the table component for use by front-end frameworks (such as React, Vue, etc.) when rendering the table.
[0057] When building a dataSource, you should incorporate error handling mechanisms to handle possible data format errors, missing fields, and other issues. You can also validate the data to ensure that all key-value pairs conform to the expected format to improve data accuracy and reliability.
[0058] Step 104: Display the governance data table to be displayed based on the table header columns attribute and the data source dataSource attribute.
[0059] In one embodiment of the present application, after dynamically constructing the table header columns attribute and the data source dataSource attribute, the governance data table to be displayed is displayed based on the table header columns attribute and the data source dataSource attribute.
[0060] Specifically, the Table component in the Antd component library is used to pass the dynamically constructed columns attribute and dataSource attribute to the Table component; through the rendering function of the Table component, the governance data table to be displayed is presented in a visual form for users to view and analyze community governance data.
[0061] In one embodiment, displaying the governance data table to be displayed based on the table header columns attribute and the data source dataSource attribute requires ensuring that the Antd component library has been correctly installed and introduced into the project. In the component or page where the table needs to be displayed, import the Antd Table component. Pass the previously dynamically constructed columns attribute and dataSource attribute as props to the Table component. For example, in React, this can be achieved by directly using these two attributes as tag attributes of the Table component. In the component's rendering method, include the Table component and ensure that it receives the correct columns and dataSource attributes. When the React component is re-rendered, the Table component will update the display of the table based on the latest columns and dataSource attributes. After receiving the attributes, the Table component will use its internal rendering logic to generate the HTML structure of the table. This includes creating a table header based on the columns attribute and filling each row of data in the table based on the dataSource attribute. Finally, a visual governance data table will be presented on the user interface.
[0062] In one embodiment of the present application, after the governance data table to be displayed is displayed based on the table header columns attribute and the data source dataSource attribute, the governance data table to be displayed can be sorted, filtered or paged according to the user's interactive operation.
[0063] Among them, the sorting process includes sorting the data in the data source dataSource attribute according to the sorting field and sorting method selected by the user, and re-rendering the table to display the sorted data; the filtering process includes filtering the data in the data source dataSource attribute according to the filtering conditions set by the user, and re-rendering the table to display the filtered data; the paging process includes extracting the corresponding data from the data source dataSource attribute according to the page number selected by the user and the number of data items displayed per page, and re-rendering the table to display the data of the current page.
[0064] In one implementation of the present application, the method further includes: monitoring data update events of the back-end interface; when data updates are monitored, re-obtaining the latest community governance data to be displayed from the back-end interface, and updating the governance data table to be displayed.
[0065] The above is an embodiment of the method proposed in this application. Based on the same inventive concept, this application embodiment also provides a community governance data display device based on Antd, whose structure is as follows Figure 2 shown.
[0066] Figure 2 This is a schematic diagram of the internal structure of a community governance data display device based on Antd provided in an embodiment of the present application. Figure 2 As shown, the equipment includes:
[0067] at least one processor 201;
[0068] and, a memory 202 communicatively coupled to the at least one processor;
[0069] The memory 202 stores instructions that can be executed by at least one processor, and the instructions are executed by the at least one processor 201 to enable the at least one processor 201 to:
[0070] Obtain the community governance data to be displayed based on the preset backend interface, and convert the community governance data to be displayed into a community governance data array;
[0071] Traverse the community governance data array and dynamically construct the columns attribute of the governance data table to be displayed corresponding to the community governance data array; and
[0072] Traverse the community governance data array and dynamically construct the data source dataSource property of the governance data table to be displayed corresponding to the community governance data array;
[0073] Displays the management data table to be displayed based on the table header columns attribute and data source dataSource attribute.
[0074] Some embodiments of the present application provide corresponding Figure 1 A non-volatile computer storage medium for displaying community governance data based on Antd, storing computer executable instructions, wherein the computer executable instructions are set to:
[0075] Obtain the community governance data to be displayed based on the preset backend interface, and convert the community governance data to be displayed into a community governance data array;
[0076] Traverse the community governance data array and dynamically construct the columns attribute of the governance data table to be displayed corresponding to the community governance data array; and
[0077] Traverse the community governance data array and dynamically construct the data source dataSource property of the governance data table to be displayed corresponding to the community governance data array;
[0078] Displays the management data table to be displayed based on the table header columns attribute and data source dataSource attribute.
[0079] The various embodiments in this application are described in a progressive manner. Similar portions between the various embodiments can be referenced to each other. Each embodiment focuses on the differences from the other embodiments. In particular, the IoT device and media embodiments are generally similar to the method embodiments, so their description is relatively simple. For relevant portions, refer to the description of the method embodiments.
[0080] The system and medium provided in the embodiments of the present application correspond one-to-one to the method. Therefore, the system and medium also have similar beneficial technical effects to their corresponding methods. Since the beneficial technical effects of the method have been described in detail above, the beneficial technical effects of the system and medium will not be repeated here.
[0081] Those skilled in the art will appreciate that the embodiments of the present application can be provided as methods, systems, or computer program products. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.
[0082] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0083] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.
[0084] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.
[0085] In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.
[0086] Memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. Memory is an example of a computer-readable medium.
[0087] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. The information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media (transitory media), such as modulated data signals and carrier waves.
[0088] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.
[0089] The foregoing is merely an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application should all be included within the scope of the claims of the present application.
Claims
1. A community governance data display method based on Antd, characterized in that: The method comprises: Acquire the community governance data to be displayed based on a preset backend interface, and convert the community governance data to be displayed into a community governance data array; Traversing the community governance data array, dynamically constructing the header columns attribute of the governance data table to be displayed corresponding to the community governance data array; and, Traverse the community governance data array and dynamically construct the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array; Display the governance data table to be displayed based on the table header columns attribute and the data source dataSource attribute; Traverse the community governance data array and dynamically construct the columns attribute of the table header of the governance data to be displayed corresponding to the community governance data array, specifically including: Extracting key fields of each element in the community governance data array; Based on the key fields, dynamically construct the title, dataIndex and key fields in the columns attribute; Combining all constructed columns attributes into a columns attribute array, and determining the columns attribute array as the header of the governance data table to be displayed; Traverse the community governance data array and dynamically construct the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array, specifically including: For each element in the community governance data array, construct a key-value pair for each object in the dataSource attribute based on its data structure and the dataIndex of the columns attribute; Combining all constructed key-value pairs into a key-value pair array, and determining the key-value pair array as the data source of the governance data table to be displayed; After displaying the governance data table to be displayed based on the table header columns attribute and the data source dataSource attribute, the method further includes: Sorting, filtering or paging the governance data table to be displayed according to the user's interactive operation; The sorting process includes sorting the data in the dataSource attribute of the data source according to the sort field and sorting method selected by the user, and re-rendering the table to display the sorted data; The filtering process includes filtering the data in the dataSource attribute of the data source according to the filtering conditions set by the user, and re-rendering the table to display the filtered data; Paging processing includes extracting the corresponding data from the dataSource attribute of the data source according to the page number selected by the user and the number of data items displayed per page, and re-rendering the table to display the data of the current page.
2. The method for displaying community governance data based on Antd according to claim 1, characterized in that: Convert the community governance data to be displayed into a community governance data array, specifically including: Parsing the community governance data to be displayed to extract data fields to be displayed; The data fields are organized into an array form according to a preset data format to form the community governance data array.
3. The method for displaying community governance data based on Antd according to claim 1, characterized in that: Displaying the governance data table to be displayed based on the table header columns attribute and the data source dataSource attribute specifically includes: Use the Table component in the Antd component library and pass the dynamically constructed columns attribute and dataSource attribute to the Table component; Through the rendering function of the Table component, the governance data table to be displayed is presented in a visual form for users to view and analyze community governance data.
4. The method for displaying community governance data based on Antd according to claim 1, characterized in that: Obtain the community governance data to be displayed based on the preset backend interface, including: Send HTTP request to the preset backend interface; Receive response data returned by the backend interface; wherein the response data includes community governance data to be displayed; Parse the response data to extract the community governance data to be displayed.
5. The method for displaying community governance data based on Antd according to claim 1, characterized in that: The method further comprises: Monitor data update events of the backend interface; When data updates are monitored, the latest community governance data to be displayed is obtained from the back-end interface again, and the governance data table to be displayed is updated.
6. A community governance data display device based on Antd, characterized in that: The device comprises: at least one processor; and, a memory communicatively coupled to the at least one processor; The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to: Acquire the community governance data to be displayed based on a preset backend interface, and convert the community governance data to be displayed into a community governance data array; Traversing the community governance data array, dynamically constructing the header columns attribute of the governance data table to be displayed corresponding to the community governance data array; and, Traverse the community governance data array and dynamically construct the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array; Display the governance data table to be displayed based on the table header columns attribute and the data source dataSource attribute; Traverse the community governance data array and dynamically construct the columns attribute of the table header of the governance data to be displayed corresponding to the community governance data array, specifically including: Extracting key fields of each element in the community governance data array; Based on the key fields, dynamically construct the title, dataIndex and key fields in the columns attribute; Combining all constructed columns attributes into a columns attribute array, and determining the columns attribute array as the header of the governance data table to be displayed; Traverse the community governance data array and dynamically construct the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array, specifically including: For each element in the community governance data array, construct a key-value pair for each object in the dataSource attribute based on its data structure and the dataIndex of the columns attribute; Combining all constructed key-value pairs into a key-value pair array, and determining the key-value pair array as the data source of the governance data table to be displayed; After displaying the governance data table to be displayed based on the table header columns attribute and the data source dataSource attribute, the method further includes: Sorting, filtering or paging the governance data table to be displayed according to the user's interactive operation; The sorting process includes sorting the data in the dataSource attribute of the data source according to the sort field and sorting method selected by the user, and re-rendering the table to display the sorted data; The filtering process includes filtering the data in the dataSource attribute of the data source according to the filtering conditions set by the user, and re-rendering the table to display the filtered data; Paging processing includes extracting the corresponding data from the dataSource attribute of the data source according to the page number selected by the user and the number of data items displayed per page, and re-rendering the table to display the data of the current page.
7. A non-volatile computer storage medium for displaying community governance data based on Antd, storing computer-executable instructions, characterized in that: The computer executable instructions are configured to: Acquire the community governance data to be displayed based on a preset backend interface, and convert the community governance data to be displayed into a community governance data array; Traversing the community governance data array, dynamically constructing the header columns attribute of the governance data table to be displayed corresponding to the community governance data array; as well as, Traverse the community governance data array and dynamically construct the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array; Display the governance data table to be displayed based on the table header columns attribute and the data source dataSource attribute; Traverse the community governance data array and dynamically construct the columns attribute of the table header of the governance data to be displayed corresponding to the community governance data array, specifically including: Extracting key fields of each element in the community governance data array; Based on the key fields, dynamically construct the title, dataIndex and key fields in the columns attribute; Combining all constructed columns attributes into a columns attribute array, and determining the columns attribute array as the header of the governance data table to be displayed; Traverse the community governance data array and dynamically construct the data source dataSource attribute of the governance data table to be displayed corresponding to the community governance data array, specifically including: For each element in the community governance data array, construct a key-value pair for each object in the dataSource attribute based on its data structure and the dataIndex of the columns attribute; Combining all constructed key-value pairs into a key-value pair array, and determining the key-value pair array as the data source of the governance data table to be displayed; After displaying the governance data table to be displayed based on the table header columns attribute and the data source dataSource attribute, the method further includes: Sorting, filtering or paging the governance data table to be displayed according to the user's interactive operation; The sorting process includes sorting the data in the dataSource attribute of the data source according to the sort field and sorting method selected by the user, and re-rendering the table to display the sorted data; The filtering process includes filtering the data in the dataSource attribute of the data source according to the filtering conditions set by the user, and re-rendering the table to display the filtered data; Paging processing includes extracting the corresponding data from the dataSource attribute of the data source according to the page number selected by the user and the number of data items displayed per page, and re-rendering the table to display the data of the current page.