Table field searching method, system and related device

Abstract

The embodiment of the application discloses a table field searching method, system and related equipment, the method comprises the following steps: according to the weight data corresponding to each table header field in the target table, determining the color block to which each table header field is allocated, and binding a display event to each color block; rendering a heat map composed of each color block at the scroll bar, so that when any color block is hit, the display event is called to display the table header field corresponding to the color block in the visible area of the browser window. According to the weight data corresponding to the table header field, the embodiment of the application allocates the corresponding color block to each table header field, which helps the user to quickly identify the position of the required field in the target table through the color differentiation of each color block, and overcomes the disadvantage that the traditional scroll bar can only provide sliding capability but cannot locate the field; the setting of the display event can make the required field and its content jump to the visible area of the browser window, thereby meeting the user's searching demand for the table content.

Description

Technical Field

[0001] This application relates to the field of data technology, and in particular to methods, systems and related devices for searching table fields. Background Technology

[0002] In everyday applications, many tables provide scrollbars for their row and / or column fields, allowing users to drag the scrollbars to the desired field.

[0003] However, when a table has too many header rows and / or header columns (collectively referred to as header fields), users need to scroll vertically and / or horizontally for extended periods or even repeatedly to find the desired content, resulting in low viewing efficiency. Therefore, it is necessary to provide an effective solution. Summary of the Invention

[0004] This application provides a table field search method, system, and related equipment to improve the search efficiency of table title fields and their contents.

[0005] The first aspect of this application provides a method for searching table fields, including:

[0006] Set scrollbars for the target table's header row and / or header columns to the target size;

[0007] Based on the weight data corresponding to each header field in the target table, determine the color block assigned to each header field, and bind a display event to each color block;

[0008] A heatmap composed of the color blocks is rendered at the scroll bar so that when any color block is hit, the display event is called to display the header field corresponding to the color block in the visible area of ​​the browser window.

[0009] Optionally, determining the color block assigned to each header field based on the weight data corresponding to each header field in the target table includes:

[0010] Select a target number of colors to be included, wherein the target number is determined based on the number of weighted data;

[0011] Establish a one-to-one mapping relationship between each of the selected colors and each of the weight data to determine the constituent colors of the color blocks corresponding to each of the header fields in the browsing state.

[0012] Optionally, the method further includes:

[0013] A hit event is bound to each of the aforementioned header fields, so that the weight data corresponding to the header field is increased each time the header field is hit;

[0014] The hit event includes the header field being clicked, the color block corresponding to the header field being clicked, or the header field being the filtered field.

[0015] Optionally, the method further includes:

[0016] Based on the comparison results between the weighted data, the header field with the larger weighted data among the weighted data is taken as the high-frequency field;

[0017] The content of the high-frequency fields is arranged before the content of the low-frequency fields; the content includes the specific values ​​and color blocks corresponding to the header fields respectively.

[0018] Optionally, the method further includes:

[0019] Distinguish between required and optional fields in each of the table header fields;

[0020] Two different colors are assigned to the color blocks corresponding to the required fields and the non-required fields, so that each color block reflects whether the corresponding header field is a required field in the edit state.

[0021] Optionally, the method further includes:

[0022] A prompt event is bound to each of the color blocks so that an information pop-up appears when any of the color blocks is hit for a preset time; the information pop-up displays at least the header field information corresponding to the color block.

[0023] Optionally, the method further includes:

[0024] The weight data and user identifiers are bound together so that different heatmaps are displayed synchronously when the target table is viewed by different users; wherein, the heatmaps for different users are rendered synchronously based on the weight data corresponding to the user identifier.

[0025] The method described in the first aspect of this application may be implemented using the content described in the second aspect of this application.

[0026] A second aspect of this application provides a table field lookup system, including: a processing unit and a display unit;

[0027] The processing unit is used to set scroll bars of a target size for the header row and / or header column of the target table;

[0028] The processing unit is further configured to determine the color block assigned to each header field based on the weight data corresponding to each header field in the target table, and to bind a display event to each color block;

[0029] The display unit is used to render a heatmap composed of the color blocks at the scroll bar, so that when any color block is hit, the display event is invoked to display the header field corresponding to the color block in the visible area of ​​the browser window.

[0030] A third aspect of this application provides an electronic device, including:

[0031] Central processing unit, memory, and input / output interfaces;

