A method and system for dynamically rendering table cells

Abstract

This invention provides a method and system for dynamically rendering table cells. The method includes: when the initialization of a table component is detected, collecting the content of a JSON configuration file and synchronously parsing out the corresponding core information; importing the core information into the table component to trigger a rendering update instruction, and synchronously generating corresponding header cells according to the array in the core information; iterating through the user-input data list through a preset program to generate data cells that match the header cells, and synchronously filling the data cells with corresponding field values; and calling a preset built-in parser according to the rendering update instruction, and synchronously rendering the header cells and data cells dynamically based on preset rules. This invention can accurately identify the content in the table and complete the dynamic rendering, thereby improving rendering efficiency.

Description

Technical Field

[0001] This invention relates to the field of program development technology, and in particular to a method and system for dynamically rendering table cells. Background Technology

[0002] Mini-programs have been widely used in various business scenarios. As a core data carrier, the ability of tables to dynamically render cells directly affects the business adaptation effect. Currently, mainstream mini-program frameworks do not have native table components, and even more so, they lack native support for dynamic cell rendering. Developers need to build rendering logic themselves, which not only increases development and maintenance costs, but also easily leads to inconsistent rendering effects and poor compatibility, failing to meet enterprise-level dynamic display needs.

[0003] While a few open-source table components offer basic rendering capabilities, their dynamic adaptability is insufficient. Their custom rendering is limited to predefined types such as text and numbers, and cannot be dynamically adjusted according to changes in business data and scenarios. Furthermore, the lack of a flexible string template mechanism makes it difficult to achieve dynamic rendering across multiple scenarios through template reuse, significantly limiting the flexibility of cell rendering.

[0004] Furthermore, in practical applications, cells often need to dynamically display composite elements based on data status and user actions, which existing technologies struggle to achieve efficiently. Developers either simplify requirements at the expense of user experience or resort to temporary adaptations using complex code, leading to low development efficiency, difficult code maintenance, and potential performance issues. Therefore, there is an urgent need for an efficient and flexible method for dynamically rendering table cells to address these problems. Summary of the Invention

[0005] Therefore, the purpose of this invention is to provide a method and system for dynamically rendering table cells, so as to solve the problem that existing technologies cannot efficiently and flexibly complete the dynamic rendering of table cells.

[0006] The first aspect of the present invention proposes: A method for dynamically rendering table cells, wherein the method includes: When the table component is detected to be initializing, the contents of the JSON configuration file are collected and the corresponding core information is parsed out synchronously. The core information is imported into the table component to trigger a rendering update instruction, and the corresponding header cells are generated sequentially according to the array in the core information. The system iterates through the user-input data list using a preset program to generate corresponding data cells that match the header cells, and simultaneously fills the corresponding field values ​​into the data cells. The preset built-in parser is invoked according to the rendering update instruction, and the header cell and the data cell are dynamically rendered simultaneously based on the preset rules through the preset built-in parser.

[0007] The beneficial effects of this invention are as follows: This technical solution collects and parses the core JSON configuration information during the initialization of the table component, imports it, triggers rendering update instructions, accurately generates the adapted table header cells as needed, and simultaneously iterates through the data list to generate corresponding data cells and fill in field values. Then, relying on the preset built-in parser and rules, the cells are dynamically rendered, which effectively solves the problems of inefficiency and lack of flexibility in the dynamic rendering of table cells in the prior art, greatly improves the rendering accuracy and adaptability, reduces redundant operations, reduces manual configuration costs, and realizes efficient, flexible, and standardized dynamic rendering control of tables with different structures.

[0008] Furthermore, the step of dynamically rendering the header cells and data cells based on preset rules and using the preset built-in parser includes: The column definitions of the header cells and data cells are detected, and the corresponding original template strings are read out synchronously according to the column definitions; The rows in the header cells and data cells are detected, and the corresponding target data value is read out simultaneously according to the column key of the current row, so as to use the target data value as the input variable for template parsing; Based on the target data value, the corresponding dynamic rendering is completed according to the original template string.

