Gauge head fixing method and device

Abstract

The invention discloses a header fixing method and device, and relates to the technical field of computers. A specific embodiment of the method comprises the steps of obtaining target table data; a fixed container is arranged in the target table, and a second table corresponding to the target table is arranged in the fixed container; setting a position attribute corresponding to the header of the second table, and fixing the header of the second table at a specific position of a browser page to generate a fixed header; the fixed header is always displayed at the specific position under the condition that the target table longitudinally rolls along with a browser page. According to the implementation mode, when the table component rolls transversely, the fixed header can roll synchronously, and when the column is dynamically added and deleted, the fixed header can be matched with the data column; and the user can operate and view the table in the page more easily, so that the user experience is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a meter header fixing method and device. Background Art

[0002] When there is enough data in the table component of the component library, the browser needs to be scrolled to display the undisplayed table content, so the table header will scroll out of the display window. Based on this, in order to facilitate users to operate and view the table component, the table header needs to be fixed in a predetermined position, that is, the function of fixing the header during page scrolling is realized.

[0003] In the process of implementing the present invention, the inventors discovered that there are at least the following problems in the related art:

[0004] Currently, the table components in mainstream component libraries do not have a fixed header function; when the table component itself scrolls horizontally, the fixed header cannot scroll synchronously; when columns are dynamically added or deleted, the fixed header does not match the data columns; users find it difficult to operate and view the table on the page, affecting the user experience. Summary of the Invention

[0005] In view of this, an embodiment of the present invention provides a table header fixing method and device, which can fix the table header in a table component.

[0006] To achieve the above object, according to one aspect of an embodiment of the present invention, a method for fixing a meter header is provided, comprising:

[0007] Get the target table data;

[0008] Setting a fixed container in the target table, wherein a second table corresponding to the target table is set in the fixed container;

[0009] The position attribute corresponding to the second table header is set to fix the second table header at a specific position of the browser page to generate a fixed header; the fixed header is always displayed at the specific position when the target table scrolls vertically with the browser page.

[0010] Furthermore, the fixed table header is always displayed after the specific position when the target table scrolls with the browser page, and further includes:

[0011] When the target table scrolls horizontally, the second table scrolls horizontally accordingly and the fixed table header always corresponds to the data in the target table.

[0012] Furthermore, when the target table scrolls horizontally, the second table scrolls horizontally accordingly and the fixed table header always corresponds to the data in the target table, including:

[0013] Get the element that scrolls horizontally in the target table;

[0014] For the element, add a horizontal scrolling event and a callback processing function after the horizontal scrolling event occurs;

[0015] The horizontal scroll distance of the element in the second table that is horizontally scrolled is set by the callback processing function; wherein the horizontal scroll distance is the horizontal scroll distance of the element in the target table that is horizontally scrolled obtained from the parameter of the callback processing function.

[0016] Furthermore, setting a fixed container in the target table includes:

[0017] A separator mark is set at a designated position in the target table, wherein the designated position is determined by setting a top offset attribute, a left offset attribute, a right offset attribute, or a bottom offset attribute in a cascading style sheet.

[0018] Furthermore, a second table corresponding to the target table is provided in the fixed container, including:

[0019] copying the target table;

[0020] The cells except the header in the copied table are hidden to generate a second table corresponding to the target table.

[0021] Furthermore, setting a position attribute corresponding to the second table header to fix the second table header at a specific position on the browser page includes:

[0022] The position attribute of the second table header is set to the offset-top attribute, and the second table header is fixed to the top of the target table in the browser page.

[0023] Furthermore, the method further comprises:

[0024] For the second table header, add a ceiling event processing function;

[0025] The second table header is always fixed at the top of the target table in the browser page through the ceiling event processing function.

[0026] According to a second aspect of an embodiment of the present invention, a meter header fixing device is provided, comprising:

[0027] Data acquisition module, used to obtain target table data;

[0028] A fixed container module, configured to set a fixed container in the target table, wherein a second table corresponding to the target table is set in the fixed container;

[0029] A fixed header generation module is used to set the position attribute corresponding to the second table header, fix the header of the second table at a specific position on the browser page to generate a fixed header; the fixed header is always displayed at the specific position when the target table scrolls vertically with the browser page.

