A method for efficiently updating multiple column values of a table based on BootstrapTable

Abstract

This invention provides a method for efficiently updating multiple columns of values ​​in a table based on Bootstrap Table. The method includes: traversing the table data to be updated and the old table data; matching the unique ID of each row of table data with the row ID of the old table data; if a match is found; comparing the values ​​corresponding to the column attribute names of this row of table data with those of the old table data; if they do not match, setting the update flag of this column attribute in the data to be updated to True; if they match, setting the update flag of this column data in the data to be updated to False; if all the column data to be updated in this row of data matches the old table data, then deleting this row of data from the data to be updated. This invention offers high page rendering efficiency and good real-time performance when refreshing multiple columns of table data, increasing product usability and enhancing competitiveness among competitors.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method for efficiently updating multiple columns of values ​​in a table based on Bootstrap Table. Background Technology

[0002] In current front-end development, the Bootstrap Table component can be used to generate various tables to display different data. How do you handle situations where certain columns of data in the table need to be updated? The existing Bootstrap Table primarily provides the following methods:

[0003] 1. Refresh the table, request the total data from the table again, and regenerate the table.

[0004] 2. Update the data for that row in the total table data based on the ID of each row of table data, and then regenerate the table.

[0005] 3. Update the data in the corresponding row of the table based on the index position of each row, and then regenerate the table.

[0006] 4. Update the data in certain columns of the current row in the total table data based on the index position and column attribute values ​​of each row, and then regenerate the table.

[0007] The above methods all have in common that they first update a few rows of data in the total table data, and then regenerate the table based on the latest total table data.

[0008] However, the drawbacks include the fact that even if you only want to update the data in a few columns of a table, you actually have to re-render the entire table, which is wasteful and causes the table to be regenerated, resulting in table reflow, which reduces the page rendering speed and is inefficient. Summary of the Invention

[0009] In view of this, in order to solve the inefficiency caused by regenerating the table, the purpose of this invention is to propose an improved method for efficiently updating multiple column values ​​of a table based on Bootstrap Table. When the updated data of a table column is obtained, it is first compared with the old data in the table to identify the data to be updated, thus narrowing down the range of data to be updated and improving performance. Instead of regenerating the table, only a few columns of data in each row of the table are updated (by using JavaScript to obtain the DOM object of each row of the table and modifying the property values ​​of a few columns of data in the DOM object), which causes the table to be redrawn, resulting in high efficiency.

[0010] To achieve the above objectives, this invention provides a method for efficiently updating multiple columns of values ​​in a table based on Bootstrap Table, wherein the method includes the following steps:

[0011] Step 1: Iterate through the table data to be updated and the old table data, and match the unique ID of each row of table data with the row ID of the old table data. Once a match is found;

[0012] Step 2: Compare the values ​​corresponding to the column attribute names in this row of the table with the old data in the table. If they are inconsistent, set the update flag of this column attribute in the data to be updated to True; if they are consistent, set the update flag of this column data in the data to be updated to False.

[0013] Step 3: If the data in the column to be updated in this row is consistent with the old data in the table, then delete this row of data from the data to be updated.

[0014] As a further aspect of the present invention, if there is a discrepancy, an update is required, and the old data in this column of the table is updated accordingly; if there is a discrepancy, no update is required.

[0015] As a further aspect of the present invention, when the old table columns are updated, the data in the BootStrap Table column selection dropdown box is updated synchronously.

[0016] As a further aspect of the present invention, the method for efficiently updating multiple column values ​​of a table based on Bootstrap Table obtains the minimum range of table data to be updated (UpdateArr) and simultaneously updates the old data of the table.

[0017] As a further aspect of the present invention, the method for efficiently updating multiple column values ​​of a table based on Bootstrap Table redraws the column selection dropdown data of the table.

[0018] As a further aspect of the present invention, the UpdateArr obtained in step 1 is processed, including traversing the UpdateArr array and the column object array of the Bootstrap Table, matching the column attribute names in the UpdateArr data with the column attribute names in the column data objects, and determining whether a custom Formatter formatting function has been defined after a match is found.

[0019] As a further aspect of the present invention, the column object array stores the column attribute name of each column and the formatter function of each column's data during Bootstrap Table initialization.