[0009] Furthermore, the step of performing corresponding dynamic rendering based on the target data value and the original template string includes: Parse all {value} in the original template string and replace them one by one with the target data values ​​in a synchronized manner; Detect whether the original template string contains a conditional expression; If a conditional expression is detected in the original template string, a preset parsing function is invoked, and each of the target data values ​​is solved synchronously through the preset parsing function to dynamically generate a rendering style based on the value, and to complete the corresponding dynamic rendering based on the rendering style.

[0010] Furthermore, the step of completing the corresponding dynamic rendering based on the rendering style includes: The corresponding string-WXML parser is invoked based on the rendering style; The string-WXML parser converts the parsed original template string into a WXML node tree that is compatible with the mini-program rendering engine. The WXML node tree is injected into the cell view to complete the corresponding dynamic rendering.

[0011] Furthermore, the step of dynamically rendering the header cell and the data cell based on preset rules and using the preset built-in parser also includes: In the actual dynamic rendering process, if the user needs to enable the zebra stripe style, the corresponding CSS selector will be brought up. The CSS selectors are used to set different background colors for even-numbered and odd-numbered rows of the table to achieve the corresponding dynamic rendering.

[0012] Furthermore, the step of dynamically rendering the header cell and the data cell based on preset rules and using the preset built-in parser also includes: During the actual rendering process, it is necessary to check whether virtualScroll.enabled in the JSON configuration is true; If virtualScroll.enabled is found to be true in the JSON configuration, the range of the currently visible rows is calculated based on the viewport position, the total table height, and the estimated row height, so as to complete the corresponding area rendering based on the visible rows.

[0013] Furthermore, the step of rendering the corresponding region based on the visible rows includes: When the area range of the visible row is determined, a buffer zone that matches the visible row is detected accordingly; The system dynamically renders the visible rows and the row data in the buffer; it dynamically listens for vertical scrolling events and synchronously calculates the updated area of ​​the visible rows to dynamically update the rendered data.

[0014] The second aspect of the present invention proposes: A dynamic table cell rendering system, wherein the system includes: The detection module is used to collect the contents of the JSON configuration file and synchronously parse out the corresponding core information when the table component is detected to be initializing. The import module is used to import the core information into the table component to trigger the rendering update instruction and synchronously generate the corresponding header cells according to the array in the core information. The fill module is used to iterate through the data list input by the user through a preset program to generate data cells that match the header cells, and synchronously fill the corresponding field values ​​inside the data cells. The rendering module is used to call up a preset built-in parser according to the rendering update instruction, and synchronously render the header cell and the data cell dynamically through the preset built-in parser based on preset rules.

[0015] Furthermore, the rendering module is specifically used for: The column definitions of the header cells and data cells are detected, and the corresponding original template strings are read out synchronously according to the column definitions; The rows in the header cells and data cells are detected, and the corresponding target data value is read out simultaneously according to the column key of the current row, so as to use the target data value as the input variable for template parsing; Based on the target data value, the corresponding dynamic rendering is completed according to the original template string.

[0016] Furthermore, the rendering module is specifically used for: Parse all {value} in the original template string and replace them one by one with the target data values ​​in a synchronized manner; Detect whether the original template string contains a conditional expression; If a conditional expression is detected in the original template string, a preset parsing function is invoked, and each of the target data values ​​is solved synchronously through the preset parsing function to dynamically generate a rendering style based on the value, and to complete the corresponding dynamic rendering based on the rendering style.

[0017] Furthermore, the rendering module is specifically used for: The corresponding string-WXML parser is invoked based on the rendering style; The string-WXML parser converts the parsed original template string into a WXML node tree that is compatible with the mini-program rendering engine. The WXML node tree is injected into the cell view to complete the corresponding dynamic rendering.

[0018] Furthermore, the rendering module is specifically used for: In the actual dynamic rendering process, if the user needs to enable the zebra stripe style, the corresponding CSS selector will be brought up. The CSS selectors are used to set different background colors for even-numbered and odd-numbered rows of the table to achieve the corresponding dynamic rendering.