[0030] According to a third aspect of an embodiment of the present invention, there is provided an electronic device, including:

[0031] one or more processors;

[0032] a storage device for storing one or more programs,

[0033] When the one or more programs are executed by the one or more processors, the one or more processors are enabled to implement the method described in any one of the above embodiments.

[0034] According to a fourth aspect of an embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored. When the program is executed by a processor, the method described in any one of the above embodiments is implemented.

[0035] One embodiment of the above invention has the following advantages or beneficial effects: obtaining target table data; setting a fixed container in the target table, wherein a second table corresponding to the target table is set in the fixed container; setting a position attribute corresponding to the header of the second table, fixing the header of the second table at a specific position of the browser page to generate a fixed header; the fixed header is always displayed at the specific position when the target table scrolls vertically with the browser page; thereby achieving the beneficial effect of fixing the header in the table component.

[0036] When the target table scrolls horizontally, the second table scrolls horizontally accordingly and the fixed header always corresponds to the data in the target table; when the table component itself scrolls horizontally, the fixed header can also scroll synchronously.

[0037] Obtain an element in a target table that has undergone horizontal scrolling; for the element, add a horizontal scrolling event and a callback processing function after the horizontal scrolling event occurs; set the horizontal scrolling distance of the element in the second table that has undergone horizontal scrolling through the callback processing function; wherein the horizontal scrolling distance is the horizontal scrolling distance of the element in the target table that has undergone horizontal scrolling obtained from the parameters of the callback processing function; ensure that the fixed table header and the data column can maintain matching when columns are dynamically added or deleted; and make it easier for users to operate and view the table in the page, thereby improving the user experience.

[0038] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with specific embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] The accompanying drawings are provided for a better understanding of the present invention and are not intended to limit the present invention.

[0040] Figure 1 is a schematic diagram of the main process of the header fixing method according to an embodiment of the present invention;

[0041] Figure 2 1 is a schematic diagram of the main process of a header fixing method according to a reference embodiment of the present invention;

[0042] Figure 3 is a schematic diagram of the main process of a header fixing method according to another reference embodiment of the present invention;

[0043] Figure 4 is a schematic diagram of the main process of a header fixing method according to another reference embodiment of the present invention;

[0044] Figure 5 is a schematic diagram of main modules of a meter header fixing device according to an embodiment of the present invention;

[0045] Figure 6 is an exemplary system architecture diagram in which embodiments of the present invention may be applied;

[0046] Figure 7 It is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION

[0047] The following description of exemplary embodiments of the present invention is made in conjunction with the accompanying drawings, in which various details of the embodiments of the present invention are included to facilitate understanding. These details should be considered as merely exemplary. Therefore, it should be appreciated by those skilled in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0048] It should be noted that the acquisition, storage and application of personal information involved in the embodiments of the present invention are in compliance with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0049] Regular data is typically displayed in tables, which not only keeps it neat and organized but also allows users to quickly locate the data of interest (rows, columns, or data items within a row). With the continuous development and maturity of front-end technology, coupled with the continuous improvement of user experience, current front-end system development often incorporates a mature UI component library, including table components. These components generally meet the development needs of complex data display scenarios and can significantly improve development efficiency.

[0050] Although the table components in major component libraries can meet the needs of most scenarios, they cannot meet the requirements for specific functions in some scenarios. For example, when there is a lot of data in the table, you need to scroll the browser page to see the data below. At this time, the table header cannot be seen due to scrolling. When there are many columns of data, users will begin to lose track of what the data represents. In this scenario, a fixed header, especially one that is mounted on the ceiling, is a good choice. However, the table components in the current mainstream component libraries do not have a ceiling-mounted function. When encountering such a scenario, developers need to find a solution themselves; moreover, it is very difficult to fix the header when there are fixed columns and the table can be scrolled left and right. It is even more difficult if the columns in the header can be dynamically added or deleted.

[0051] In view of this, according to one aspect of an embodiment of the present invention, a method for fixing a header is provided.

[0052] Figure 1 FIG. 1 is a schematic diagram of the main process of the header fixing method according to an embodiment of the present invention. Figure 1 As shown, the header fixing method according to an embodiment of the present invention includes:

[0053] Step S101, obtaining target table data;

[0054] Among them, obtaining the target table data can be achieved in the following ways: defining the data source, that is, the collection of data to be displayed in the table, which can be data obtained from the back-end API (Application Programming Interface) or local data on the front-end; binding the data to the table component, and passing the data to the data attributes or configuration items of the table component; using the table component to render the data on the page, including configuring the table's column information, style and other related properties; if the amount of data is large, it can be displayed in pages, and at the same time, corresponding functions can be configured to enable users to sort the table data according to certain columns; listening to table events, such as clicking the table header to sort, clicking the paging button, etc., so as to perform corresponding operations when the user interacts with the table; if the data in the table is dynamic, update the data regularly or through certain trigger events to keep the table content up to date.

[0055] It is understandable that the specific implementation of the above steps will vary depending on the front-end framework and table component used. For example, in Ant Design or Element UI, you can refer to the corresponding documentation for detailed implementation guides.

[0056] Step S102, setting a fixed container in the target table, wherein a second table corresponding to the target table is set in the fixed container;

[0057] The fixed container refers to a container element with a fixed position or size in the page layout. No matter how the user scrolls the page or performs other interactive operations, the fixed container always remains in a fixed position or size relative to the viewport or other containers; the fixed container can fix specific elements at a certain position on the page, which is conducive to creating navigation bars, toolbars or other elements that need to be visible at all times; the fixed size of the fixed container can be set, and the size of the fixed container can remain unchanged no matter how other content of the browser page changes, which is conducive to creating fixed-size sidebars, panels or other UI elements; when the page is scrolled, the fixed container can remain visible, allowing users to access the content therein at any time; it can be used to create a floating effect, for example, keeping an element floating above the browser page when scrolling the browser page, providing better navigation or user prompts.

[0058] For example, a fixed container is placed in the target table. This fixed container is actually hidden behind the target table, and a second table corresponding to the target table is placed in the fixed container. It is important to note that the correspondence between the target table and the second table means that the headers of the target table and the second table must be consistent, and the data source and rendering method of each column can also be consistent. This achieves a layered layout effect, allowing the second table to be fixed in a specific position relative to the target table and not move with the browser page scrolling, which is conducive to improving the user experience and displaying more complex table information structures.

[0059] Step S103, setting the position attribute corresponding to the second table header, fixing the second table header at a specific position of the browser page to generate a fixed header; the fixed header is always displayed at the specific position when the target table scrolls vertically with the browser page.

[0060] Among them, the position attribute refers to a set of attributes in CSS (Cascading Style Sheets) used to set the element position, which is used to define the layout and position of the element in the browser page. Setting the position attribute corresponding to the second table header can be achieved through CSS style.

[0061] Specifically, CSS position properties mainly include: position property, which is used to define the positioning method of an element; top property, right property, bottom property and left property, which are used to define the offset of an element, relative to its nearest positioned parent element; margin property, which sets the outer margin of an element, affecting the spacing between the element and surrounding elements; z-index property, which defines the stacking order of elements, that is, which element is on the upper layer among overlapping elements; among them, the values ​​of the position property include: static property value, the default value of the property, the element is in the normal document flow; relative property value, relative positioning, offset relative to the element's own position; absolute property value, absolute positioning, positioning relative to the nearest non-static positioned ancestor element; fixed property value, fixed positioning, positioning relative to the browser window; sticky property value, sticky positioning, fixed before a certain threshold according to the user's scroll position, and then relatively positioned.

[0062] By setting the above properties, the position of the header of the second table in the browser page can be adjusted. For example, use the fixed value of the position attribute to fix it at a certain position on the browser page, and then adjust its specific offset through the top attribute, right attribute, bottom attribute or left attribute; when the position attribute of the header of the second table is set to absolute, the display position of the header of the second table is fixed, such as being located on the left or right side of the display window, and has nothing to do with the relative position of the header of the target table or the page itself, and can be stacked and displayed with the header or page of the target table. Based on this, the fixed effect of the header can be achieved, so that the target table is always displayed at the specific position when the browser page scrolls vertically.