[0020] As a further aspect of the present invention, it is determined whether a custom Formatter formatting function has been defined. If a Formatter formatting function has been defined, the Formatter formatting function will be used to format the column value Value in the UpdateArr array, update the column value Value to the formatted value, and convert the UpdateArr array into a FormatterUpdateArr array.

[0021] As a further aspect of the present invention, the column attribute names in the UpdateArr data are matched with the column attribute names in the column data object. After a match is found, the method further includes determining whether the visible property in the column data object is true. If it is true, the attribute name Field value of this column is stored in the visibleArr array. The column attribute names in the visibleArr array are the column attribute names of the table columns displayed on the page, and their positions correspond one-to-one.

[0022] As a further aspect of the present invention, step 2 further includes: traversing the visibleArr array and the FormatterUpdateArr array, matching the column attribute names in the visibleArr array with the column attribute names in the FormatterUpdateArr array, and updating the Index value of the data column in the FormatterUpdateArr array to the index value of the data in the visibleArr array after a match is found. The Index value is the actual position of the column of data displayed in the page table.

[0023] As a further aspect of the present invention, in step 3, the array of row data Dom objects trDomArr of the page table is obtained. The arrays trDomArr and FormatterUpdateArr are traversed. The unique ID of the object in the trDomArr array is obtained through "date-uniqueid" and matched with the ID in the FormatterUpdateArr array. If the match is found, the row data Dom object to be updated is determined. It is determined whether the Flag value of the FormatterUpdateArr array object is True. If it is True, the value of the column index Index of this row data Dom object is updated to Value according to the Index value and Value value of the FormatterUpdateArr array object. This will trigger the browser to automatically redraw the data of this column of the table.

[0024] In another aspect, the present invention provides a computer-readable storage medium storing computer program instructions that, when executed, implement the method for efficiently updating multiple column values ​​of a table based on the Bootstrap Table according to any of the preceding claims.

[0025] In another aspect, the present invention provides a computer device including a memory and a processor, wherein the memory stores a computer program that, when executed by the processor, performs any of the above-described methods for efficiently updating multiple column values ​​of a table based on a Bootstrap Table according to the present invention.

[0026] This invention offers at least the following beneficial technical effects: It proposes a method for efficiently updating multiple columns of a table based on the BOOTSTRAP TABLE implementation. By pre-processing the data to be updated, comparing the old and new data, it identifies the minimum range of data to be updated and updates the table data to a minimum extent. Instead of updating the entire table, it updates the data in the corresponding columns of the row DOM objects sequentially based on the data processed in step 1, causing the table to be redrawn. This avoids table backflow, increases the speed of page table rendering, and improves the real-time performance and usability of the page. This invention demonstrates high page rendering efficiency and good real-time performance when refreshing multiple columns of table data, increasing product usability and enhancing its competitiveness among competitors. Attached Figure Description

[0027] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other embodiments can be obtained based on these drawings without creative effort.

[0028] In the diagram:

[0029] Figure 1 A flowchart is shown below illustrating a method for efficiently updating multiple column values ​​in a table based on Bootstrap Table according to the present invention;

[0030] Figure 2 A data structure diagram of the table columns to be updated is shown in the method for efficiently updating multiple column values ​​of a table based on Bootstrap Table according to the present invention.

[0031] Figure 3 A schematic diagram of an embodiment of a computer-readable storage medium for implementing an efficient method for updating multiple column values ​​of a table based on a Bootstrap Table, according to the present invention, is shown.

[0032] Figure 4 A schematic diagram of the hardware structure of an embodiment of a computer device for implementing an efficient method for updating multiple column values ​​of a table based on a Bootstrap Table, according to the present invention, is shown. Detailed Implementation

[0033] To make the objectives, technical solutions, and advantages of the present invention clearer, the embodiments of the present invention will be further described in detail below with reference to specific examples and the accompanying drawings.

[0034] It should be noted that all uses of "first" and "second" in the embodiments of the present invention are for the purpose of distinguishing two different entities or different parameters with the same name. Therefore, "first" and "second" are merely for convenience of expression and should not be construed as limiting the embodiments of the present invention. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion, such as other steps or units inherent in a process, method, system, product, or device that includes a series of steps or units.

[0035] Simply put, in current front-end development, the existing Bootstrap Table only intends to update the data in a few columns of the table, but in reality, it re-renders the entire table data, resulting in waste and table regeneration, causing table reflow, which reduces page rendering speed and efficiency.