[0019] Furthermore, the rendering module is specifically used for: During the actual rendering process, it is necessary to check whether virtualScroll.enabled in the JSON configuration is true; If virtualScroll.enabled is found to be true in the JSON configuration, the range of the currently visible rows is calculated based on the viewport position, the total table height, and the estimated row height, so as to complete the corresponding area rendering based on the visible rows.

[0020] Furthermore, the rendering module is specifically used for: When the area range of the visible row is determined, a buffer zone that matches the visible row is detected accordingly; The system dynamically renders the visible rows and the row data in the buffer; it dynamically listens for vertical scrolling events and synchronously calculates the updated area of ​​the visible rows to dynamically update the rendered data.

[0021] The third aspect of the present invention proposes: A computer includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the computer program, implements the table cell dynamic rendering method as described above.

[0022] The fourth aspect of the present invention proposes: A readable storage medium having a computer program stored thereon, wherein the program, when executed by a processor, implements the method for dynamically rendering table cells as described above.

[0023] Additional aspects and advantages of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. Attached Figure Description

[0024] Figure 1 A flowchart of a method for dynamically rendering table cells provided in the first embodiment of the present invention; Figure 2 This is an overall data flow diagram provided for the second embodiment of the present invention; Figure 3 The overall program flowchart provided for the second embodiment of the present invention; Figure 4 This is a structural block diagram of a table cell dynamic rendering system provided in the third embodiment of the present invention.

[0025] The following detailed description, in conjunction with the accompanying drawings, will further illustrate the present invention. Detailed Implementation

[0026] To facilitate understanding of the present invention, a more complete description will be given below with reference to the accompanying drawings. Several embodiments of the invention are illustrated in the drawings. However, the invention can be implemented in many different forms and is not limited to the embodiments described herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete.

[0027] It should be noted that when a component is said to be "fixed to" another component, it can be directly on the other component or there may be an intervening component. When a component is said to be "connected to" another component, it can be directly connected to the other component or there may be an intervening component. The terms "vertical," "horizontal," "left," "right," and similar expressions used in this document are for illustrative purposes only.

[0028] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention pertains. The terminology used herein in the description of the invention is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. The term "and / or" as used herein includes any and all combinations of one or more of the associated listed items.

[0029] Please see Figure 1 The figure shows a table cell dynamic rendering method provided in the first embodiment of the present invention. The table cell dynamic rendering method provided in this embodiment can accurately detect the content contained in each cell, thereby enabling targeted rendering and improving rendering efficiency.

[0030] Specifically, this embodiment provides: A method for dynamically rendering table cells, wherein the method includes: Step S10: When the table component initialization is detected, the contents of the JSON configuration file are collected and the corresponding core information is parsed out synchronously. Step S20: Import the core information into the table component to trigger a rendering update instruction and synchronously generate the corresponding header cells according to the array in the core information. Step S30: The user-input data list is traversed in a loop through a preset program to generate data cells that match the header cells, and the corresponding field values ​​are populated inside the data cells in a synchronous manner. Step S40: According to the rendering update instruction, the preset built-in parser is invoked, and the header cell and the data cell are dynamically rendered through the preset built-in parser based on the preset rules.

[0031] Second Embodiment Furthermore, the step of dynamically rendering the header cells and data cells based on preset rules and using the preset built-in parser includes: The column definitions of the header cells and data cells are detected, and the corresponding original template strings are read out synchronously according to the column definitions; The rows in the header cells and data cells are detected, and the corresponding target data value is read out simultaneously according to the column key of the current row, so as to use the target data value as the input variable for template parsing; Based on the target data value, the corresponding dynamic rendering is completed according to the original template string.

[0032] Furthermore, the step of performing corresponding dynamic rendering based on the target data value and the original template string includes: Parse all {value} in the original template string and replace them one by one with the target data values ​​in a synchronized manner; Detect whether the original template string contains a conditional expression; If a conditional expression is detected in the original template string, a preset parsing function is invoked, and each of the target data values ​​is solved synchronously through the preset parsing function to dynamically generate a rendering style based on the value, and to complete the corresponding dynamic rendering based on the rendering style.

