A flexible configuration method and system for a table based on Handsontable in a Vue project

Abstract

This invention discloses a flexible table configuration method and system based on Handsontable in a Vue project, including: S1: Drag and drop merging; responding to the user's drag and drop operation, capturing the area to be merged, and serializing the merging information corresponding to the area into persistently stored merge range data; S2: Component registration; writing Vue business components as custom editors and renderers, and registering them as new cell types; S3: Event communication; establishing a global message bus; publishing cell data change events inside the table, and listening for corresponding events in external modules; S4: Granular configuration; providing unified type configuration at the column level, and supporting exception configuration of cells through cell metadata.

Description

Technical Field

[0001] This invention relates to the field of medical software technology, and in particular to a method and system for flexible table configuration based on Handsontable in a Vue project. Background Technology

[0002] 1. Existing open-source table controls (ag-grid, element-table, vxe-grid) support basic addition and deletion of rows and columns, but cell merging requires pre-writing row and column numbers, and cannot be completed by dragging and dropping at runtime, resulting in rigid configuration.

[0003] 2. The official Handsontable only has 7 built-in cell types (text, numeric, date, checkbox, etc.), which cannot be injected into Vue business components (such as drop-down remote search, patient tags, and rehabilitation scale button groups), resulting in high secondary development costs.

[0004] 3. The communication between tables and external modules generally uses prop / $emit, which makes synchronization difficult across multi-level components or sibling tables, often resulting in dirty data problems such as "data has been modified, but the view has not been changed".

[0005] 4. After dynamically adding or deleting rows and columns, the row height / column width can only be uniform globally and cannot be set individually for a single column / cell; and once the column type is set, it cannot be overridden for individual cells, resulting in insufficient flexibility. Summary of the Invention

[0006] The purpose of this invention is to provide a flexible table configuration method and system based on Handsontable in Vue projects to solve one or more of the above-mentioned technical problems.

[0007] To achieve this objective, the present invention adopts the following technical solution: A flexible table configuration method based on Handsontable in a Vue project, including: S1: Drag and drop to merge; In response to the user's drag operation, capture the area where cells are merged, and serialize the merging information corresponding to the area into persistently storeable merge range data; S2: Component registration; Write Vue business components as custom editors and renderers, and register them as new cell types; S3: Event Communication; Establish a global message bus; publish cell data change events within the table, and listen for the corresponding events in external modules; S4: Granular configuration; It provides unified type configuration at the column level and supports exception configuration for cells through cell metadata.

[0008] In some implementations, step S1 includes: S11: In response to user drag-and-drop operations, capture cell merging information through the afterMergeCells and afterUnmergeCells hooks of Handsontable; S12: After releasing the mouse, call the setMergeData method to write the merge range into the cell's metadata, serialize the merge information into a mergeRanges array and save it.

[0009] In some implementations, step S2 includes: S21: Write Vue business components as custom editors and renderers; S22: Register as a new cell type via the Handsontable.cellTypes.registerCellType interface.

[0010] In some implementations, in step S2, the Vue business component uses JSX syntax and is generated using Vue's render method.

[0011] In some implementations, step S3 includes: S31: Establish a global message bus based on the mitt library; S32: Inside the table, publish an event containing the table identifier, cell position, and data value using the bus.emit method; S33: In an external module, listen for the corresponding event using the bus.on method.

[0012] In some implementations, in step S3, the global message bus has an event recording and playback function, which records the triggered events in sequence in the event queue and supports replaying the event queue in offline or audit scenarios. The event recording and playback function is as follows: in offline working mode, the event queue is temporarily stored in local storage; after the network is restored, the event queue is uploaded to the server in batches.

[0013] In some implementations, step S4 includes: S41: Set the default type and size of the entire column via the column configuration array; S42: Set the exception type or size for a cell to override the column configuration using cell metadata; S43: In response to real-time adjustments to column width or row height by the user, the adjusted pixel values ​​are captured through the afterSetColWidth and afterSetRowHeight hooks of Handsontable and written back to the configuration file.

[0014] In some implementations, in step S4, in response to the user's undo operation command, the column width or row height configuration is restored to its previous state.

[0015] The beneficial effects of this invention are: users can drag and drop to complete the merging, and the merged information can be serialized and saved; Vue business components are registered as cell types and remain responsive during rendering; a global message bus is established to achieve zero-coupling synchronization of data and state; granular configuration supports unified type configuration for the entire column, while also allowing exception types to be set for individual cells. Attached Figure Description

[0016] Figure 1 This is a step diagram illustrating a flexible table configuration method based on Handsontable in a Vue project according to the present invention. Figure 2 This is an example flowchart of a flexible table configuration method based on Handsontable in a Vue project according to the present invention. Figure 3 This is a structural diagram of a flexible table configuration system based on Handsontable in a Vue project according to the present invention. Detailed Implementation