[0032] The memory is either a short-term storage memory or a persistent storage memory;

[0033] The central processing unit is configured to communicate with the memory and execute instructions in the memory to perform the method described in the first aspect of the embodiments of this application or any specific implementation thereof.

[0034] A fourth aspect of this application provides a computer-readable storage medium including instructions that, when executed on a computer, cause the computer to perform the method described in the first aspect of this application or any specific implementation thereof.

[0035] The fifth aspect of this application provides a computer program product comprising instructions or a computer program, which, when run on a computer, causes the computer to perform the method described in the first aspect of this application or any specific implementation thereof.

[0036] As can be seen from the above technical solutions, the embodiments of this application have at least the following advantages:

[0037] According to the weight data corresponding to the header fields, this application assigns corresponding color blocks to each header field, which helps users quickly identify the position of the required field in the target table by distinguishing the colors of each color block. This overcomes the drawback of traditional scroll bars, which can only provide sliding capabilities but cannot locate fields. In addition, the setting of display events can cause the required field and its content to jump to the visible area of ​​the browser window, thereby meeting the user's needs for finding table content. Attached Figure Description

[0038] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments recorded in this application. For those skilled in the art, other drawings can be obtained based on these drawings.

[0039] It should be noted that although the steps in the flowcharts (if any) involved in the embodiments are drawn sequentially according to the arrows, unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts involved in the embodiments may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages in other steps.

[0040] Figure 1 This is a schematic diagram of a scenario architecture for the table field lookup method in an embodiment of this application;

[0041] Figure 2 This is a flowchart illustrating a table field lookup method according to an embodiment of this application;

[0042] Figures 3 to 8 This is a schematic diagram of a scroll bar or heatmap for the table field search method in an embodiment of this application;

[0043] Figure 9 This is another flowchart illustrating the table field lookup method in this application.

[0044] Figure 10 This is a schematic diagram of the structure of a table field lookup system according to an embodiment of this application;

[0045] Figure 11 This is a schematic diagram of the structure of an electronic device according to an embodiment of this application. Detailed Implementation

[0046] To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be regarded as limitations on this application. All other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0047] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification, claims, and drawings of this application are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0048] In the following description, expressions such as "one specific implementation" or "one specific example" describe a subset of all possible embodiments. However, it is understood that "one specific implementation" or "one specific example" can be the same or different subset of all possible embodiments and can be combined with each other without conflict. In the following description, the term "multiple" means at least two. When a certain value mentioned in this application reaches a threshold (if it exists), in some specific examples, it may include the former being greater than the latter. When "any" or "at least one" or similar expressions are mentioned, it specifically refers to any one of the listed examples or any combination of these examples.

[0049] 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 application belongs. The terminology used herein is for the purpose of describing embodiments of this application only and is not intended to limit this application.

[0050] Please see Figure 1 , Figure 1 A schematic diagram illustrating an application environment applicable to embodiments of this application is shown. The methods provided in embodiments of this application can be applied to, for example... Figure 1The interactive system 100 shown includes a terminal device 101 and a server 102. The server 102 is communicatively connected to the terminal device 101. The server 102 can be a traditional server or a cloud server, without specific limitations. The terminal device 101 can be various electronic devices with a display screen that support data input, including but not limited to smartphones, tablets, laptops, desktop computers, and wearable electronic devices. Specifically, data input can be based on a gesture recognition module or mouse recognition module installed on the terminal device 101, allowing users to perform interactive methods such as gesture input or mouse control. A client application can be installed on the terminal device 101, allowing users to communicate with the server 102 based on the client application (e.g., an app, a mini-program), or to perform the aforementioned data input. Similarly, the server 102 can also deploy a server-side application, which can cooperate with the aforementioned client application to implement this method. For example, server 102 sets up a heatmap for the target table to be viewed by the client application, enabling users to quickly identify and jump to the location of the required field in the table by distinguishing and selecting the color blocks in the heatmap, thus meeting the user's needs for efficiency and accuracy in finding the content of the table header field.

[0051] The above application environment is merely an example for ease of understanding. It is understood that the embodiments of this application are not limited to the above application environment.

[0052] The method described in this application will be further explained in detail below.

[0053] Please see Figures 2 to 4 The first aspect of this application provides a specific embodiment of a table field lookup method, which includes the following operation steps:

[0054] Step 21: Set scrollbars for the target size for the header row and / or header column of the target table.