[0033] Furthermore, the step of completing the corresponding dynamic rendering based on the rendering style includes: The corresponding string-WXML parser is invoked based on the rendering style; The string-WXML parser converts the parsed original template string into a WXML node tree that is compatible with the mini-program rendering engine. The WXML node tree is injected into the cell view to complete the corresponding dynamic rendering.

[0034] Furthermore, the step of dynamically rendering the header cell and the data cell based on preset rules and using the preset built-in parser also includes: In the actual dynamic rendering process, if the user needs to enable the zebra stripe style, the corresponding CSS selector will be brought up. The CSS selectors are used to set different background colors for even-numbered and odd-numbered rows of the table to achieve the corresponding dynamic rendering.

[0035] Furthermore, the step of dynamically rendering the header cell and the data cell based on preset rules and using the preset built-in parser also includes: During the actual rendering process, it is necessary to check whether virtualScroll.enabled in the JSON configuration is true; If virtualScroll.enabled is found to be true in the JSON configuration, the range of the currently visible rows is calculated based on the viewport position, the total table height, and the estimated row height, so as to complete the corresponding area rendering based on the visible rows.

[0036] Furthermore, the step of rendering the corresponding region based on the visible rows includes: When the area range of the visible row is determined, a buffer zone that matches the visible row is detected accordingly; The system dynamically renders the visible rows and the row data in the buffer; it dynamically listens for vertical scrolling events and synchronously calculates the updated area of ​​the visible rows to dynamically update the rendered data.

[0037] Additionally, in this embodiment, it should be noted that, please refer to... Figures 2 to 3 The dynamic rendering method for table cells provided in this embodiment is implemented by the following steps: S1: Read JSON configuration When the table component is initialized, the JSON configuration file is obtained through JS / TS require, import or asynchronous request. The core information such as column definition (columns, including renderTemplate, validation, etc.), data list (data), row unique identifier (rowKey), pagination configuration (pagination), virtual scroll configuration (virtualScroll), and multi-language configuration (languages) is parsed out to provide the data foundation for subsequent rendering and function implementation.

[0038] S2: Initialization state The parsed columns, data, rowKey, and other information are set into the component's internal data, triggering a rendering update. If multi-language configuration is enabled, resources such as table header titles are switched based on the current system language or custom configuration; the selected state is initialized (selectedKeys is an empty array, allChecked is false); the vertical scrolling of the table is calculated (hasScrollY); the action column configuration is found and stored; if virtual scrolling is enabled, the initVirtualScroll method is called to initialize the core virtual scrolling mechanism (calculating the visible area, setting the buffer size, etc.).

[0039] S3: Render the table header Generate header cells sequentially based on the `columns` array, including checkboxes (when `showSelection` is true), serial numbers (when `showIndex` is true), and custom columns. Insert the header cells into a fixed header container, and use `position: sticky` or absolute positioning to ensure the fixed header / column is always visible and does not shift when scrolling.

[0040] S4: Render the table body Use a `wx:for` loop to iterate through the data list, generating a corresponding cell view for each row and populating it with the field values ​​corresponding to the keys in the columns. Dynamically insert elements such as checkboxes, serial numbers, and action buttons / dropdown menus based on the configuration, and bind events such as row click, checkbox `onChange`, and button `bindtap`. If a zebra stripe style is enabled, set different background colors for even and odd rows using CSS selectors.

[0041] S5: Dynamic cell rendering (based on string templates) For columns that enable renderTemplate, dynamic rendering is achieved through the built-in parser. The specific sub-steps are as follows: S51 Extract Template: Read the raw template string (organized in HTML syntax, including {value} placeholders) from the column definition; For example: <text style="color: {value=="active"?"green":"red"}"> {value}< / text> ; S52 Bind Context Data: Retrieve the specific data value based on the column key of the current row, and use it as the input variable for template parsing; S53 Placeholder Replacement: Parses all {value} in the template string and replaces them with the actual data value of the current cell; S54 Conditional Expression Parsing: If the template contains a conditional expression (such as a ternary expression), the custom security parsing function (evalConditional) is called to evaluate it, avoiding the security risks of traditional eval and enabling dynamic generation of styles or text fragments based on the value; S55 template to WXML node conversion: The lightweight string-WXML parser (parseStringToWXML method) converts the parsed template string into a WXML node tree object that can be directly processed by the WeChat Mini Program rendering engine; S56 Inject View: Injects the WXML node tree into the cell view to complete dynamic rendering.

