System and method for data display and editing

Abstract

This invention discloses a data display and editing system and its implementation method. First, at least one template is created in a data display platform. Then, multiple card components are added to the template. Each card component can be adjusted in size and position by dragging and dropping, and automatically adapts to the grid to complete the layout. Furthermore, each card component can be configured with attributes and tags through a parameter configuration module, and content rendering is performed according to the selected card type. A layout update module can listen for changes in layout and parameters, update the layout object accordingly, and save the updates to the interface. Thus, users can switch to different templates within a browsing module based on their browsing permissions to fully reproduce the template's page layout and displayed content.

Claims

1. A data display and editing system, wherein a server and a user terminal information device are respectively connected to a data display platform for data page layout and content display, comprising: the server having a central processing unit, and being connected to a permission management module and a template database respectively; the data display platform being connected to the central processing unit, and having a template creation module, a card creation module, a drag-and-drop editing module, a parameter configuration module, a layout update module, and a browsing module; the template creation module is used to create at least one template and a corresponding template number, and the card creation module further creates multiple card components in the template; in the drag-and-drop editing module, each card component is dragged and adjusted from its original coordinate position to an updated coordinate position, and aligned and snapped to a grid line, causing a grid layout plugin to trigger a callback function, which is determined to be a position change event; In this drag-and-drop editing module, select an adjustment point for each card component, drag to adjust the original card width and height to the updated width and height, and align them snapped to the grid line. This triggers the callback function in the grid layout plugin, indicating a size adjustment event. The parameter configuration module is used to add multiple card labels and multiple card attributes to each card component, and renders content based on the selected card type for each card component. The parameter configuration module assembles each card label and each card attribute into a layout object, wherein the layout object contains the specific position and size data of each card component in the template, and each card component in the template exists on a single page; wherein each card label represents the category or tag of the corresponding card component, and each card attribute represents the main feature or state of the corresponding card component; wherein content rendering based on the selected card type of each card component includes: inputting the newly added card labels and each card attribute into a chart library as the data source for the chart, and then performing content rendering based on a chart style and a representation in the chart library; The layout update module listens for position change events and size adjustment events in real time and updates the layout object via callback; and the browsing module has a drop-down menu that allows switching between multiple templates based on browsing permissions. When switching to any template, the module queries the template database based on the template number and reproduces the template data, layout data, and display content of that template in the browsing module.

2. The data display and editing system as described in request item 1, wherein, The server has a trajectory recording module that is connected to the central processor to record a user account's transaction trajectory or web page behavior trajectory using an event-driven architecture, log management, or a combination thereof.

3. The data display and editing system as described in claim 1, wherein, This grid layout plugin is a react-grid-layout plugin used to create a dynamic or responsive grid layout for each card component.

4. The data display and editing system as described in claim 1, wherein, This parameter configuration module can set an external attribute based on a website stay event, a page browsing event, and a button click event. The external attribute can be set to one of the following: a time threshold, a display style, and a click effect.

5. The data display and editing system as described in request item 1, wherein, The layout update module can record the position change event and the size adjustment event in a time series, and restore a historical layout through the time series.

6. The data display and editing system as described in claim 1, wherein, Each card component in the browsing module has a remarks field.

7. A method for implementing a data display and editing system, wherein a server and a user terminal information device are respectively connected to a data display platform for data page layout and content display, comprising: a template creation and import step: creating at least one template by a template creation module, and setting a template name, a template structure and a template parameter; a grid plugin import step: importing a grid layout plugin in a development environment, and creating multiple card components in the template; an initialization layout object step: setting a layout object and a callback function and storing them in an interface, and constructing the data display platform, followed by an account setting and login step: setting a role for a user account using a permission management module, and logging into the data display platform; Step 1: Determine if template is enabled. If the user account's role is administrator, proceed to: Enter edit management mode; Perform card structure layout; Set card name and card type for each card component; Drag and adjust each card component in a drag-and-drop editing module; Trigger grid layout callback; Drag and adjust the original coordinate position of each card component to an updated coordinate position, and snap it to a grid line, causing the grid layout plugin to trigger the callback function, which is identified as a position change event; Select an adjustment point for each card component, drag and adjust the original card width and height to an updated width and height, and snap it to the grid line, causing the grid layout plugin to trigger the callback function, which is identified as a size adjustment event; Then, Update layout object; Use a layout update module to listen for the position change event and the size adjustment event in real time, and update the layout object accordingly. In the step of entering the editing management mode, a card content editing step is performed: for each card component, an attribute and tag configuration step is performed: multiple card tags and multiple card attributes are added to each card component using a parameter configuration module, followed by a content rendering step: content is rendered based on the selected card type for each card component, wherein, The parameter configuration module assembles each card label and each card attribute into the layout object, wherein the layout object contains the specific position and size data of each card component in the template, and each card component in the template exists on a single page; wherein each card label represents the category or tag of the corresponding card component, and each card attribute represents the main feature or state of the corresponding card component; wherein content rendering based on the selected card type of each card component includes: inputting the newly added card labels and each card attribute into a chart library as the data source for the chart, and then performing content rendering based on a chart style and a representation in the chart library; In the step of determining whether to open with a template, if the user account's role is a general user, then a step of entering browsing mode is performed: after entering a browsing module, a drop-down menu is used to switch between multiple templates based on browsing permissions. When switching to any template, a template database is queried based on the template's template number, and then the template data, layout data, and display content of the template are reproduced through the browsing module; and a configuration saving step: when the step of entering the editing and management module is completed, the template and its corresponding template number are stored in the template database through the interface.

8. A method for implementing the data display and editing system as described in claim 7, wherein, In the step of updating the layout object, the layout update module records the position change event in a time series and restores a historical layout through the time series.

Images