[0055] Scroll bars added to the header row or header column of the target table can be arranged vertically or horizontally on the side of the target table to provide users with the ability to scroll the table content vertically or horizontally. This target size can be determined based on at least one of the following factors: the number of header fields (header row fields or column fields), the viewport size, and the cell size. There are no specific limitations on this.

[0056] Step 22: Determine the color block assigned to each header field and bind a display event to each color block.

[0057] Specifically, based on the weight data corresponding to each header field in the target table, the color block assigned to each header field can be determined, and a display event can be bound to each color block. Here, the weight data can represent the frequency or importance of the header field (from the user's perspective). This frequency of use can be the frequency with which the header field content is selected, marked, or referenced. Initially, each weight data can be a default value (such as 0) or defined by the user. Subsequently, each time a header field is used, the weight data (specifically, the weight value) corresponding to that header field can be increased by 1. Figure 3 As shown, in some specific examples, the heatmap in the initial state can be hidden or lightly colored (e.g., each color block is white or transparent).

[0058] A color block is a flat area composed of colors and is a basic color element in an image, differing in color and / or geometric shape. For ease of explanation and understanding, the color blocks in the embodiments of this application are mainly distinguished by color, and their geometric shapes may be the same or different, without specific limitations. Of course, the method of identifying and locating header fields through color block shape (in which case the colors of the color blocks may be the same or different) also falls within the protection scope of this application, and can be referred to the method of identifying and locating header fields through color block color, which will not be elaborated here.

[0059] Step 23: Using the heatmap formed by piecing together the colored blocks, locate and jump to the position of the target header field.

[0060] like Figure 4 As shown, a heatmap composed of color blocks is rendered at the scrollbar. When any color block is selected, a display event is invoked to show the corresponding (target) header field in the browser window's visible area (viewport). For example, the target header field that the user wants to view can be automatically moved into the viewport (fields already in the viewport can remain untouched), thus conveniently meeting the user's viewing needs. A color block can be selected by the user using the mouse or gestures, such as clicking, hovering, or dragging the scrollbar slider to the block's location. This heatmap can be rendered inside or outside the scrollbar (top or bottom), meaning its distribution can be customized.

[0061] In summary, this application's embodiments assign corresponding color blocks to each header field based on the weight data corresponding to the header fields. This helps users quickly identify the location of the required field (i.e., the target header field) in the target table by distinguishing the colors of each color block, overcoming the drawback of traditional scrollbars that can only provide sliding capabilities but cannot locate fields. In addition, the setting of display events can cause the required field and its content to jump to the visible area of ​​the browser window, thereby meeting the user's need to find table content.

[0062] Based on the examples above, some specific implementation examples will be provided below. In practical applications, the implementation details of these examples can be combined or implemented separately as needed, depending on the corresponding functional principles and application logic, and can be determined according to the actual scenario. The following uses a table column (i.e., the header column) as an example to illustrate the process of searching for fields in the header column. Similarly, the process of searching for fields in the header row can be implemented in the same way, without going into details.

[0063] Please see Figures 2 to 9 This application provides some other specific embodiments of a table field lookup method, which include the following operation steps:

[0064] Step 21: Set scrollbars for the target size for the header row and / or header column of the target table.

[0065] In some specific examples, after obtaining the container instance, you can call the DOM instance method `getBoundingClientRect` to get the container window width `x` (i.e., the scrollbar width). In some examples, the dimensions of the heatmap and scrollbar can be the same or different. For ease of explanation and understanding, we will assume they are the same here, meaning the width `x` is also the width of the heatmap. The `getBoundingClientRect` method returns the size of the element (such as the target table) and its position relative to the viewport. Based on this returned information, you can determine the appropriate size for the scrollbar and heatmap.

[0066] Step 22: Determine the color block assigned to each header field and bind a display event to each color block.

[0067] In some specific examples, the specific operation process of step 22 may include: selecting a target number of selected colors, the target number being determined based on the number of weighted data; establishing a one-to-one mapping relationship between each selected color and each weighted data, so as to determine the constituent color of the color block corresponding to each header field in the browsing state.

[0068] For example, the weights of a target table can be stored in a database, with each weight uniquely identified by both the user ID and the table ID. The table column data can be iterated through, and this data can be assembled into an array of key-value pairs, such as using the table column identifier (id) as the key and the value (or weights) as an object. This object can specifically contain the current column name, the table ID, the weight value (initially 0, and subsequently the corresponding changing weight value in weights), and the table column's background color (the background color of the color block in the heatmap corresponding to the current column). Furthermore, this object can also contain the column ID and column name of the previous and next columns, respectively.

[0069] If a user's target table has 10 header columns (i.e., 10 different column types), then the number of weights (specifically, weight values) for each of these 10 header columns is less than or equal to 10. This "less than" is used because some column types can have the same weight value. Specifically, a mapping relationship can be established between these weight values ​​and the same number of selected colors using the minimum and maximum weight values. For example, the weight values ​​a, b, and c of the first to third columns correspond to yellow, green, and blue selected colors, respectively; that is, the color blocks in these three columns are yellow, green, and blue, respectively.

[0070] Step 23: Using the heatmap formed by piecing together the colored blocks, locate and jump to the position of the target header field.

[0071] Taking mouse control as an example (it could also be gestures, etc.), for each color block bound to a display event, when any color block is hit, the `scrollIntoViewIfNeeded` method pointed to by that display event can be called to scroll a column of the table into the visible area (i.e., the viewport) of the browser window. The `scrollIntoViewIfNeeded` method is used to scroll elements that are not within the visible area of ​​the browser window (e.g., some fields in the table are too long and exceed the viewport to be visible) back into the visible area of ​​the browser window; if the element (a column field) is already within the visible area of ​​the browser window, no scrolling will occur.

[0072] As can be seen from the above description, the heatmap of this application embodiment can be regarded as a thumbnail image compressed within the viewport, occupying a small space. By hitting a certain color block of the heatmap, the user can easily locate and jump to view the position of the required field.

[0073] based on Figure 2 As an example, as a possible implementation, the embodiments of this application may also include the following operations: binding a hit event to each header field so that the weight data corresponding to the header field is increased each time the header field is hit; wherein, the hit event includes the header field being clicked, or the color block corresponding to the header field being clicked, or the header field being the filtered field.

[0074] The weights of the table can change after the initial state, driven by user or table administrator actions. Afterwards, the color corresponding to the column can be assigned the color indicated by the new weight, synchronously changing the constituent colors of the blocks, i.e., re-rendering the heatmap. Below are three scenarios for the occurrence or application of hit events, where the following user IDs can be added as needed:

[0075] (1) When the mouse clicks on a column name in the target table, the weight value in the corresponding column id in the data (target table) is incremented by 1, the weight value in the corresponding column id in the weights data is incremented by 1, and the interface is called according to (user id and) table id to change the corresponding weights weight data in the database (specifically, to change the weight value).

[0076] (2) When the mouse clicks on a color block in the heatmap, the corresponding column ID is obtained through the click event, the DOM element of the table column (including the size of the table and / or the cells in the table) is obtained, the column of the table is scrolled into the visible range of the window according to the scrollIntoViewIfNeeded method, the weight in the corresponding column ID in the data is incremented by 1, the weight in the corresponding ID in the weights data is incremented by 1, and the interface is called according to (user ID and) table ID to change the corresponding weights weight data in the database.

[0077] (3) When the mouse clicks the filter field of the table column, add the tracking function. Listen to whether the table column field is filtered by the addEventListener method (used to add a listener event to the specified element). After confirming that it is filtered and left, get the ID of the currently filtered column, increment the weight in the corresponding ID in the data data by 1, increment the weight in the corresponding ID in the weights data by 1, and call the interface according to (user ID and) table ID to change the corresponding weights data in the database.

[0078] based on Figure 2 As illustrated in the example, as a possible implementation, this application embodiment may further include the following operations: based on the comparison results between the weighted data, the header field with the larger weighted data (specifically, the weight value) among the weighted data is designated as a high-frequency field; the content of the high-frequency field is arranged before the content of the low-frequency field; the content includes the specific value and color block corresponding to each header field. For example... Figure 8 As shown, a timed program can be set on the page. When the user uses the current page or table for a predetermined time threshold, a "One-Click Sort Function" pop-up (or prompt box) can be automatically displayed in the table. When the user clicks the "One-Click Sort Function" button, the system's recommended field sorting scheme will be executed, such as placing high-frequency fields and their color blocks at the front and low-frequency fields and their color blocks at the back. This allows for personalized settings of the table, making it easier for users to quickly find frequently used high-frequency fields and avoiding the need to repeatedly drag the scroll bar to find frequently used content, which would reduce the user experience.

[0079] based on Figure 2As illustrated in the example, as a possible implementation, the embodiments of this application may further include the following operations: distinguishing between required and non-required fields in each header field; assigning two different colors to the color blocks corresponding to the required and non-required fields respectively, so that each color block reflects whether the corresponding header field is a required field in the editing state. Figure 5 As shown, by determining whether a column in the table is a required field, two different colors can be assigned to bg (the background color of the color block in the heatmap corresponding to the current column) to distinguish whether the current column is a non-required (or mandatory) column, so as to avoid the incomplete filling of field values ​​in relatively important required columns in the table (i.e., omissions). For example, the columns corresponding to red and yellow color blocks are divided into required fields (the column name can be marked with an asterisk in the table) and non-required fields (the column name does not have an asterisk in the table). It should be noted that the color blocks used to distinguish whether header fields are required and the color blocks used to distinguish the weight or frequency of use of header fields are generally mutually exclusive and should not exist simultaneously. This is to avoid confusion in color and interference with the usage effect. Therefore, in some examples, the current state of the table can be distinguished. The color blocks used to distinguish the weight or frequency of use of header fields are displayed only when browsing, and the color blocks used to distinguish whether header fields are required are displayed only when editing. In short, the heatmap of the same table can have two states, and the purpose and color composition of the color blocks are different in different states. The specific settings can be adjusted by switching between these two states or setting the distribution of their constituent colors.

[0080] based on Figure 2 As illustrated in the example, as a possible implementation, this application embodiment may further include the following operations: binding a prompt event to each color block, so that an information pop-up appears when any color block is hit for a preset time; the information pop-up displays at least the header field information corresponding to the color block (e.g., each hit color block). Figure 6.1 or Figure 6.2 As shown, when the mouse hovers over a specific color block on the heatmap (one of the ways a color block is hit), the corresponding table column ID can be obtained. Then, by traversing the table column ID, the data corresponding to that column ID in the data (i.e., the target table data) can be obtained. A tooltip (i.e., an information overlay) is rendered at the current color block. This tooltip is used to display at least the field information such as the name of the current column. In some examples, this tooltip can also display the field information corresponding to the first n columns and the last n columns of the current column (such as column name and / or column ID, where n can be 1).

[0081] based on Figure 2As an example, as a possible implementation, this application embodiment may further include the following operation: binding weight data and user identifiers so that different heatmaps are displayed synchronously when the target table is viewed by different users; wherein, the heatmaps viewed by different users are rendered synchronously according to the weight data corresponding to the user identifier. For example, given that different users have personalized perceptions or needs, the weight data set by different users for the same table may be different. Therefore, the user identifier (such as user id) and the current table id can be used as unique identifiers to query the database, find the corresponding weight data (i.e., weights), and then render personalized heatmaps for different users. In other words, one possible implementation of this application embodiment is to quickly locate the required table header field through the heatmap, and the user id does not need to be considered at this stage. Further, as another possible implementation, user id can also be added and applied so that when different users log in to view the same target table, the distribution of color blocks, etc., of the heatmap of the table is different according to the user. That is, the heatmap content can be dynamically displayed in combination with the user's role and / or the set weight data, so that different users can further accurately locate the field content they are interested in.

[0082] Compared to Figure 2 The examples shown illustrate that the additional examples or possible implementations mentioned above may not necessarily be executed in actual implementation. If more than two examples or possible implementations are added, these examples or possible implementations may be implemented in combination or individually, depending on the actual scenario.

[0083] In summary, this application provides a scenario for implementing a table scrollbar with fast navigation and personalized arrangement functions. First, the table can distinguish between browsing and editing states (the two states can exist mutually exclusively). When a user (logged in) enters the table page, the system can identify the table state and the current user's historical operation data on the table (to obtain the weight data of the data), and display the current field's sorting and the table display status based on the identification results; for example... Figure 4 As shown, when the table is in view mode, if the mouse hovers over a position on the scroll bar, the scroll bar background displays the frequency of use of the current field (such as the frequency of being marked, copied, or clicked) in the form of a heatmap; for example... Figure 5 As shown, when the table is in edit mode, hovering the mouse over a colored block on the scroll bar displays the positions of the required (or mandatory) fields in the current table using two colored blocks in the scroll bar background; for example... Figure 6.1 (Browsing status) or Figure 6.2(In edit mode) When the mouse hovers over the scroll bar or a certain colored block for a preset time threshold, a floating layer describing the field corresponding to the current position and the names of the fields before and after it will be displayed, meaning at least the header field information corresponding to the hovered colored block will be displayed; for example... Figure 7 As shown, clicking on a specific location on the scroll bar or any colored block (regardless of the table state) will quickly locate and jump to that field; users can browse table information and further filter the table content by selecting header fields (i.e., some content within the table is hidden); for example... Figure 8 As shown, when a user uses the functions of the current page table (such as browsing, clicking, hovering, or filtering) for a predetermined time threshold, the table will automatically display a "One-Click Arrangement Function" overlay. If the user confirms by clicking the "One-Click Arrangement Function" button, the system's recommended field sorting scheme will be executed, such as placing high-frequency fields and their color blocks at the front and low-frequency fields and their color blocks at the back, to complete the personalized settings of the table.

[0084] The specific implementation principles behind the application effects achieved in this application, as described above, are as follows: Figure 9 As shown:

[0085] 1. After obtaining the container instance, call the DOM instance method getBoundingClientRect. This method will return the size of the element (which can refer to a table and / or a cell within a table) and its position relative to the viewport, thus obtaining the container window width x.

[0086] 2. Get the current table status from the isEdit field. True indicates editing status, and false indicates browsing status.

[0087] 3. Based on the table status, obtain the heatmap weight data (weights) of the current user's table column (using the user ID and the current table ID as unique identifiers, query the database to find the corresponding weight data). The weights is an object, where the key is the table column ID and the value is the weight value of the current column.

[0088] 4. Traverse the table column data and reassemble it into key-value pairs. The column ID is used as the key, and the value is an object (referred to as `weights` in the text). This object contains the current column name, table ID, weight value (initialized to 0, then dynamically changed from `weights`), the column IDs and names of the previous and next columns, and the `bg` of the current column (the background color of the corresponding color block in the heatmap). In browsing mode, the minimum and maximum weight values ​​are used to establish a mapping between each weight value and each color. In editing mode, different colors are assigned to `bg` based on whether a column is required, distinguishing whether the current column is optional, ensuring that each color block reflects whether its corresponding header field is required in editing mode.

[0089] 5. Iterate through the table column data (data), render a heatmap with a width of x at the table's scrollbar, render the color of each color block according to the bg in the data, and bind mouseover and click events to each color block (hide the heatmap during initialization using CSS styles).

[0090] 6. When the mouse hovers over the scrollbar, the system automatically changes the table's Cascading Style Sheets (CSS) style to display the heatmap (the heatmap is hidden during initialization and only appears when the mouse hovers over the scrollbar, etc.). Additionally, the table column ID corresponding to the specific color block on the heatmap can be obtained through the mouseover event. Then, the data corresponding to the ID in the data table can be retrieved by iterating through the column IDs. A tooltip is then rendered under the current color block, displaying the field information (such as column name and / or column ID) of the current column and the two (or three) columns before and after it.

[0091] 7. When the mouse clicks on these three columns of information, the DOM element of the table column (which can refer to the table and / or the cell within the table) is obtained based on the ID of the clicked column name. The scrollIntoViewIfNeeded method is then called to scroll that column of the table into the visible area of ​​the window. The specific implementation process of process 7 can have the following three scenarios (as in processes 7.1 to 7.3).

[0092] 7.1 After clicking the corresponding column name in the table, increment the weight in the corresponding id in the data data by 1, and increment the weight in the corresponding id in the weights data by 1. Then, call the interface based on the user id and table id to change the corresponding weights data in the database.

[0093] 7.2 When the mouse clicks on the corresponding color block of the heatmap, the corresponding column ID is obtained through the click event, the DOM element of the table column is obtained, and the column is scrolled into the visible range of the window according to the scrollIntoViewIfNeeded method. At the same time, the weight in the corresponding ID in the data is incremented by 1, and the weight in the corresponding ID in the weights data is incremented by 1. According to the user ID and the table ID, the interface is called to change the corresponding weights data in the database. The user IDs below can be selected as needed.

[0094] 7.3 When the mouse clicks on a table column filter field, add a tracking function. Use the addEventListener method (used to add a listener event to a specified element) to listen for whether the table column field is filtered. After confirming that it is filtered and left, get the ID of the currently filtered column, increment the weight in the corresponding ID in the data data by 1, increment the weight in the corresponding ID in the weights data by 1, and call the interface according to (user ID and) table ID to change the corresponding weights data in the database.

[0095] 8. Set a timer on the page. After the specified time is reached, a "One-Click Sort" prompt will pop up in the lower right corner of the page. After confirming "One-Click Sort", use a sorting algorithm to traverse the data, arrange the table columns in descending order according to the weight values, and then re-render the page.

[0096] As can be seen, the embodiments of this application can intuitively solve the problem of not being able to quickly find and locate the header fields of interest to users when there are too many horizontal scroll bars in a table, and can provide personalized header field display for different users; intuitively solve the problem of knowing the content of the header fields at the scroll position before scrolling on the table page; intuitively solve the problem of quickly finding and locating the position of required fields in table editing mode; and provide an efficient method for one-click personalized configuration of tables. For users, in the table browsing state, users can quickly identify and jump to the position of frequently used header fields through a personalized scroll bar heatmap formed based on browsing behavior; in the table editing state, users can quickly locate the required fields of the system through personalized scroll bar color blocks formed based on permission differences; users can quickly identify and jump to the header fields before and after the current position by hovering at any position on the scroll bar; and users can personalize the header fields through the one-click arrangement function.

[0097] Please see Figure 10 The second aspect of this application provides some specific embodiments of a table field lookup system, the system including: a processing unit 1001 and a display unit 1002;

[0098] The processing unit 1001 is used to set scroll bars of target size for the header row and / or header column of the target table;

[0099] The processing unit 1001 is also used to determine the color block assigned to each header field based on the weight data corresponding to each header field in the target table, and to bind a display event to each color block;

[0100] The display unit 1002 is used to render a heat map composed of various color blocks at the scroll bar, so that when any color block is hit, a display event is called to display the corresponding header field of the color block in the visible area of ​​the browser window.

[0101] Optionally, the processing unit 1001 is specifically used for:

[0102] Select the target number of colors to be included; the target number is determined based on the number of weighted data.

[0103] Establish a one-to-one mapping relationship between each selected color and each weight data to determine the constituent color of the color block corresponding to each header field in the browsing state.

[0104] Optionally, the processing unit 1001 is further configured to:

[0105] Bind a hit event to each header field so that the weight data of the header field is increased every time it is hit.

[0106] The hit events include clicking on a header field, clicking on the color block corresponding to a header field, or the header field being the filtered field.

[0107] Optionally, the processing unit 1001 is further configured to:

[0108] Based on the comparison results between the weighted data, the header field with the larger weight among the weighted data is designated as the high-frequency field;

[0109] The content of high-frequency fields is arranged before that of low-frequency fields; the content includes the specific values ​​and color blocks corresponding to the header fields.

[0110] Optionally, the processing unit 1001 is further configured to:

[0111] Distinguish between required and optional fields in each table header field;

[0112] Assign two different colors to the color blocks corresponding to required and non-required fields, so that each color block reflects whether the corresponding header field is required in edit mode.

[0113] Optionally, the processing unit 1001 is further configured to:

[0114] Bind a prompt event to each color block so that an information pop-up appears when any color block is hit for a preset time; the information pop-up displays at least the header field information corresponding to the color block.

[0115] Optionally, the processing unit 1001 is further configured to:

[0116] Weight data and user identifiers are bound together so that different heatmaps are displayed synchronously when the target table is viewed by different users; the heatmaps for different users are rendered synchronously based on the weight data corresponding to the user identifier.

[0117] In this embodiment, the operations performed by each unit of the table field lookup system are similar to those described in the first aspect or any specific method embodiment of the first aspect, and will not be repeated here. Of course, the specific implementation process of each operation in the first aspect of this application can also be found in the relevant description of the second aspect.

[0118] Please see Figure 11 The electronic device 110 in this application embodiment may include one or more central processing units (CPUs) 111 and a memory 115, wherein the memory 115 stores one or more applications or data.

[0119] The memory 115 can be volatile or persistent storage. The program stored in the memory 115 can include one or more modules, each module including a series of instruction operations on the electronic device. Furthermore, the central processing unit 111 can be configured to communicate with the memory 115 and execute the series of instruction operations stored in the memory 115 on the electronic device 110.

[0120] Electronic device 110 may also include one or more power supplies 112, one or more wired or wireless network interfaces 113, one or more input / output interfaces 114, and / or one or more operating systems, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.

[0121] The central processing unit 111 can perform the operations performed by the first aspect or any specific method embodiment of the first aspect, which will not be described in detail here.

[0122] This application provides a computer-readable storage medium including instructions that, when executed on a computer, cause the computer to perform the method as described in the first aspect or any specific implementation thereof.

[0123] This application provides a computer program product containing instructions or computer programs, which, when run on a computer, causes the computer to perform the method described in the first aspect or any specific implementation thereof.

[0124] It is understood that, in the various embodiments of this application, the sequence number of each step does not imply the order of execution. The execution order of each step should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application. The operations added or refined to the above-described methods, systems, or devices (if any) may not necessarily be executed in specific implementations. If more than two operations are added, these operations can be implemented in combination or individually, depending on the actual scenario.

[0125] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the system (if it exists) and device described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0126] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system or apparatus, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0127] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0128] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0129] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product (computer program product) is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, a business server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