[0042] S6: Table Editing Content Validation By applying the validation rules configured in columns (such as { required: true, pattern: / ^\d+$ / , message: 'Please enter a number'}), the system listens for input changes in cell editing mode and validates the input values ​​in real time. When validation fails, an error message is displayed to ensure data accuracy.

[0043] S7: Zebra stripe effect achieved By using CSS selectors (such as nth-child (even) and nth-child (odd)), different background colors can be set for even-numbered and odd-numbered rows of a table, without the need for additional logic processing, thus improving the readability of the table.

[0044] S8: Virtual scrolling processing If virtualScroll.enabled is true in the JSON configuration, perform the following operations: S81 Calculate visible area: Calculate the range of currently visible rows (start~end) based on viewport position, total table height, and estimated row height. S82 dynamically loads data: only renders visible rows and rows within the buffer (configured by bufferSize), reducing the number of DOM nodes; S83 Scroll Listener and Update: Listens for vertical scroll events, calculates the new visible area in real time, dynamically updates rendering data, and minimizes re-rendering overhead.

[0045] S9: Synchronous Scrolling Processing The watch body uses a two-way scrolling mechanism. <scroll-view>Containers that allow for horizontal and vertical scrolling: S91 Horizontal Synchronization: Listen for the horizontal scrolling event of the table body, and synchronize the horizontal position of the table header and table body in real time by setting the transform:translateX property of the table header container; S92 Vertical scroll tooltip: When scrolling vertically, check the height of the content and the height of the container, and use the component's internal variable hasScrollY to determine whether to display a vertical scroll bar tooltip.

[0046] S10: Interactive Processing Bind various user interaction events to implement the corresponding business logic: S101 Selection Operation: When the select all checkbox is triggered, update the selectedKeys list (add all rowKeys if all are selected, set it to empty if all are deselected); when a single row checkbox is triggered, switch the selected state of that row and synchronize selectedKeys, and pass the selection result to the parent component through triggerEvent; S102 Operation column interaction: After selecting from the drop-down menu or clicking the button in the operation column, the corresponding API (such as data update, approval) is called, and a table refresh event is triggered after the business logic is completed. S103 Row Edit / Delete: When the edit or delete button is clicked, the event is passed out through triggerEvent, and the external system processes the business logic, updates the data, and re-renders the table. S104 Scrolling Interaction: Combining the virtual scrolling and synchronous scrolling logic of S8 and S9, it ensures a smooth scrolling process.

[0047] S11: Data Update For data operations such as adding, deleting, and modifying, update the component's data and re-render the table: S111 Normal Rendering: Directly updates the complete data list, triggering a re-rendering of the table body; S112 Pagination Scenario: Load and display the corresponding data segment based on the current page number (currentPage); S113 Virtual Scrolling Scene: Only updates data in the visible area, avoiding full re-rendering and improving performance.

[0048] JSON configuration file design The JSON configuration file describes the table's structure, data, and function switches. The main data items are shown in the table below:

[0049] Please see Figure 4 The third embodiment of the present invention provides: A dynamic table cell rendering system, wherein the system includes: The detection module is used to collect the contents of the JSON configuration file and synchronously parse out the corresponding core information when the table component is detected to be initializing. The import module is used to import the core information into the table component to trigger the rendering update instruction and synchronously generate the corresponding header cells according to the array in the core information. The fill module is used to iterate through the data list input by the user through a preset program to generate data cells that match the header cells, and synchronously fill the corresponding field values ​​inside the data cells. The rendering module is used to call up a preset built-in parser according to the rendering update instruction, and synchronously render the header cell and the data cell dynamically through the preset built-in parser based on preset rules.