[0036] To address the inefficiency caused by regenerating tables, this invention proposes an improved method for efficiently updating multiple columns of a table based on Bootstrap Table. When the updated data for a table column is obtained, it is first compared with the old data in the table to identify the data to be updated, thus narrowing down the range of data to be updated and improving performance. Instead of regenerating the table, only a few columns of data in each row are updated (using JavaScript to obtain the DOM object of each row and modify the attribute values ​​of a few columns of data in the DOM object), resulting in a table redraw, which is highly efficient.

[0037] Therefore, in a first aspect, the present invention provides a method for efficiently updating multiple column values ​​of a table based on Bootstrap Table. Figure 1 A flowchart illustrating an efficient method for updating multiple column values ​​in a table based on Bootstrap Table, according to the present invention, is shown. Figure 1 In the illustrated embodiment, the method includes the following steps:

[0038] Step 1: Iterate through the table data to be updated and the old table data, and match the unique ID of each row of table data with the row ID of the old table data. Once a match is found;

[0039] Step 2: Compare the values ​​corresponding to the column attribute names in this row of the table with the old data in the table. If they are inconsistent, set the update flag of this column attribute in the data to be updated to True; if they are consistent, set the update flag of this column data in the data to be updated to False.

[0040] Step 3: If the data in the column to be updated in this row is consistent with the old data in the table, then delete this row of data from the data to be updated.

[0041] The data structure of the table columns to be updated is as follows: Figure 2 As shown. In this embodiment, if there is a discrepancy, an update is required, and the old data in this column of the table will be updated accordingly; if there is a discrepancy, no update is required.

[0042] In this embodiment, when the old table columns are updated, the BootStrap Table column selection dropdown list data is updated synchronously.

[0043] In this embodiment, the method for efficiently updating multiple column values ​​of a table based on Bootstrap Table obtains the smallest range of table data to be updated (UpdateArr) and synchronously updates the old data of the table.

[0044] In this embodiment, the method for efficiently updating multiple column values ​​of a table based on Bootstrap Table redraws the column selection dropdown data of the table.

[0045] In this embodiment, the UpdateArr obtained in step 1 is processed, including traversing the UpdateArr array and the column object array of the Bootstrap Table, matching the column attribute names in the UpdateArr data with the column attribute names in the column data objects, and determining whether a custom Formatter formatting function has been defined after a match is found.

[0046] In this embodiment, the column object array stores the column attribute names of each column and the formatter formatting function for each column's data during Bootstrap Table initialization.

[0047] In this embodiment, it is determined whether a custom Formatter formatting function has been defined. If a Formatter formatting function has been defined, the Formatter formatting function will be used to format the column value Value in the UpdateArr array, update the column value Value to the formatted value, and convert the UpdateArr array into a FormatterUpdateArr array.

[0048] In this embodiment, the column attribute names in the UpdateArr data are matched with the column attribute names in the column data object. After a match is found, it is further determined whether the visible property in the column data object is true. If it is true, the attribute name Field value of this column is stored in the visibleArr array. The column attribute names in the visibleArr array are the column attribute names of the table columns displayed on the page, and their positions correspond one-to-one.

[0049] In this embodiment, step 2 further includes: traversing the visibleArr array and the FormatterUpdateArr array, matching the column attribute names in the visibleArr array with the column attribute names in the FormatterUpdateArr array, and updating the Index value of the data column in the FormatterUpdateArr array to the index value of the data in the visibleArr array after a match is found. The Index value is the actual position of the column of data displayed in the page table.

[0050] In this embodiment, in step 3, the array of row data DOM objects trDomArr of the page table is obtained. The arrays trDomArr and FormatterUpdateArr are traversed. The unique ID of the object in the trDomArr array is obtained through "date-uniqueid" and matched with the ID in the FormatterUpdateArr array. If the match is found, the row data DOM object to be updated is determined. It is determined whether the Flag value of the FormatterUpdateArr array object is True. If it is True, the value of column index Index of this row data DOM object is updated to Value according to the Index value and Value value of the FormatterUpdateArr array object. This will trigger the browser to automatically redraw the data of this column of the table.

[0051] In this embodiment of the invention, after the above steps 1 to 3, the minimum range of table data to be updated, UpdateArr, is finally obtained and the old data of the table is updated synchronously, that is, the column selection drop-down box data of the table is redrawn.