[0017] The present invention will now be described in further detail with reference to the accompanying drawings.

[0018] refer to Figure 1 and Figure 2 A flexible table configuration method based on Handsontable in a Vue project, including: S1: Drag and drop to merge; In response to the user's drag operation, capture the area where cells are merged, and serialize the merging information corresponding to the area into persistently storeable merge range data; S2: Component registration; The Vue business components are written as custom editors and renderers, and registered as new cell types; the Vue business components include: remote data, form validation, custom events, etc. S3: Event Communication; Establish a global message bus; publish cell data change events within the table, and listen for the corresponding events in external modules; S4: Granular configuration; It provides a unified type configuration at the column level and supports exception configuration for specific cells through cell metadata.

[0019] As a result, users can drag and drop to complete the merging process in the browser or table interface, and the merged information can be serialized and saved; Vue business components are registered as cell types and remain responsive during rendering; a global message bus is established to achieve zero-coupling synchronization of data and state; granular configuration supports unified type configuration for the entire column, while also allowing exception types to be set for individual cells.

[0020] Step S1: Drag and drop to merge, specifically including: S11: In response to user drag-and-drop operations, capture cell merging information through the afterMergeCells and afterUnmergeCells hooks of Handsontable; S12: After releasing the mouse, call the `setMergeData` method to write the merge range to the cell's metadata (`meta`), serialize the merge information into a `mergeRanges` array, and save it. For example, save it to a backend server or a local database.

[0021] Therefore, users can merge cells by dragging and dropping, converting the merged range of cells into structured data, which can then be saved in a serialized and persistent manner.

[0022] Alternatively, mergeRanges / columns / cellMetas can be serialized into JSON format and stored to form a template, enabling 100% restoration upon the next load.

[0023] Step S2: Component registration, specifically including: S21: Write Vue business components as custom editors and renderers; S22: Register a new cell type using the Handsontable.cellTypes.registerCellType interface. The renderer stage contains the default cell content, while the editor stage contains the content after entering edit mode.

[0024] Thus, Vue business components are registered as cell types and maintain a reactive state during rendering, thereby achieving the injection of Vue business components.

[0025] Furthermore, in step S2, the Vue business component uses JSX syntax and is generated using Vue's render method.

[0026] Step S3: Event communication, specifically including: S31: Establish a global message bus based on the mitt library; S32: Inside the table, publish an event containing the table identifier, cell position, and data value using the bus.emit method; S33: In an external module, listen for the corresponding event using the bus.on method.

[0027] Therefore, when multiple tables, pop-ups, and toolbars exist on the same page, zero-coupling synchronization of data and state can be achieved across components or tables.

[0028] Furthermore, in step S3, the global message bus has an event recording and playback function, which records the triggered events (bus.events) in sequence in the event queue, and supports replaying the event queue in offline or audit scenarios; The event recording and playback function is as follows: in offline working mode, the event queue is temporarily stored in local storage; after the network is restored, the event queue is uploaded to the server in batches.

[0029] Step S4: Granular configuration, specifically including: S41: Set the default type and size of the entire column through the column configuration array; for example, columns[] supports type / width / readOnly fields, allowing you to switch the entire column type with one click; S42: Set exception types or sizes for cells by overriding column configurations through cell metadata; for example, cellMetas['row-col'] can override type, row height, column width, etc. (type / width / height) separately. S43: In response to real-time adjustments to column width or row height by the user, the adjusted pixel values ​​are captured through the afterSetColWidth and afterSetRowHeight hooks of Handsontable and written back to the configuration file.

[0030] Therefore, it supports unified configuration of the entire column type, while allowing exception types to be set for individual cells, and the row height and column width can be finely adjusted at the pixel level, improving the flexibility and convenience of use.

[0031] Furthermore, in step S4, in response to the user's undo command, the column width or row height configuration is restored to its state before adjustment. This implements support for the Ctrl+Z undo function.

[0032] Application Example 1: Rehabilitation Assessment SaaS Frontend: Vue 3 + Vite + Handsontable 12.4 + mitt 3.0 Backend: Spring Boot provides the ` / api / template / {id}` interface to store and retrieve JSON. Custom components: BarthelInput, FIMSelect, MMTSlider, all registered as cell types.

[0033] Application Example 2: Offline Scientific Data Collection (exe) Electron + SQLite, drag-and-drop merging logic is the same as VueCell. During offline periods, bus.events are stored in IndexedDB and uploaded in batches after connecting to the internet for audit playback.