[0050] Furthermore, the rendering module is specifically used for: The column definitions of the header cells and data cells are detected, and the corresponding original template strings are read out synchronously according to the column definitions; The rows in the header cells and data cells are detected, and the corresponding target data value is read out simultaneously according to the column key of the current row, so as to use the target data value as the input variable for template parsing; Based on the target data value, the corresponding dynamic rendering is completed according to the original template string.

[0051] Furthermore, the rendering module is specifically used for: Parse all {value} in the original template string and replace them one by one with the target data values ​​in a synchronized manner; Detect whether the original template string contains a conditional expression; If a conditional expression is detected in the original template string, a preset parsing function is invoked, and each of the target data values ​​is solved synchronously through the preset parsing function to dynamically generate a rendering style based on the value, and to complete the corresponding dynamic rendering based on the rendering style.

[0052] Furthermore, the rendering module is specifically used for: The corresponding string-WXML parser is invoked based on the rendering style; The string-WXML parser converts the parsed original template string into a WXML node tree that is compatible with the mini-program rendering engine. The WXML node tree is injected into the cell view to complete the corresponding dynamic rendering.

[0053] Furthermore, the rendering module is specifically used for: In the actual dynamic rendering process, if the user needs to enable the zebra stripe style, the corresponding CSS selector will be brought up. The CSS selectors are used to set different background colors for even-numbered and odd-numbered rows of the table to achieve the corresponding dynamic rendering.

[0054] Furthermore, the rendering module is specifically used for: During the actual rendering process, it is necessary to check whether virtualScroll.enabled in the JSON configuration is true; If virtualScroll.enabled is found to be true in the JSON configuration, the range of the currently visible rows is calculated based on the viewport position, the total table height, and the estimated row height, so as to complete the corresponding area rendering based on the visible rows.

[0055] Furthermore, the rendering module is specifically used for: When the area range of the visible row is determined, a buffer zone that matches the visible row is detected accordingly; The system dynamically renders the visible rows and the row data in the buffer; it dynamically listens for vertical scrolling events and synchronously calculates the updated area of ​​the visible rows to dynamically update the rendered data.

[0056] The fourth embodiment of the present invention provides a computer, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the table cell dynamic rendering method as described above.

[0057] The fifth embodiment of the present invention provides a readable storage medium storing a computer program thereon, wherein the program, when executed by a processor, implements the table cell dynamic rendering method as described above.

[0058] In summary, the table cell dynamic rendering method and system provided in the above embodiments of the present invention can accurately detect the content contained in each cell, thereby enabling targeted rendering and improving rendering efficiency.

[0059] It should be noted that the above modules can be functional modules or program modules, and can be implemented through software or hardware. For modules implemented through hardware, the above modules can reside in the same processor; or the above modules can be located in different processors in any combination.

[0060] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as a sequenced list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by, or in conjunction with, an instruction execution system, apparatus, or device (such as a computer-based system, a processor-including system, or other system that can fetch and execute instructions from, an instruction execution system, apparatus, or device). For the purposes of this specification, "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transmit programs for use by, or in conjunction with, an instruction execution system, apparatus, or device.

[0061] More specific examples of computer-readable media (a non-exhaustive list) include: electrical connections (electronic devices) having one or more wires, portable computer disk drives (magnetic devices), random access memory (RAM), read-only memory (ROM), erasable and editable read-only memory (EPROM or flash memory), fiber optic devices, and portable optical disc read-only memory (CDROM). Furthermore, computer-readable media can even be paper or other suitable media on which the program can be printed, because the program can be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, interpreting, or otherwise processing as necessary, and then stored in computer memory.

[0062] It should be understood that various parts of the present invention can be implemented in hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented in software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, it can be implemented using any one or a combination of the following techniques known in the art: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.

[0063] In the description of this specification, references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of the invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples.

[0064] The embodiments described above are merely illustrative of several implementations of the present invention, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of the invention. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of the present invention, and these modifications and improvements all fall within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the appended claims.

Claims