[0052] The UpdateArr obtained in step 1 is processed, including:

[0053] (1) Iterate through the UpdateArr array and the Bootstrap Table's column object array (which stores the column attribute names (Field values) of each column during Bootstrap Table initialization and the Formatter formatting function for each column's data). Match the column attribute names (Field values) in the UpdateArr data with the column attribute names (Field values) in the column data objects. If a match is found:

[0054] Determine if a custom Formatter function has been defined (e.g., when the returned data is 0, 1, the formatter function can translate 0 to "allow" and 1 to "deny"). If a Formatter function has been defined, then the Formatter function will be used to format the column value Value in the UpdateArr array, updating the column value Value to the formatted value, thereby converting the UpdateArr array into a FormatterUpdateArr array.

[0055] Check if the visible property of the column's data object is true (when rendering the table, it determines whether the column is displayed; true indicates it is displayed, false indicates it is hidden; hidden columns can be selected from the column selection dropdown). If it is true, then store the column's attribute name and Field value into the visibleArr array. The column attribute names in the visibleArr array are the same as the column attribute names of the table columns displayed on the page, and their positions correspond one-to-one.

[0056] (2) Iterate through the visibleArr array and the FormatterUpdateArr array, and match the column attribute names (Field values) in the visibleArr array with the column attribute names (Field values) in the FormatterUpdateArr array. After a match is found, update the Index value of the data column in the FormatterUpdateArr array to the index value of the data in the visibleArr array. The Index value is the actual position of the column of data displayed in the table on the page.

[0057] (3) Obtain the array of Dom objects for the row data of the page table, trDomArr. Iterate through the arrays trDomArr and FormatterUpdateArr. The unique ID of the object in the trDomArr array is obtained through "date-uniqueid". It is matched with the ID in the FormatterUpdateArr array. If the match is found, the row data Dom object to be updated is determined. It is determined whether the Flag value of the FormatterUpdateArr array object is True. If it is True, the column index of the row data Dom object is updated to Value based on the Index value and Value value of the FormatterUpdateArr array object. This will trigger the browser to automatically redraw the data of this column of the table.

[0058] In this invention, the table data to be updated is pre-processed by comparing the new and old data to find the minimum range of data to be updated and updating the table data to the minimum extent.

[0059] This invention does not update the table data as a whole. Instead, it updates the data of the corresponding columns of the row DOM objects of the table sequentially based on the data processed in step 1, causing the table to be redrawn. This avoids table reflow, increases the speed of page table rendering, and improves the real-time performance and usability of the page.

[0060] This invention can not only improve the efficiency of updating multiple column values ​​in the Bootstrap Table component, but also improve the efficiency of updating multiple column values ​​in other table components.

[0061] A second aspect of the present invention also provides a computer-readable storage medium. Figure 3 A schematic diagram of a computer-readable storage medium illustrating an efficient method for updating multiple column values ​​of a table based on a Bootstrap Table, according to an embodiment of the present invention, is shown. Figure 3 As shown, the computer-readable storage medium 300 stores computer program instructions 310, which can be executed by a processor. When executed, the computer program instructions 310 implement the method of any of the above embodiments, the method comprising the following steps:

[0062] Step 1: Iterate through the table data to be updated and the old table data, and match the unique ID of each row of table data with the row ID of the old table data. Once a match is found;

[0063] Step 2: Compare the values ​​corresponding to the column attribute names in this row of the table with the old data in the table. If they are inconsistent, set the update flag of this column attribute in the data to be updated to True; if they are consistent, set the update flag of this column data in the data to be updated to False.

[0064] Step 3: If the data in the column to be updated in this row is consistent with the old data in the table, then delete this row of data from the data to be updated.

[0065] In this embodiment, if there is a discrepancy, an update is required, and the old data in this column of the table will be updated accordingly. If there is a discrepancy, no update is required.

[0066] In this embodiment, when the old table columns are updated, the BootStrap Table column selection dropdown list data is updated synchronously.

[0067] In this embodiment, the method for efficiently updating multiple column values ​​of a table based on Bootstrap Table obtains the smallest range of table data to be updated (UpdateArr) and synchronously updates the old data of the table.