Claims

1. A method for searching a table field, characterized in that, include: Set scrollbars for the target table's header row and / or header columns to the target size; Based on the weight data corresponding to each header field in the target table, determine the color block assigned to each header field, and bind a display event to each color block; A heatmap composed of the color blocks is rendered at the scroll bar so that when any color block is hit, the display event is called to display the header field corresponding to the color block in the visible area of ​​the browser window. Each of the header fields is bound to a hit event, so that the weight data corresponding to the header field is increased each time the header field is hit; wherein, the hit event includes the header field being clicked, or the color block corresponding to the header field being clicked, or the header field being a filtered field.

2. The method according to claim 1, characterized in that, The step of determining the color block assigned to each header field based on the weight data corresponding to each header field in the target table includes: Select a target number of colors to be included, wherein the target number is determined based on the number of weighted data; Establish a one-to-one mapping relationship between each of the selected colors and each of the weight data to determine the constituent colors of the color blocks corresponding to each of the header fields in the browsing state.

3. The method according to claim 1, characterized in that, The method further includes: Based on the comparison results between the weighted data, the header field with the larger weighted data among the weighted data is taken as the high-frequency field; The content of the high-frequency fields is arranged before the content of the low-frequency fields; the content includes the specific values ​​and color blocks corresponding to the header fields respectively.