1. A method for dynamically rendering table cells, characterized in that, The method includes: When the table component is detected to be initializing, the contents of the JSON configuration file are collected and the corresponding core information is parsed out synchronously. The core information is imported into the table component to trigger a rendering update instruction, and the corresponding header cells are generated sequentially according to the array in the core information. The system iterates through the user-input data list using a preset program to generate corresponding data cells that match the header cells, and simultaneously fills the corresponding field values ​​into the data cells. The preset built-in parser is invoked according to the rendering update instruction, and the header cell and the data cell are dynamically rendered simultaneously based on the preset rules through the preset built-in parser.

2. The method for dynamically rendering table cells according to claim 1, characterized in that, The step of dynamically rendering the header cell and the data cell based on preset rules and using the preset built-in parser includes: The column definitions of the header cells and data cells are detected, and the corresponding original template strings are read out synchronously according to the column definitions; The rows in the header cells and data cells are detected, and the corresponding target data value is read out simultaneously according to the column key of the current row, so as to use the target data value as the input variable for template parsing; Based on the target data value, the corresponding dynamic rendering is completed according to the original template string.

3. The method for dynamically rendering table cells according to claim 2, characterized in that, The step of performing corresponding dynamic rendering based on the target data value and the original template string includes: Parse all {value} in the original template string and replace them one by one with the target data values ​​in a synchronized manner; Detect whether the original template string contains a conditional expression; If a conditional expression is detected in the original template string, a preset parsing function is invoked, and each of the target data values ​​is solved synchronously through the preset parsing function to dynamically generate a rendering style based on the value, and to complete the corresponding dynamic rendering based on the rendering style.

4. The method for dynamically rendering table cells according to claim 3, characterized in that, The steps for performing the corresponding dynamic rendering based on the rendering style include: The corresponding string-WXML parser is invoked based on the rendering style; The string-WXML parser converts the parsed original template string into a WXML node tree that is compatible with the mini-program rendering engine. The WXML node tree is injected into the cell view to complete the corresponding dynamic rendering.

5. The method for dynamically rendering table cells according to claim 1, characterized in that, The step of dynamically rendering the header cell and the data cell based on preset rules and using the preset built-in parser further includes: In the actual dynamic rendering process, if the user needs to enable the zebra stripe style, the corresponding CSS selector will be brought up. The CSS selectors are used to set different background colors for even-numbered and odd-numbered rows of the table to achieve the corresponding dynamic rendering.

6. The method for dynamically rendering table cells according to claim 1, characterized in that, The step of dynamically rendering the header cell and the data cell based on preset rules and using the preset built-in parser further includes: During the actual rendering process, it is necessary to check whether virtualScroll.enabled in the JSON configuration is true; If virtualScroll.enabled is found to be true in the JSON configuration, the range of the currently visible rows is calculated based on the viewport position, the total table height, and the estimated row height, so as to complete the corresponding area rendering based on the visible rows.

7. The method for dynamically rendering table cells according to claim 6, characterized in that, The step of rendering the corresponding region based on the visible rows includes: When the area range of the visible row is determined, a buffer zone that matches the visible row is detected accordingly; The system dynamically renders the visible rows and the row data in the buffer; it dynamically listens for vertical scrolling events and synchronously calculates the updated area of ​​the visible rows to dynamically update the rendered data.

8. A dynamic rendering system for table cells, characterized in that, The system includes: The detection module is used to collect the contents of the JSON configuration file and synchronously parse out the corresponding core information when the table component is detected to be initializing. The import module is used to import the core information into the table component to trigger the rendering update instruction and synchronously generate the corresponding header cells according to the array in the core information. The fill module is used to iterate through the data list input by the user through a preset program to generate data cells that match the header cells, and synchronously fill the corresponding field values ​​inside the data cells. The rendering module is used to call up a preset built-in parser according to the rendering update instruction, and synchronously render the header cell and the data cell dynamically through the preset built-in parser based on preset rules.

9. A computer comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the table cell dynamic rendering method as described in any one of claims 1 to 7.

10. A readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the table cell dynamic rendering method as described in any one of claims 1 to 7.

Images