[0034] Application Example 3: Multi-Table Interconnected Large Screen The page renders four tables simultaneously (baseline / January / March / June). After a rating is modified on one table, it is synchronized to three other tables via bus, without the need for $emit to bubble through each table.

[0035] Comparison table of beneficial effects:

[0036] refer to Figure 3 A flexible table configuration system based on Handsontable in a Vue project, including: Drag-and-drop merge engine module 1 is used to capture and serialize cell merge information generated by the user through dragging; that is, to implement step S1: drag-and-drop merge. Vue component registration module 2 is used to register Vue business components as custom cell types that Handsontable can recognize; that is, to implement step S2: component registration; Global message bus module 3, implemented based on the mitt library, is used for event-driven, zero-coupling communication between modules inside and outside the table; that is, to implement step S3: event communication. Granular configuration management module 4 is used to manage hierarchical configuration strategies from global and column-level to cell-level, and update the configuration in real time in response to interface operations; that is, to realize step S4: granular configuration.

[0037] A non-transitory computer-readable storage medium storing a computer program that, when executed by a processor, implements a flexible table configuration method based on Handsontable in the Vue project described above. The above description only discloses some embodiments of the present invention. For those skilled in the art, various modifications and improvements can be made without departing from the inventive concept of the present invention, and these all fall within the scope of protection of the invention.

Claims

1. A flexible table configuration method based on Handsontable in a Vue project, including: S1: Drag and drop to merge; In response to the user's drag operation, capture the area where cells are merged, and serialize the merging information corresponding to the area into persistently storeable merge range data; S2: Component registration; Write Vue business components as custom editors and renderers, and register them as new cell types; S3: Event Communication; Establish a global message bus; publish cell data change events within the table, and listen for the corresponding events in external modules; S4: Granular configuration; It provides unified type configuration at the column level and supports exception configuration for cells through cell metadata.

2. The method for flexible table configuration based on Handsontable in a Vue project according to claim 1, characterized in that, Step S1 includes: S11: In response to user drag-and-drop operations, capture cell merging information through the afterMergeCells and afterUnmergeCells hooks of Handsontable; S12: After releasing the mouse, call the setMergeData method to write the merge range into the cell's metadata, serialize the merge information into a mergeRanges array and save it.

3. The method for flexible table configuration based on Handsontable in a Vue project according to claim 1, characterized in that, Step S2 includes: S21: Write Vue business components as custom editors and renderers; S22: Register as a new cell type via the Handsontable.cellTypes.registerCellType interface.

4. The method for flexible table configuration based on Handsontable in a Vue project according to claim 3, characterized in that, In step S2, the Vue business component uses JSX syntax and is generated using Vue's render method.

5. The method for flexible table configuration based on Handsontable in a Vue project according to claim 1, characterized in that, Step S3 includes: S31: Establish a global message bus based on the mitt library; S32: Inside the table, publish an event containing the table identifier, cell position, and data value using the bus.emit method; S33: In an external module, listen for the corresponding event using the bus.on method.

6. The method for flexible table configuration based on Handsontable in a Vue project according to claim 5, characterized in that, In step S3, the global message bus has event recording and playback functions, which records the triggered events in sequence in the event queue and supports replaying the event queue in offline or audit scenarios; The event recording and playback function is as follows: in offline working mode, the event queue is temporarily stored in local storage; After the network is restored, the event queue will be uploaded to the server in batches.

7. The method for flexible table configuration based on Handsontable in a Vue project according to claim 1, characterized in that, Step S4 includes: S41: Set the default type and size of the entire column via the column configuration array; S42: Set the exception type or size for a cell to override the column configuration using cell metadata; S43: In response to real-time adjustments to column width or row height by the user, the adjusted pixel values ​​are captured through the afterSetColWidth and afterSetRowHeight hooks of Handsontable and written back to the configuration file.

8. The method for flexible table configuration based on Handsontable in a Vue project according to claim 7, characterized in that, In step S4, in response to the user's undo operation command, the column width or row height configuration is restored to its previous state.

9. A flexible table configuration system based on Handsontable in a Vue project, comprising: The drag-and-drop merge engine module is used to capture and serialize cell merge information generated by the user through dragging and dropping; The Vue component registration module is used to register Vue business components as custom cell types that Handsontable can recognize; The global message bus module, implemented based on the mitt library, is used for event-driven, zero-coupling communication between modules inside and outside the table. The granular configuration management module is used to manage hierarchical configuration strategies from the global level and column level to the cell level, and updates the configuration in real time in response to interface operations.

10. A non-transitory computer-readable storage medium storing a computer program that, when executed by a processor, implements the method as described in any one of claims 1 to 8.

Images