[0068] In this embodiment, the method for efficiently updating multiple column values ​​of a table based on Bootstrap Table redraws the column selection dropdown data of the table.

[0069] In this embodiment, the UpdateArr obtained in step 1 is processed, including traversing the UpdateArr array and the column object array of the Bootstrap Table, matching the column attribute names in the UpdateArr data with the column attribute names in the column data objects, and determining whether a custom Formatter formatting function has been defined after a match is found.

[0070] In this embodiment, the column object array stores the column attribute names of each column and the formatter formatting function for each column's data during Bootstrap Table initialization.

[0071] In this embodiment, it is determined whether a custom Formatter formatting function has been defined. If a Formatter formatting function has been defined, the Formatter formatting function will be used to format the column value Value in the UpdateArr array, update the column value Value to the formatted value, and convert the UpdateArr array into a FormatterUpdateArr array.

[0072] In this embodiment, the column attribute names in the UpdateArr data are matched with the column attribute names in the column data object. After a match is found, it is further determined whether the visible property in the column data object is true. If it is true, the attribute name Field value of this column is stored in the visibleArr array. The column attribute names in the visibleArr array are the column attribute names of the table columns displayed on the page, and their positions correspond one-to-one.

[0073] In this embodiment, step 2 further includes: traversing the visibleArr array and the FormatterUpdateArr array, matching the column attribute names in the visibleArr array with the column attribute names in the FormatterUpdateArr array, and updating the Index value of the data column in the FormatterUpdateArr array to the index value of the data in the visibleArr array after a match is found. The Index value is the actual position of the column of data displayed in the page table.

[0074] In this embodiment, in step 3, the array of row data DOM objects trDomArr of the page table is obtained. The arrays trDomArr and FormatterUpdateArr are traversed. The unique ID of the object in the trDomArr array is obtained through "date-uniqueid" and matched with the ID in the FormatterUpdateArr array. If the match is found, the row data DOM object to be updated is determined. It is determined whether the Flag value of the FormatterUpdateArr array object is True. If it is True, the value of column index Index of this row data DOM object is updated to Value according to the Index value and Value value of the FormatterUpdateArr array object. This will trigger the browser to automatically redraw the data of this column of the table.

[0075] It should be understood that, where there is no conflict, all the embodiments, features and advantages described above for the method of efficiently updating multiple column values ​​of a table based on the Bootstrap Table according to the present invention are equally applicable to the system and storage medium for efficiently updating multiple column values ​​of a table based on the Bootstrap Table according to the present invention.

[0076] A fourth aspect of the present invention also provides a computer device 400, including a memory 420 and a processor 410. The memory stores a computer program, which, when executed by the processor, implements the method of any of the above embodiments. The method includes the following steps:

[0077] Step 1: Iterate through the table data to be updated and the old table data, and match the unique ID of each row of table data with the row ID of the old table data. Once a match is found;

[0078] Step 2: Compare the values ​​corresponding to the column attribute names in this row of the table with the old data in the table. If they are inconsistent, set the update flag of this column attribute in the data to be updated to True; if they are consistent, set the update flag of this column data in the data to be updated to False.

[0079] Step 3: If the data in the column to be updated in this row is consistent with the old data in the table, then delete this row of data from the data to be updated.

[0080] In this embodiment, if there is a discrepancy, an update is required, and the old data in this column of the table will be updated accordingly. If there is a discrepancy, no update is required.

[0081] In this embodiment, when the old table columns are updated, the BootStrap Table column selection dropdown list data is updated synchronously.

[0082] In this embodiment, the method for efficiently updating multiple column values ​​of a table based on Bootstrap Table obtains the smallest range of table data to be updated (UpdateArr) and synchronously updates the old data of the table.

[0083] In this embodiment, the method for efficiently updating multiple column values ​​of a table based on Bootstrap Table redraws the column selection dropdown data of the table.

[0084] In this embodiment, the UpdateArr obtained in step 1 is processed, including traversing the UpdateArr array and the column object array of the Bootstrap Table, matching the column attribute names in the UpdateArr data with the column attribute names in the column data objects, and determining whether a custom Formatter formatting function has been defined after a match is found.

[0085] In this embodiment, the column object array stores the column attribute names of each column and the formatter formatting function for each column's data during Bootstrap Table initialization.