[0063] Specifically, the specific position refers to a fixed position in the browser viewport, and the CSS position attribute is used to achieve the positioning of the element; specifically, the specific position includes the following fixed positions: top position, setting the top position of the element relative to the browser viewport, which can be achieved through the CSS style top:0, aligning the top of the element with the top of the viewport; bottom position, setting the bottom position of the element relative to the browser viewport, calculated and set in combination with the height of the viewport and the height of the element; left or right position, similarly, the element can be fixed to the left or right side of the browser viewport by setting the left or right attribute.

[0064] In an embodiment of the present invention, a fixed container is set in the target table, wherein a second table corresponding to the target table is set in the fixed container; a position attribute corresponding to a header of the second table is set, and the header of the second table is fixed at a specific position of the browser page to generate a fixed header; the fixed header is always displayed at the specific position when the target table scrolls vertically with the browser page; thereby achieving the beneficial effect of fixing the header in the table component.

[0065] Optionally, the fixed table header is always displayed after the specific position when the target table scrolls with the browser page, further comprising:

[0066] When the target table scrolls horizontally, the second table scrolls horizontally accordingly and the fixed table header always corresponds to the data in the target table.

[0067] Specifically, it is understandable that when the width of the target table is greater than the width of the display window, such as the original table width is 2000px and the display window width is 1570px, the browser display window cannot display the entire table at one time, so it is necessary to add a horizontal scrolling event for the table so that the user can view the complete table by horizontal scrolling.

[0068] On this basis, since the fixed header generated above does not move with horizontal scrolling of the browser window, when the target table is scrolled horizontally, in order to ensure that the fixed header matches the content of the original table in the display window, it is necessary to allow the second table to scroll horizontally accordingly and the fixed header always corresponds to the data in the target table. In this way, when the user scrolls the target table horizontally, not only does the content of the target table change, but the fixed header also adjusts accordingly to maintain the corresponding relationship with the data columns, ensuring that the user can understand the meaning of each column when viewing the data.

[0069] In an embodiment of the present invention, when the target table scrolls horizontally, the second table scrolls horizontally accordingly and the fixed header always corresponds to the data in the target table; when the table component itself scrolls horizontally, the fixed header can also scroll synchronously, thereby improving the user experience.

[0070] Figure 2 FIG. 1 is a schematic diagram of the main process of a method for fixing a table header according to a reference embodiment of the present invention. Figure 2 As shown, when the target table scrolls horizontally, the second table scrolls horizontally accordingly and the fixed table header always corresponds to the data in the target table, including:

[0071] Step S201, obtaining the element that is horizontally scrolled in the target table;

[0072] Step S202: adding a horizontal scrolling event and a callback function after the horizontal scrolling event occurs to the element;

[0073] Step S203 , setting a horizontal scroll distance of the element in the second table that is horizontally scrolled by the callback processing function; wherein the horizontal scroll distance is the horizontal scroll distance of the element in the target table that is horizontally scrolled obtained from the parameter of the callback processing function.

[0074] Specifically, the horizontally scrolling element is a container element containing a horizontal scroll bar. After the page rendering is completed, the element that scrolls in the target table is obtained through the JSDOM API (JavaScript Document Object Model API). Based on the element, a scroll event and a callback processing function after the event occurs are added. The callback processing function then uses the JSDOM API to obtain the element that scrolls in the second table and sets the horizontal scroll distance. The offset distance of the fixed header is set based on the horizontal scroll distance of the target table to achieve the effect of synchronous horizontal scrolling of the fixed header and the target table. Specifically, the horizontal scroll distance of the target table can be monitored based on the following method: window.addEventListener('scroll',scrollEvt). Among them, scrollEvt can be used to obtain the horizontal scroll distance body.scrollLeft of the target table, and can also be used to obtain the vertical scroll distance body.scrollTop of the page, so as to respectively monitor the horizontal scroll event and the vertical scroll event.

[0075] The embodiment of the present invention obtains an element that is horizontally scrolled in a target table; adds a horizontal scrolling event and a callback processing function after the horizontal scrolling event occurs to the element; and sets a horizontal scrolling distance of the element that is horizontally scrolled in a second table through the callback processing function; wherein the horizontal scrolling distance is the horizontal scrolling distance of the element that is horizontally scrolled in the target table obtained from the parameter of the callback processing function; thereby, when the target table is horizontally scrolled, the second table is also scrolled synchronously, so that the header of the second table and the data in the target table can be correctly arranged in the same data column, and when the columns are dynamically added or deleted, the fixed header and the data column can be kept matched; it is also easier for users to operate and view the tables in the page, thereby improving the user experience.