4. The method according to claim 1, characterized in that, The method further includes: Distinguish between required and optional fields in each of the table header fields; Two different colors are assigned to the color blocks corresponding to the required fields and the non-required fields, so that each color block reflects whether the corresponding header field is a required field in the edit state.

5. The method according to claim 1, characterized in that, The method further includes: A prompt event is bound to each of the color blocks so that an information pop-up appears when any of the color blocks is hit for a preset time; the information pop-up displays at least the header field information corresponding to the color block.

6. The method according to any one of claims 1 to 5, characterized in that, The method further includes: The weight data and user identifiers are bound together so that different heatmaps are displayed synchronously when the target table is viewed by different users; wherein, the heatmaps for different users are rendered synchronously based on the weight data corresponding to the user identifier.

7. A table field search system, characterized in that, include: Processing unit and display unit; The processing unit is used to set scroll bars of a target size for the header row and / or header column of the target table; The processing unit is further configured to determine the color block assigned to each header field based on the weight data corresponding to each header field in the target table, and to bind a display event to each color block; The display unit is used to render a heat map composed of the color blocks at the scroll bar, so that when any color block is hit, the display event is called to display the header field corresponding to the color block in the visible area of ​​the browser window; The processing unit is further configured to bind a hit event to each of the header fields, so that the weight data corresponding to the header field is increased each time the header field is hit; wherein the hit event includes the header field being clicked, or the color block corresponding to the header field being clicked, or the header field being a filtered field.

8. An electronic device, characterized in that, include: Central processing unit, memory, and input / output interfaces; The memory is either a short-term storage memory or a persistent storage memory; The central processing unit is configured to communicate with the memory and execute instructions in the memory to perform the method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, Includes instructions that, when executed on a computer, cause the computer to perform the method as described in any one of claims 1 to 6.

10. A computer program product having a computer program stored thereon, characterized in that, When the computer program is executed by a computer device, it is used to perform the method according to any one of claims 1 to 6.

Images