[0086] In this embodiment, it is determined whether a custom Formatter formatting function has been defined. If a Formatter formatting function has been defined, the Formatter formatting function will be used to format the column value Value in the UpdateArr array, update the column value Value to the formatted value, and convert the UpdateArr array into a FormatterUpdateArr array.

[0087] In this embodiment, the column attribute names in the UpdateArr data are matched with the column attribute names in the column data object. After a match is found, it is further determined whether the visible property in the column data object is true. If it is true, the attribute name Field value of this column is stored in the visibleArr array. The column attribute names in the visibleArr array are the column attribute names of the table columns displayed on the page, and their positions correspond one-to-one.

[0088] In this embodiment, step 2 further includes: traversing the visibleArr array and the FormatterUpdateArr array, matching the column attribute names in the visibleArr array with the column attribute names in the FormatterUpdateArr array, and updating the Index value of the data column in the FormatterUpdateArr array to the index value of the data in the visibleArr array after a match is found. The Index value is the actual position of the column of data displayed in the page table.

[0089] In this embodiment, in step 3, the array of row data DOM objects trDomArr of the page table is obtained. The arrays trDomArr and FormatterUpdateArr are traversed. The unique ID of the object in the trDomArr array is obtained through "date-uniqueid" and matched with the ID in the FormatterUpdateArr array. If the match is found, the row data DOM object to be updated is determined. It is determined whether the Flag value of the FormatterUpdateArr array object is True. If it is True, the value of column index Index of this row data DOM object is updated to Value according to the Index value and Value value of the FormatterUpdateArr array object. This will trigger the browser to automatically redraw the data of this column of the table.

[0090] like Figure 4 The diagram shown is a hardware structure schematic of an embodiment of a computer device for executing a method for efficiently updating multiple column values ​​of a table based on a Bootstrap Table, as provided by the present invention. Figure 4Taking the computer device 400 shown as an example, this computer device includes a processor 410 and a memory 420, and may also include an input device 430 and an output device 440. The processor 410, memory 420, input device 430, and output device 440 can be connected via a bus or other means. Figure 4 Taking a bus connection as an example, input device 430 can receive input digital or character information, as well as generate signal inputs related to the efficient updating of multiple column values ​​in a table based on Bootstrap Table. Output device 440 may include a display device such as a screen.

[0091] Memory 420, as a non-volatile computer-readable storage medium, can be used to store non-volatile software programs, non-volatile computer-executable programs, and modules, such as the program instructions / modules corresponding to the resource monitoring method in this embodiment. Memory 420 may include a program storage area and a data storage area, wherein the program storage area may store the operating system and application programs required for at least one function; the data storage area may store data created by the use of the resource monitoring method, etc. In addition, memory 420 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other non-volatile solid-state storage device. In some embodiments, memory 420 may optionally include memory remotely located relative to processor 410, and these remote memories can be connected to the local module via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0092] The processor 410 executes various server functions and data processing by running non-volatile software programs, instructions, and modules stored in the memory 420, thereby implementing the resource monitoring method of the above method embodiment.

[0093] Those skilled in the art will also understand that the various exemplary logic blocks, modules, circuits, and algorithm steps described in conjunction with the disclosure herein can be implemented as electronic hardware, computer software, or a combination of both. To clearly illustrate this interchangeability between hardware and software, the functionality of various illustrative components, blocks, modules, circuits, and steps has been generally described. Whether this functionality is implemented as software or as hardware depends on the specific application and the design constraints imposed on the system as a whole. Those skilled in the art can implement the functionality in various ways for each specific application, but such implementation decisions should not be construed as departing from the scope of the embodiments disclosed herein.

[0094] Finally, it should be noted that the computer-readable storage medium (e.g., memory) described herein can be volatile memory or non-volatile memory, or may include both volatile and non-volatile memory. By way of example, and not limitation, non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM), which can act as external cache memory. By way of example, and not limitation, RAM can be obtained in various forms, such as synchronous RAM (DRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), and direct Rambus RAM (DRRAM). The storage devices disclosed herein are intended to include, but are not limited to, these and other suitable types of memory.