[0076] Optionally, setting a fixed container in the target table includes:

[0077] A separator mark is set at a designated position in the target table, wherein the designated position is determined by setting a top offset attribute, a left offset attribute, a right offset attribute, or a bottom offset attribute in a cascading style sheet.

[0078] Specifically, the fixed container can be a div tag (dividing mark), for example, or The specified position is the top position, left position, right position or bottom position described in step S103 above, and its specific offset is adjusted by the top attribute, left attribute, right attribute or bottom attribute accordingly. The specific implementation steps are not repeated here.

[0079] In an embodiment of the present invention, a separator mark is set at a specified position in the target table. The specified position is determined by setting the top offset attribute, the left offset attribute, the right offset attribute or the bottom offset attribute in the cascading style sheet, so that the header of the second table can be fixed at any specific position that is convenient for the user to read, and is not limited to a ceiling-mounted setting, thereby improving the user experience.

[0080] Figure 3 FIG. 1 is a schematic diagram of the main process of a method for fixing a watch head according to another reference embodiment of the present invention. FIG. 1 is used to further explain step S102 in the aforementioned embodiment. Figure 3 As shown, a second table corresponding to the target table is set in the fixed container, including:

[0081] Step S301, copying the target table;

[0082] Step S302 : hiding cells except the header in the copied table to generate a second table corresponding to the target table.

[0083] Specifically, you can use document.getElementById or other selector methods to obtain a reference to the target table; use the cloneNode method to create a copy of the target table, passing the true parameter to indicate a deep clone, that is, including all child nodes; get the rows (tr elements) of the copy table, and loop through these rows. For each row, get its cells (td elements), and add a style class (for example, .hidden-cell) to each cell in the rows except the header; insert the copy table into a fixed container.

[0084] The embodiment of the present invention copies the target table; hides cells except the header in the copied table to generate a second table corresponding to the target table; hides data cells in the copied table and retains the header, which is more concise and improves the efficiency of machine processing.

[0085] Optionally, setting a position attribute corresponding to the second table header to fix the second table header at a specific position on the browser page includes:

[0086] The position attribute of the second table header is set to the offset-top attribute, and the second table header is fixed to the top of the target table in the browser page.

[0087] Figure 4 FIG. 1 is a schematic diagram of the main process of a table fixing method according to another reference embodiment of the present invention. Figure 4 As shown, the method further includes:

[0088] Step S401: Add a ceiling event processing function to the second table header;

[0089] Step S401: The second table header is always fixed at the top of the target table in the browser page through a ceiling event processing function.

[0090] The present invention provides a preferred embodiment, which performs table rendering under the combination of VueJs framework and Ant Design Vue components, and is implemented by binding columns and data-source data through the a-table component. The columns data contains each information in the table header and the rendering method. The rendering method is custom rendering or default rendering. The default rendering directly takes the value from the data and renders it in the form of a string; the custom rendering is to perform advanced processing on the relevant value before actually rendering it on the page, for example, converting the value before displaying it, or making the value clickable, etc. The data-source data contains all data items.

[0091] After determining the target table to be rendered, place a div tag on the top of the target table, and the second table will be placed inside the div tag. The second table is consistent with the target table only in terms of the header. Fewer events can be added to other elements. The events can be mouse-related click events, scroll events, or move-in and remove events, etc. Custom rendering can also be omitted when the column name width is always greater than or equal to the relevant data width, because the column name width will determine the width of the column in the entire table and will not be affected by the width of the data item. Conversely, when the column name width is always less than the relevant data width, the same custom rendering is required, but events can still be omitted.

[0092] The table is rendered using a Vue.js template and script. A container is responsible for overall element positioning, and related styles are implemented in a Vue.js style sheet. ant-table-body is the class name of the element generated after the a-table component is rendered. Its height (37px) can be set through the style sheet, which is the height of the table header. Setting overflow:hidden also hides other elements. In situations with many columns, it's necessary to hide the scroll bar to improve the user experience.

[0093] The ceiling-mounted elements are ready, and the ceiling-mounting function is set up. Use the a-affix component in the component library. If the relevant component is not provided in the component library, you need to import components from other component libraries. The principle of the a-affix component is to use the position:sticky feature in CSS, set the offset-top attribute to the component (set the distance from the top of the browser's visible window) and add an event handling function for when ceiling-mounting occurs. The function sets the status of whether the ceiling has been mounted. The data function in the main code snippet of vue.jsscript returns a variable that can record whether the ceiling has been mounted, and sets it through the callback parameter in the ceiling-mounting event handling function. The affixed class is dynamically added to the container through the ceiling-mounting status value. The main purpose of the class is to change the position of the container layer, which is controlled by the style z-index. Based on this, when the browser scrolls over the target table header, the shadow table header immediately appears on the top layer, and will be fixed at the position set by offset-top, moving with the browser window.

[0094] Specifically, the a-affix component provides an opportunity to process additional logic when ceiling attachment occurs. This opportunity is set using a function. The function parameter affixed is provided by the component side, and its value is true or false. True means that it has been attached to the ceiling, and false means that it has not been attached to the ceiling. It is saved in the tableHeadAffixed (unlimited) state variable, and a class name is set for the fixed container in the template (html template) using this value. Finally, the class name is used to set the CSS style (z-index: 2) so that the second table is displayed above the target table.

[0095] In an embodiment of the present invention, the position attribute of the second table header is set to the offset top attribute, and the second table header is fixed to the top of the target table in the browser page. For the second table header, an event processing function is added when the header is fixed to the top. The event processing function is used to ensure that the second table header is always fixed to the top of the target table in the browser page. This realizes the setting of fixing the header to the top when the browser page is scrolled and the header is no longer visible, thereby improving the user experience.

[0096] According to the second aspect of the embodiment of the present invention, Figure 5 As shown, a meter header fixing device 500 is provided, comprising:

[0097] Data acquisition module 501, used to acquire target table data;

[0098] A fixed container module 502 is configured to set a fixed container in the target table, wherein a second table corresponding to the target table is set in the fixed container;

[0099] The fixed header generation module 503 is used to set the position attribute corresponding to the second table header, fix the header of the second table at a specific position on the browser page, and generate a fixed header; the fixed header is always displayed at the specific position when the target table scrolls vertically with the browser page.

[0100] Optionally, the apparatus 500 further includes a horizontal scrolling module, configured to:

[0101] When the target table scrolls horizontally, the second table scrolls horizontally accordingly and the fixed table header always corresponds to the data in the target table.

[0102] Optionally, the horizontal scrolling module is further configured to:

[0103] Get the element that scrolls horizontally in the target table;

[0104] For the element, add a horizontal scrolling event and a callback processing function after the horizontal scrolling event occurs;

[0105] The horizontal scroll distance of the element in the second table that is horizontally scrolled is set by the callback processing function; wherein the horizontal scroll distance is the horizontal scroll distance of the element in the target table that is horizontally scrolled obtained from the parameter of the callback processing function.

[0106] Optionally, the fixed container module 502 is further used to:

[0107] A separator mark is set at a designated position in the target table, wherein the designated position is determined by setting a top offset attribute, a left offset attribute, a right offset attribute, or a bottom offset attribute in a cascading style sheet.

[0108] Optionally, the fixed container module 502 is further used to:

[0109] copying the target table;

[0110] The cells except the header in the copied table are hidden to generate a second table corresponding to the target table.

[0111] Optionally, the fixed header generating module 503 is further configured to:

[0112] The position attribute of the second table header is set to the offset-top attribute, and the second table header is fixed to the top of the target table in the browser page.

[0113] Optionally, the fixed header generating module 503 is further configured to:

[0114] For the second table header, add a ceiling event processing function;

[0115] The second table header is always fixed at the top of the target table in the browser page through the ceiling event processing function.

[0116] It should be noted that the specific implementation content of the device for fixing the meter header of the present invention has been described in detail in the method for fixing the meter header described above, so the details will not be repeated here.

[0117] According to a third aspect of an embodiment of the present invention, there is provided an electronic device, including:

[0118] one or more processors;

[0119] a storage device for storing one or more programs,

[0120] When the one or more programs are executed by the one or more processors, the one or more processors implement the method provided in the first aspect of the embodiment of the present invention.

[0121] According to a fourth aspect of an embodiment of the present invention, a computer-readable medium is provided, on which a computer program is stored. When the program is executed by a processor, the method provided by the first aspect of the embodiment of the present invention is implemented.

[0122] Figure 6 An exemplary system architecture 600 is shown to which the header fixing method or the header fixing device according to the embodiment of the present invention can be applied.

[0123] like Figure 6 As shown, system architecture 600 may include terminal devices 601, 602, 603, a network 604, and a server 605. Network 604 is used to provide a medium for communication links between terminal devices 601, 602, 603 and server 605. Network 604 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0124] Users can use terminal devices 601, 602, and 603 to interact with server 605 via network 604 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 601, 602, and 603, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