[0095] The various exemplary logic blocks, modules, and circuits described herein can be implemented or performed using the following components designed to perform the functions herein: general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs) or other programmable logic devices, discrete gate or transistor logic, discrete hardware components, or any combination of these components. A general-purpose processor may be a microprocessor, but alternatively, the processor may be any conventional processor, controller, microcontroller, or state machine. The processor may also be implemented as a combination of computing devices, such as a combination of a DSP and a microprocessor, multiple microprocessors, one or more microprocessors combined with a DSP, and / or any other such configuration.

[0096] The above are exemplary embodiments disclosed in this invention. However, it should be noted that various changes and modifications can be made without departing from the scope of the embodiments of this invention as defined by the claims. The functions, steps, and / or actions of the methods according to the disclosed embodiments described herein do not need to be performed in any particular order. Furthermore, although the elements disclosed in the embodiments of this invention may be described or claimed individually, they may be understood as multiple unless explicitly limited to a singular number.

[0097] It should be understood that, as used herein, the singular form "a" is intended to include the plural form as well, unless the context clearly supports an exception. It should also be understood that, as used herein, "and / or" refers to any and all possible combinations of one or more of the associatedly listed items. The embodiment numbers disclosed above are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0098] Those skilled in the art should understand that the discussion of any of the above embodiments is merely exemplary and is not intended to imply that the scope of the invention (including the claims) is limited to these examples. Within the framework of the invention, technical features of the above embodiments or different embodiments can be combined, and many other variations of different aspects of the invention exist, which are not provided in the details for the sake of brevity. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the invention should be included within the protection scope of the invention.

Claims

1. A method for efficiently updating multiple columns of values ​​in a table based on Bootstrap Table, characterized in that, Includes the following steps: Step 1) Iterate through the table data to be updated and the old table data, and match the unique ID of each row of table data with the row ID of the old table data. Once a match is found; Step 2) Compare the values ​​corresponding to the column attribute names in this row of the table with the old data in the table. If they are inconsistent, set the update flag of this column attribute in the data to be updated to True; if they are consistent, set the update flag of this column data in the data to be updated to False. Step 3) If the data in the column to be updated in this row is consistent with the old data in the table, then delete this row of data from the data to be updated. The UpdateArr obtained in step 1) is processed, including iterating through the UpdateArr array and the BootstrapTable column object array, matching the column attribute names in the UpdateArr data with the column attribute names in the column data objects. If a match is found, it is determined whether a custom Formatter formatting function is defined. If a Formatter formatting function is defined, it is used to format the column value Value in the UpdateArr array, updating the column value Value to the formatted value, and converting the UpdateArr array into a FormatterUpdateArr array. After a match is found, it also includes determining whether the visible property in the column data object is true. If it is true, the attribute name Field value of this column is stored in the visibleArr array. The column attribute names in the visibleArr array are the column attribute names of the table columns displayed on the page, and their positions correspond one-to-one. Step 2) also includes: traversing the visibleArr array and the FormatterUpdateArr array, matching the column attribute names in the visibleArr array with the column attribute names in the FormatterUpdateArr array, and updating the Index value of the data column in the FormatterUpdateArr array to the index value of the data in the visibleArr array after a match is found. The Index value is the actual position of the column of data displayed in the table on the page. In step 3), the array of DOM objects for row data of the page table, trDomArr, is obtained. The arrays trDomArr and FormatterUpdateArr are traversed. The unique ID of the object in the trDomArr array is obtained through "date-uniqueid" and matched with the ID in the FormatterUpdateArr array. If a match is found, the row data DOM object to be updated is determined. The Flag value of the FormatterUpdateArr array object is checked to see if it is True. If it is True, the column index of this row data DOM object is updated to Value according to the Index value and Value value of the FormatterUpdateArr array object. This will trigger the browser to automatically redraw the data of this column of the table.

2. The method according to claim 1, characterized in that, If they are inconsistent, an update is needed, and the old data in this column of the table will be updated accordingly. If they are consistent, no update is needed.

3. The method according to claim 2, characterized in that, When an old table column is updated, the data in the Bootstrap Table column selection dropdown list is updated synchronously.

4. The method according to any one of claims 1 to 3, characterized in that, The method for efficiently updating multiple column values ​​in a table based on Bootstrap Table obtains the minimum range of table data to be updated (UpdateArr), and synchronously updates the old data in the table and redraws the column selection dropdown data in the table.

5. The method according to claim 1, characterized in that, The column array stores the column attribute names of each column and the formatter function for each column's data during BootstrapTable initialization.

Images