[0125] The terminal devices 601 , 602 , and 603 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers.

[0126] Server 605 may be a server that provides various services, such as a backend management server (for example only) that supports shopping websites browsed by users using terminal devices 601, 602, and 603. The backend management server may analyze and process received data such as header fixation requests, and feed back the processing results (for example, fixed headers - for example only) to the terminal device.

[0127] It should be noted that the header fixing method provided in the embodiment of the present invention is generally executed by the server 605 , and accordingly, the header fixing device is generally provided in the server 605 .

[0128] It should be understood that Figure 6 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.

[0129] Reference below Figure 7 , which shows a schematic structural diagram of a computer system 700 of a terminal device suitable for implementing an embodiment of the present invention. Figure 7 The terminal device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0130] like Figure 7As shown, the computer system 700 includes a central processing unit (CPU) 701, which can execute various appropriate actions and processes according to a program stored in a read-only memory (ROM) 702 or a program loaded from a storage unit 708 into a random access memory (RAM) 703. Various programs and data required for the operation of the system 700 are also stored in the RAM 703. The CPU 701, ROM 702, and RAM 703 are connected to each other via a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.

[0131] The following components are connected to the I / O interface 705: an input section 706 including a keyboard, a mouse, and the like; an output section 707 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and a speaker; a storage section 708 including devices such as a hard disk; and a communication section 709 including a network interface card such as a LAN card or a modem. The communication section 709 performs communication processing via a network such as the Internet. A drive 710 is also connected to the I / O interface 705 as needed. A removable medium 711, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 710 as needed, so that computer programs read therefrom can be installed into the storage section 708 as needed.

[0132] In particular, according to the embodiments disclosed in the present invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments disclosed in the present invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program comprising program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 709, and / or installed from a removable medium 711. When the computer program is executed by the central processing unit (CPU) 701, the above-mentioned functions defined in the system of the present invention are executed.

[0133] It should be noted that the computer-readable medium described in the present invention can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or component, or any combination thereof. More specific examples of computer-readable storage media can include, but are not limited to, an electrical connection having one or more conductors, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, device, or component. In the present invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. This propagated data signal can take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device. Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wireline, optical fiber cable, RF, or any suitable combination thereof.

[0134] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present invention. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or part of the code, and the above-mentioned module, program segment, or part of the code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually run basically in parallel, and they can sometimes run in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart, can be implemented with a dedicated hardware-based system that runs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0135] The modules described in the embodiments of the present invention may be implemented in software or hardware. The modules described may also be provided in a processor. For example, they may be described as follows: a processor including a data acquisition module, a fixed container module, and a fixed header generation module. The names of these modules do not, in some cases, limit the modules themselves. For example, the data acquisition module may also be described as a "module for acquiring target table data."

[0136] As another aspect, the present invention further provides a computer-readable medium, which may be included in the device described in the above embodiment; or may exist independently and not be incorporated into the device. The computer-readable medium carries one or more programs, and when the one or more programs are executed by the device, the device is caused to: obtain target table data; set a fixed container in the target table, wherein a second table corresponding to the target table is set in the fixed container; set a position attribute corresponding to the header of the second table, fix the header of the second table to a specific position on the browser page, and generate a fixed header; the fixed header is always displayed at the specific position when the target table scrolls vertically with the browser page.

[0137] The technical solution according to the embodiment of the present invention has the following advantages or beneficial effects: acquiring target table data; setting a fixed container in the target table, wherein a second table corresponding to the target table is set in the fixed container; setting a position attribute corresponding to the header of the second table, fixing the header of the second table at a specific position of the browser page to generate a fixed header; the fixed header is always displayed at the specific position when the target table scrolls vertically with the browser page; thereby achieving the beneficial effect of fixing the header in the table component.

[0138] When the target table scrolls horizontally, the second table scrolls horizontally accordingly and the fixed header always corresponds to the data in the target table; when the table component itself scrolls horizontally, the fixed header can also scroll synchronously.

[0139] Obtain an element in a target table that has undergone horizontal scrolling; for the element, add a horizontal scrolling event and a callback processing function after the horizontal scrolling event occurs; set the horizontal scrolling distance of the element in the second table that has undergone horizontal scrolling through the callback processing function; wherein the horizontal scrolling distance is the horizontal scrolling distance of the element in the target table that has undergone horizontal scrolling obtained from the parameters of the callback processing function; ensure that the fixed table header and the data column can maintain matching when columns are dynamically added or deleted; and make it easier for users to operate and view the table in the page, thereby improving the user experience.

[0140] The above specific embodiments do not limit the scope of protection of the present invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions may occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention are intended to be included within the scope of protection of the present invention.

[0141] It should be noted that the acquisition, storage and application of user personal information involved in the technical solution of this disclosure are in compliance with the provisions of relevant laws and regulations and do not violate public order and good morals.

Claims

1. A method for fixing a meter head, characterized in that: include: Get the target table data; Setting a fixed container in the target table, wherein a second table corresponding to the target table is set in the fixed container; The position attribute corresponding to the second table header is set to fix the second table header at a specific position of the browser page to generate a fixed header; the fixed header is always displayed at the specific position when the target table scrolls vertically with the browser page.

2. The method for fixing the meter head according to claim 1, characterized in that: The fixed header is always displayed after the specific position when the target table scrolls with the browser page, and further includes: When the target table scrolls horizontally, the second table scrolls horizontally accordingly and the fixed table header always corresponds to the data in the target table.

3. The method for fixing the meter head according to claim 2, characterized in that: When the target table scrolls horizontally, the second table scrolls horizontally accordingly and the fixed table header always corresponds to the data in the target table, including: Get the element that scrolls horizontally in the target table; For the element, add a horizontal scrolling event and a callback processing function after the horizontal scrolling event occurs; The horizontal scroll distance of the element in the second table that is horizontally scrolled is set by the callback processing function; wherein the horizontal scroll distance is the horizontal scroll distance of the element in the target table that is horizontally scrolled obtained from the parameter of the callback processing function.

4. The method for fixing a meter head according to claim 1, wherein: Setting a fixed container in the target table includes: A separator mark is set at a designated position in the target table, wherein the designated position is determined by setting a top offset attribute, a left offset attribute, a right offset attribute, or a bottom offset attribute in a cascading style sheet.

5. The method for fixing a meter head according to claim 1, characterized in that: A second table corresponding to the target table is provided in the fixed container, including: copying the target table; The cells except the header in the copied table are hidden to generate a second table corresponding to the target table.

6. The method for fixing a meter head according to claim 1, characterized in that: Setting the position attribute corresponding to the header of the second table to fix the header of the second table at a specific position on the browser page includes: The position attribute of the second table header is set to the offset-top attribute, and the second table header is fixed to the top of the target table in the browser page.

7. The method for fixing a meter head according to claim 6, characterized in that: The method further comprises: For the second table header, add a ceiling event processing function; The second table header is always fixed at the top of the target table in the browser page through the ceiling event processing function.

8. A meter head fixing device, characterized in that: include: Data acquisition module, used to obtain target table data; A fixed container module, configured to set a fixed container in the target table, wherein a second table corresponding to the target table is set in the fixed container; A fixed header generation module is used to set the position attribute corresponding to the second table header, fix the header of the second table at a specific position on the browser page to generate a fixed header; the fixed header is always displayed at the specific position when the target table scrolls vertically with the browser page.

9. An electronic device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors are enabled to implement the method according to any one of claims 1 to 7.

10. A computer-readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images