Data processing method, device and electronic equipment

Abstract

The present invention provides a data processing method, device and electronic device, the data processing method comprising: displaying an elementui list including multiple columns of data on a screen, each column of data including a header name; receiving a first input for a first header name of target column data in the multiple columns of data; in response to the first input, controlling the movement of the target column data based on the first input, and obtaining the first header name and the second header name of the column data corresponding to the termination position in the elementui list, the termination position being the position where the movement of the target column data ends; obtaining a first column identifier corresponding to the first header name and a second column identifier corresponding to the second header name; deleting the target column data corresponding to the first column identifier in the elementui list, and inserting the target column data at the column position indicated by the second column identifier to obtain an updated elementui list; and displaying the updated elementui list. The efficiency of position adjustment for column data in the elementui list is improved.

Description

Technical Field

[0001] The present invention relates to the field of data processing, and in particular to a data processing method, device and electronic equipment. Background Art

[0002] With the development of front-end technology and mainstream browsers, Vue (a progressive framework for building user interfaces) framework has gradually developed. As a component library based on Vue 2.0 for developers, designers and product managers, Element component library has brought great development convenience to developers. Therefore, elementui list built based on Element component library has become the first choice for developers to build page lists.

[0003] For the current ElementUI list, when a user wants to adjust the position of a target column data, the user usually needs to manually delete the target column data and insert the deleted target column data into the desired position to obtain the ElementUI list after the position is adjusted. However, this method of manually adjusting the position of column data by the user is complicated and has low adjustment efficiency. Summary of the invention

[0004] In view of this, the present invention aims to propose a data processing method, device and electronic device to solve the problem of low efficiency in position adjustment of column data in elementui list. To achieve the above purpose, the technical solution of the present invention is implemented as follows:

[0005] In a first aspect, a data processing method is provided, the method comprising:

[0006] Display an elementui list including multiple columns of data on the screen, each column of data including a table header name;

[0007] Receive a first input of a first table header name for target column data among multiple columns of data;

[0008] In response to the first input, the target column data is controlled to move based on the first input, and the first header name and the second header name of the column data corresponding to the end position in the elementui list are obtained, and the end position is the position where the target column data movement ends;

[0009] Obtain a first column identifier corresponding to the first table header name, and a second column identifier corresponding to the second table header name;

[0010] Deleting the target column data corresponding to the first column identifier in the elementui list, and inserting the target column data into the column position indicated by the second column identifier, to obtain an updated elementui list;

[0011] Display the updated elementui list.

[0012] Optionally, deleting the target column data corresponding to the first column identifier in the elementui list, and inserting the target column data at the column position indicated by the second column identifier to obtain an updated elementui list includes:

[0013] In the column array of the elementui list, the target element where the first column identifier is located is deleted, and the target element is inserted at the position corresponding to the second column identifier to obtain an updated column array to complete the update of the elementui list; one element in the column array corresponds to a column of data, and the element includes a header name and a column identifier of a column of data, and the arrangement order of each of the elements is the display order of each column of data in the elementui list;

[0014] The display of the updated elementui list includes: based on the updated column array and the list data of the elementui list, rendering and displaying the updated elementui list, the list data is stored in the form of key-value pairs, the key field of the key-value pair is used to store the column identifier, and the value field of the key-value pair is used to store the data in the column data except the header name.

[0015] Optionally, the obtaining of the first header name and the second header name of the column data corresponding to the termination position in the elementui list includes:

[0016] When it is determined that the termination position is located in the area where the elementui list is located, the first header name and the second header name of the column data corresponding to the termination position in the elementui list are obtained.

[0017] Optionally, the method further includes:

[0018] Obtain the moving distance and movable distance of the target column data, wherein the movable distance is the distance between the moving start position of the target column data and the target edge position of the elementui list, and the target edge position is the edge position pointed to by the moving direction of the target column data in the elementui list;

[0019] When the moving distance is less than the movable distance, it is determined that the termination position is located in the area where the elementui list is located.

[0020] Optionally, the method further includes:

[0021] Receive a second input of a first table header name for target column data in the plurality of columns of data;

[0022] In response to the second input, obtaining a first column identifier corresponding to the first table header name;

[0023] Calculate the total number of characters in each row of data in the column where the target column data corresponding to the first column identifier is located;

[0024] Calculate the first target column width when the maximum number of characters are located in the same row, and adjust the width style value of the column indicated by the first column identifier to the first target column width, wherein the maximum total number of characters is the maximum value of the total number of characters in each row of data;

[0025] Renders and displays the elementui list.

[0026] Optionally, adjusting the width style value of the column indicated by the first column identifier to the first target column width includes:

[0027] When the maximum total number of characters is greater than or equal to the number of characters in the first table header name, adjusting the width style value of the column indicated by the first column identifier to the first target column width;

[0028] When the maximum total number of characters is less than the number of characters of the first header name, and the header width when the first header names are located in the same row is less than the minimum width style value of the column indicated by the first column identifier, adjusting the width style value of the column indicated by the first column identifier to the minimum width style value;

[0029] When the maximum total number of characters is less than the number of characters of the first header name, and the header width when the first header name is located in the same row is greater than the minimum width style value of the column indicated by the first column identifier, the width style value of the column indicated by the first column identifier is adjusted to the width style value of the header where the first header name is located.

[0030] Optionally, the method further includes:

[0031] receiving a third input of a first table header name for target column data among the multiple columns of data;

[0032] In response to the third input, acquiring the first column identifier and displaying a column width setting interface;

[0033] Obtaining a second target column width input in the column width setting interface;

[0034] Adjusting the width style value of the column indicated by the first column identifier to the second target column width;

[0035] Renders and displays the elementui list.

[0036] Optionally, adjusting the width style value of the column indicated by the first column identifier to the second target column width includes:

[0037] The width style attribute of the column indicated by the first column identifier is controlled to be invalid, a new width style attribute is added to the column indicated by the first column identifier, and the new width style attribute is assigned the second target column width.

[0038] In a second aspect, a data processing device is provided, the device comprising:

[0039] Display module, used to display the elementui list including multiple columns of data on the screen, each column of data including a table header name;

[0040] A receiving module, used for receiving a first input of a first table header name for target column data in multiple columns of data;

[0041] a control module, configured to respond to the first input, control the movement of the target column data based on the first input, and obtain the first header name and a second header name of the column data corresponding to the end position in the elementui list, wherein the end position is the position where the movement of the target column data ends;

[0042] An acquisition module, used to acquire a first column identifier corresponding to the first table header name and a second column identifier corresponding to the second table header name;

[0043] An updating module, configured to delete the target column data corresponding to the first column identifier in the elementui list, and insert the target column data into the column position indicated by the second column identifier, so as to obtain an updated elementui list;

[0044] The display module is also used to display the updated elementui list.

[0045] According to a third aspect, an electronic device includes:

[0046] a processor and a memory connected to the processor,

[0047] The memory stores instructions, and the processor is used to implement the data processing method described in any one of claims 1 to 8 when executing the instructions.

[0048] A data transmission system, the system comprising: a client, a proxy server, a network data leakage protection device and a web page management server connected in sequence, and a server side connected to the proxy server, the network data leakage protection device is used for the data processing method provided by the present invention, or the network data leakage protection device is equipped with the message screening device provided by the present invention.

[0049] In summary, a data processing method provided by an embodiment of the present invention can receive a first input for a first header name of a target column data in the multiple columns of data, so that in response to the first input, the target column data is controlled to move based on the first input, and the first header name and the second header name of the column data corresponding to the terminal position of the target column data movement in the elementui list are obtained. By obtaining the first column identifier corresponding to the first header name and the second column identifier corresponding to the second header name, the target column data corresponding to the first column identifier can be deleted from the elementui list, and the target column data can be inserted into the column position indicated by the second column identifier to obtain the updated elementui list and display the updated elementui list. In this technical solution, the user can perform the first input for the first header name of the target column data, thereby adjusting the display position of the target column data to the column position where the column data corresponding to the terminal position is located. Compared with the related art, the operation complexity is reduced and the efficiency of position adjustment for column data in the elementui list is improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] The accompanying drawings constituting a part of the present invention are used to provide a further understanding of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the accompanying drawings:

[0051] Figure 1 It is a flow chart of a data processing method in the related art;

[0052] Figure 2 It is a schematic diagram of an interface for displaying an elementui list provided by an embodiment of the present invention;

[0053] Figure 3 It is another schematic diagram of an interface for displaying an elementui list provided by an embodiment of the present invention;

[0054] Figure 4 is a flow chart of another data processing method provided by an embodiment of the present invention;

[0055] Figure 5 is a flow chart of another data processing method provided by an embodiment of the present invention;

[0056] Figure 6 is a flow chart of another data processing method provided by an embodiment of the present invention;

[0057] Figure 7 It is a block diagram of a data processing device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0058] It should be noted that, in the absence of conflict, the embodiments of the present invention and the features in the embodiments can be combined with each other. The present invention will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0059] Please refer to Figure 1 , which shows a flow chart of a data processing method provided by an embodiment of the present invention. The data processing method can be applied to an electronic device. Optionally, the electronic device can be a terminal, and the terminal can be a mobile phone, a personal computer, a tablet computer or a wearable device. Figure 1 As shown, the method includes:

[0060] Step 101: Display an elementui list including multiple columns of data on the screen, each column of data including a table header name.

[0061] In an embodiment of the present invention, the elementui list includes multiple columns of data, which refers to at least two columns of data. Each column of data includes a header name and body data. For example, a column of data in the elementui list is: gender, female, male, female. Among them, the header name is gender, and the body data is female, male, female.

[0062] Step 102: Receive a first input of a first header name for a target column of data among multiple columns of data.

[0063] In an embodiment of the present invention, if a user wants to adjust the display position of target column data in an elementui list, a first input can be performed for the first header name of the target column data, so that the electronic device receives the first input for the first header name of the target column data, and the purpose of adjusting the display position of the target column data in the elementui list is achieved by performing subsequent steps. The first input for the first header name can be an input in the form of clicking, sliding, etc. for the first header name.

[0064] Optionally, the target column data may be at least one column of data among multiple columns of data. The embodiment of the present invention is described by taking the case where the target column data is one column of data among multiple columns of data as an example.

[0065] Step 103, in response to the first input, control the movement of the target column data based on the first input, and obtain the first header name and the second header name of the column data corresponding to the end position in the elementui list, where the end position is the position where the movement of the target column data ends.

[0066] In an optional implementation, the first input may be a sliding input. The process of the electronic device controlling the movement of the target column data based on the first input may include: the electronic device acquires the sliding direction and sliding distance of the sliding input, and controls the target column data to move along the sliding direction by the sliding distance.

[0067] In another optional implementation, the second input may be two click inputs for the first header name. The process of the electronic device controlling the movement of the target column data based on the first input may include: the electronic device may obtain a target distance between the two click inputs and a target direction from the first click input to the second click input. The target column data is controlled to move the target distance along the target direction.

[0068] In an embodiment of the present invention, the electronic device can obtain the header name of the column data of the column where the target column data movement revelation position is located, the first header name, and the second header name of the column data corresponding to the termination position in the elementui list in response to the first input.

[0069] Optionally, when the target column data's moving end position is within the elementui list's area, the column data corresponding to the end position is the column data displayed in the end position's area. When the target column data's moving end position is outside the elementui list's area, the column data corresponding to the end position may be the last column data pointed to by the moving direction of the target column data in the elementui list.

[0070] Based on this, after the electronic device controls the movement of the target column data based on the first input, the method also includes: determining whether the target column data movement end position is located within the elementui list area. The process of the electronic device obtaining the first header name and the second header name of the column data corresponding to the end position in the elementui list may include: when the target column data movement end position is located within the elementui list area, the column data corresponding to the end position is the column data displayed in the end position area. When the target column data movement end position is outside the elementui list area, the column data corresponding to the end position may be the last column data pointed to by the moving direction of the first input in the elementui list.

[0071] Step 104: Obtain a first column identifier corresponding to the first table header name and a second column identifier corresponding to the second table header name.

[0072] In the first optional case, the column identifier (prop) is used to uniquely identify a column in the elementui list. For the data in the elementui list, the electronic device can store a column array and list data. Among them, the column array includes multiple elements, one element corresponds to a column of data, and the element includes a header name (label) and a column identifier (prop) of a column of data. The arrangement order of each element in the column array is the display order of each column of data in the elementui list. The list data is stored in the form of key-value pairs, the key field of the key-value pair is used to store the column identifier, and the value field of the key-value pair is used to store the data in the column data of the column indicated by the column identifier except the header name, that is, the value field of the key-value pair is used to store the body data of the column data of the column indicated by the column identifier.

[0073] Based on this, the process of the electronic device obtaining the first column identifier corresponding to the first header name and the second column identifier corresponding to the second header name may include: the electronic device may traverse each element in the column array, search for the first target element including the first header name and the second target element including the second header name. The column identifier in the first target element is used as the first column identifier, and the column identifier in the second target element is used as the second column identifier.

[0074] In the second optional case, for the data of the elementui list, the electronic device can store a list data array. The list data array includes multiple elements. One element corresponds to a column of data. And the element includes a header name and a sub-array of a column of data. The sub-array includes multiple elements, each of which stores a key-value pair. The key field of the key-value pair is used to store the column identifier corresponding to the header name, and the value field of the key-value pair is used to store the data other than the header name in the column data of the column indicated by the column identifier.

[0075] Based on this, the process of the electronic device obtaining the first column identifier corresponding to the first header name and the second column identifier corresponding to the second header name may include: the electronic device may traverse each element in the list data array, search for the first target element including the first header name and the second target element including the second header name. The column identifier in the subarray of the first target element is used as the first column identifier, and the column identifier in the subarray of the second target element is used as the second column identifier.

[0076] Step 105: Delete the target column data corresponding to the first column identifier in the elementui list, and insert the target column data into the column position indicated by the second column identifier to obtain an updated elementui list.

[0077] In an optional implementation, for the first optional case in step 104, the electronic device deletes the target column data corresponding to the first column identifier in the elementui list, and inserts the target column data at the column position indicated by the second column identifier. The process of obtaining the updated elementui list may include: the electronic device deletes the target element where the first column identifier is located in the column array of the elementui list, and inserts the target element at the position corresponding to the second column identifier to obtain the updated column array to complete the update of the elementui list.

[0078] For example, the electronic device can obtain the first index number of the target element where the first column identifier is located in the column array of the elementui list. Based on the first index number, the splice method (a method for adding or deleting elements in an array) is used to delete the target element where the first column identifier is located in the column array to obtain the deleted column array. Afterwards, the electronic device can obtain the second index number of the target element where the second column identifier is located in the deleted column array. Based on the second index number, the splice method is used to insert the target element at the position corresponding to the second column identifier to obtain the updated column array.

[0079] In another optional implementation, for the second optional case in step 104, the electronic device deletes the target column data corresponding to the first column identifier in the elementui list, and inserts the target column data at the column position indicated by the second column identifier. The process of obtaining the updated elementui list may include: the electronic device deletes the target element where the first column identifier is located in the list data array of the elementui list, and inserts the target element at the position corresponding to the second column identifier to obtain the updated list data array to complete the update of the elementui list.

[0080] For example, the electronic device can obtain the first index number of the target element where the first column identifier is located in the list data array of the elementui list. Based on the first index number, the splice method (a method for adding or deleting elements in an array) is used to delete the target element where the first column identifier is located in the list data array to obtain the deleted list data array. Afterwards, the electronic device can obtain the second index number of the target element where the second column identifier is located in the deleted list data array. Based on the second index number, the splice method is used to insert the target element at the position corresponding to the second column identifier to obtain the updated list data array.

[0081] Step 106: Display the updated elementui list.

[0082] In an optional implementation, for the first optional case in step 105, the process of the electronic device displaying the updated elementui list may include: rendering and displaying the updated elementui list based on the updated column array and the list data of the elementui list.

[0083] For example, the electronic device can render and display the updated elementui list based on the reloaded elementui list style, the updated column array, and the list data of the elementui list.

[0084] In another optional implementation, for the second optional case in step 105, the process of the electronic device displaying the updated elementui list may include: rendering and displaying the updated elementui list based on the updated list data array.

[0085] For example, assuming that the first input is a sliding input, the elementui list displayed by the electronic device is as follows: Figure 2 The list shown. Figure 2 As shown, the elementui list includes: the first column of data: name, X1, X2; the second column of data: age, 22, 23; the third column of data: address, Y1, Y2.

[0086] For the data in the elementui list, the column array ARR1 stored in the electronic device is [{name:'name'},{age:'age'},{addr:'address'}]. The list data ARR2 is [{name:'X1',age:'22',addr:'Y1'},{name:'X2',age:'23',addr:'Y2'}].

[0087] If the user wants to move the third column of data to be displayed before the first column of data, the user performs a sliding input for the first header name (address) of the third column of data (i.e., the target column of data) to move the third column of data to the column where the first column of data is located. After receiving the sliding input for the first header name of the third column of data, the electronic device controls the third column of data to move to the column where the first column of data is located in response to the sliding input, wherein the electronic device can trigger three sliding events in the process of receiving the sliding input, namely touchstart, touchmove, and touchend. Among them, the touchstart event is triggered when the sliding starts. The touchmove event is triggered when sliding on the screen. The touchend event is triggered when the sliding ends.

[0088] The electronic device can use the getCurrentClickClomun method to obtain the first header name when the sliding of the third column of data starts (that is, when the touchstart event is triggered). The getCurrentClickClomun method is used to obtain the second header name (name) of the first column of data when the movement of the third column of data ends (that is, when the touchmove event is triggered). Among them, the getCurrentClickClomun method can be used to obtain the second header name of the column where the touch control (such as the user's finger) is located when the set sliding event is triggered. The electronic device can traverse each element of the column array ARR1 to obtain the first column identifier (addr) corresponding to the first header name (address), and the second column identifier (name) corresponding to the second header name (name).

[0089] The electronic device can obtain the first index number (2) of the target element where the first column identifier (addr) is located in the column array ARR1. Based on the first index number, the splice method is used to delete the target element where the first column identifier is located in the column array to obtain the deleted column array. Afterwards, the electronic device can obtain the second index number (0) of the target element where the second column identifier is located in the deleted column array. Based on the second index number, the splice method is used to insert the target element at the position corresponding to the second column identifier to obtain the updated column array. The electronic device renders and displays the updated elementui list based on the updated column array ARR1 and the list data ARR2 of the elementui list. The rendered and displayed elementui list is as follows Figure 3 The list shown. Figure 3 As shown, the elementui list includes: the first column of data: address, Y1, Y2; the second column of data: age, 22, 23; the third column of data: name, X1, X2.

[0090] In summary, a data processing method provided by an embodiment of the present invention can receive a first input for a first header name of a target column data in the multiple columns of data, so that in response to the first input, the target column data is controlled to move based on the first input, and the first header name and the second header name of the column data corresponding to the terminal position of the target column data movement in the elementui list are obtained. By obtaining the first column identifier corresponding to the first header name and the second column identifier corresponding to the second header name, the target column data corresponding to the first column identifier can be deleted from the elementui list, and the target column data can be inserted into the column position indicated by the second column identifier to obtain the updated elementui list and display the updated elementui list. In this technical solution, the user can perform the first input for the first header name of the target column data, thereby adjusting the display position of the target column data to the column position where the column data corresponding to the terminal position is located. Compared with the related art, the operation complexity is reduced and the efficiency of position adjustment for column data in the elementui list is improved.

[0091] Please refer to Figure 4 , which shows a flow chart of a data processing method provided by an embodiment of the present invention. The data processing method can be applied to an electronic device. Optionally, the electronic device can be a terminal, and the terminal can be a mobile phone, a personal computer, a tablet computer or a wearable device. Figure 4 As shown, the method includes:

[0092] Step 401: Display an elementui list including multiple columns of data on the screen, each column of data including a table header name.

[0093] The explanation and implementation of this step may refer to the explanation and implementation of the aforementioned step 101, and will not be elaborated in detail in this embodiment of the present invention.

[0094] Step 402: Receive a first input of a first table header name for a target column of data among multiple columns of data.

[0095] The explanation and implementation of this step may refer to the explanation and implementation of the aforementioned step 102, and will not be elaborated in detail in this embodiment of the present invention.

[0096] Step 403 : In response to the first input, control the movement of target column data based on the first input.

[0097] The explanation and implementation of this step can refer to the implementation of the electronic device controlling the movement of target column data based on the first input in the aforementioned step 103, which will not be elaborated in detail in the embodiment of the present invention.

[0098] Step 404: determine whether the target column data moving end position is located in the elementui list area. If not, execute step 405; if yes, execute step 406.

[0099] Optionally, before the electronic device executes step 204, the method further includes: obtaining the moving distance and movable distance of the target column data. When the moving distance is less than the movable distance, it is determined that the terminal position is located in the area where the elementui list is located. When the moving distance is greater than or equal to the movable distance, it is determined that the terminal position is outside the area where the elementui list is located. In an embodiment of the present invention, by judging the size of the moving distance and the movable distance of the target column data, it is determined whether the position where the target column data ends moving is located in the area where the elementui list is located. The movable distance is the distance between the moving starting position of the target column data and the target edge position of the elementui list, and the target edge position is the edge position pointed to by the moving direction of the target column data in the elementui list.

[0100] For example, the electronic device can obtain the moving distance of the target column data by calculating the distance between the moving starting position and the ending position of the target column data. The electronic device can obtain the moving direction of the first input and determine the edge position of the elementui list pointed to by the moving direction, calculate the distance between the edge position and the moving starting position, and obtain the movable distance. The electronic device can calculate the difference between the movable distance and the moving distance. When the difference is greater than zero, it is determined that when the moving distance is greater than or equal to the movable distance, it is further determined that the ending position is outside the area where the elementui list is located. When the difference is greater than zero, it is determined that when the moving distance is less than the movable distance, it is further determined that the ending position is within the area where the elementui list is located.

[0101] Step 405: Generate prompt information and display the prompt information. The prompt information is used to prompt the target column data to move outside the area where the elementui list is located.

[0102] Optionally, the generated prompt information may be audio information or text information, for example, the prompt information may be audio information with a sound of "dong". Alternatively, the prompt information may be text information including the words "move out of the list".

[0103] In the embodiment of the present invention, the electronic device may not perform any operation when the target column data movement end position is not located in the elementui list area, that is, the target column data movement end position is outside the elementui list area.

[0104] Step 406: Obtain the first header name and the second header name of the column data corresponding to the end position in the elementui list.

[0105] The explanation and implementation of this step can refer to the implementation of the electronic device obtaining the first header name and the second header name of the column data corresponding to the termination position in the elementui list in the aforementioned step 103, which will not be elaborated in the embodiment of the present invention.

[0106] Step 407: Obtain a first column identifier corresponding to the first table header name and a second column identifier corresponding to the second table header name.

[0107] The explanation and implementation of this step may refer to the explanation and implementation of the aforementioned step 104, which will not be elaborated in detail in this embodiment of the present invention.

[0108] Step 408: Delete the target column data corresponding to the first column identifier in the elementui list, and insert the target column data into the column position indicated by the second column identifier to obtain an updated elementui list.

[0109] The explanation and implementation of this step may refer to the explanation and implementation of the aforementioned step 105, which will not be elaborated in detail in this embodiment of the present invention.

[0110] Step 409: Display the updated elementui list.

[0111] The explanation and implementation of this step may refer to the explanation and implementation of the aforementioned step 106, which will not be elaborated in detail in this embodiment of the present invention.

[0112] Optionally, the data processing method provided by the embodiment of the present invention can also adjust the column width of the column where the target column data is located in the elementui list, so that the elementui list can be displayed in a non-wrapped form, that is, the target column data can be displayed in one row. Figure 5 As shown, the embodiment of the present invention is described with the following steps 501 to 505.

[0113] Step 501: Receive a second input of a first table header name for target column data in multiple columns of data.

[0114] In an embodiment of the present invention, the second input is different from the first input. Optionally, the second input may include a click input for the first header name and a click input for a no-line break mark in a no-line break setting page, where the no-line break setting page is a page displayed in response to a click input for the first header name. Alternatively, the second input may be a double-click input for the first header name and a sliding input for setting a track, etc.

[0115] Step 502: In response to the second input, obtain a first column identifier corresponding to the first table header name.

[0116] In an embodiment of the present invention, the electronic device may first obtain the first header name in response to the second input, and then obtain the first column identifier corresponding to the first header name. The implementation method of the electronic device obtaining the first header name and the first column identifier corresponding to the first header name may refer to the implementation method of obtaining the first header name in response to the first input in the aforementioned step 103 and the implementation method of obtaining the first column identifier corresponding to the first header name in step 104, which will not be elaborated in the embodiment of the present invention.

[0117] Step 503: Calculate the total number of characters in each row of data in the column where the target column data corresponding to the first column identifier is located.

[0118] In the embodiment of the present invention, the electronic device can calculate the total number of Chinese characters, numeric characters, punctuation characters, English characters, etc. included in any row of data in the column where the target column data indicated by the first column identifier is located.

[0119] Step 504, calculate the first target column width when the maximum number of characters are located in the same row, and adjust the width style value of the column indicated by the first column identifier to the first target column width, and the maximum total number of characters is the maximum value of the total number of characters in each row of data.

[0120] Optionally, after calculating the total number of characters in each row of data in the column where the target column data is located, the electronic device can determine the maximum number of characters by comparing the total characters in each row of data. The electronic device can count the number of digits of each character, such as Chinese characters, numeric characters, punctuation characters, and English characters, included in the target row data. For any character, the product of the number of digits of the character and the width of the character is calculated. The electronic device calculates the sum of the products corresponding to each character to obtain the first target column width. The target row data is the row data whose total number of characters is the maximum total number of characters.

[0121] In an embodiment of the present invention, after calculating the first target column width, the electronic device can call the style component of the elementui list to adjust the width style value of the column indicated by the first column identifier to the first target column width. For example, the electronic device can call the style group to reassign the Width property of the column indicated by the first column identifier to the first target column width.

[0122] In another example, the electronic device may control the width style attribute of the column indicated by the first column identifier to be invalid, add a new width style attribute for the column indicated by the first column identifier, and assign the new width style attribute to the second target column width. For example, the electronic device may add a new width style attribute for the column indicated by the first column identifier, and update the priority of the width style attribute of the column indicated by the first column identifier and the priority of the new width style attribute, the priority of the updated width style attribute being lower than the priority of the new width style attribute, so as to control the width style attribute of the column indicated by the first column identifier to be invalid. The electronic device may assign the new width style attribute to the first target column width.

[0123] Optionally, the elementui list includes a minimum column width attribute, and the value assigned to the minimum column width attribute is a minimum width style value. The minimum column width attribute is used to set the minimum value of the column width of each column in the elementui list. The process of the electronic device adjusting the width style value of the column indicated by the first column identifier to the first target column width may include the following steps S1 to S;

[0124] In step S1, it is determined whether the maximum total number of characters is less than the number of characters in the first header name. If not, step S2 is executed; if so, step S3 is executed.

[0125] In the embodiment of the present invention, the electronic device can count the number of Chinese characters, numeric characters, punctuation characters, English characters, etc. included in the first header name, and compare the maximum total number of characters with the number of characters in the first header name.

[0126] In step S2, the width style value of the column indicated by the first column identifier is adjusted to a first target column width.

[0127] When the maximum total number of characters is greater than or equal to the number of characters in the first table header name, the electronic device adjusts the width style value of the column indicated by the first column identifier to the first target column width.

[0128] In step S3, it is determined whether the width of the first header name when it is located in the same row is less than the minimum width style value of the column indicated by the first column identifier. If so, step S4 is executed; if not, step S5 is executed.

[0129] When the maximum total number of characters is less than the number of characters of the first header name, it indicates that if the column width of the column where the target column data is located is adjusted based on the maximum total number of characters, the first header name cannot be fully displayed in one line. Therefore, the electronic device calculates the header width when the first header name is located in the same line, and compares whether the header width when the first header name is located in the same line is less than the minimum width style value of the column indicated by the first column identifier, so as to determine the width style value of the column indicated by the first column identifier on the premise of satisfying the assignment of the minimum width attribute of the column.

[0130] Optionally, the electronic device can count the number of digits of each character included in the first header name, such as Chinese characters, numeric characters, punctuation characters, and English characters. For any character, the product of the number of digits of the character and the width of the character is calculated. The electronic device calculates the sum of the products corresponding to each character to obtain the header width when the first header name is in the same row.

[0131] In step S4, the width style value of the column indicated by the first column identifier is adjusted to the minimum width style value.

[0132] When the maximum total number of characters is less than the number of characters in the first header name, and the header width when the first header name is located in the same row is less than the minimum width style value of the column indicated by the first column identifier, the electronic device adjusts the width style value of the column indicated by the first column identifier to the minimum width style value to meet the minimum column width attribute of the elementui list.

[0133] In step S5, the width style value of the column indicated by the first column identifier is adjusted to the width style value of the header where the first header name is located.

[0134] When the maximum total number of characters is less than the number of characters in the first header name, and the header width when the first header name is located in the same row is greater than the minimum width style value of the column indicated by the first column identifier, the electronic device adjusts the width style value of the column indicated by the first column identifier to the width style value of the header where the first header name is located.

[0135] Step 505: Render and display the elementui list.

[0136] In the embodiment of the present invention, the electronic device can render and display the elementui list based on the adjusted width style value of the column indicated by the first column identifier.

[0137] Optionally, the data processing method provided in the embodiment of the present invention can also support adjusting the row width of the column where the target column data is located according to the second target column width input by the user for the target column data in the elementui list, so as to improve the flexibility of setting the column width of each column in the elementui list and improve the user experience. Figure 6 As shown, the embodiment of the present invention is described with the following steps 601 to 605.

[0138] Step 601: Receive a third input of a first table header name for a target column of data among multiple columns of data.

[0139] In the embodiment of the present invention, the third input is different from the first input and the second input. Optionally, the second input may include a click input for the first header name and a click input for setting the column width in a column setting page, where the column setting page is a page displayed in response to the click input for the first header name. Alternatively, the third input may be a double-click input for the first header name and a slide input for setting a track, etc.

[0140] Step 602: In response to the third input, obtain the first column identifier and display a column width setting interface.

[0141] Optionally, the column width setting interface includes: a column width setting area corresponding to the column where the target column data is located. The user can write the second target column width of the column where the target column data is located in the column width setting area. For example, the column width setting area may include an input field or a column width data drop-down selection field.

[0142] Step 603: Obtain the second target column width input in the column width setting interface.

[0143] In the embodiment of the present invention, after the user writes the second target column width of the column where the desired target column data is located in the column width setting interface, the electronic device can obtain the second target column width entered in the column width setting interface in response to the write operation in the column width setting interface.

[0144] Step 604: Adjust the width style value of the column indicated by the first column identifier to the second target column width.

[0145] In an embodiment of the present invention, the implementation method of the electronic device adjusting the width style value of the column indicated by the first column identifier to the second target column width can refer to the implementation method of the electronic device adjusting the width style value of the column indicated by the first column identifier to the first target column width in the aforementioned step 504, and the embodiment of the present invention will not elaborate on this.

[0146] For example, the electronic device may control the width style attribute of the column indicated by the first column identifier to be invalid, add a new width style attribute for the column indicated by the first column identifier, and assign the new width style attribute to the second target column width, so as to complete the adjustment of the width style value of the column indicated by the first column identifier to the second target column width. The process in which the electronic device controls the width style attribute of the column indicated by the first column identifier to be invalid, adds a new width style attribute for the column indicated by the first column identifier, and assigns the new width style attribute to the second target column width may include: the electronic device may add a new width style attribute for the column indicated by the first column identifier, and update the priority of the width style attribute of the column indicated by the first column identifier and the priority of the new width style attribute, wherein the priority of the updated width style attribute is lower than the priority of the new width style attribute, so as to control the width style attribute of the column indicated by the first column identifier to be invalid. The electronic device may assign the new width style attribute to the first target column width.

[0147] Step 605: Render and display the elementui list.

[0148] In the embodiment of the present invention, the electronic device can render and display the elementui list based on the adjusted width style value of the column indicated by the first column identifier.

[0149] In summary, a data processing method provided by an embodiment of the present invention can receive a first input for a first header name of a target column data in the multiple columns of data, so that in response to the first input, the target column data is controlled to move based on the first input, and the first header name and the second header name of the column data corresponding to the terminal position of the target column data movement in the elementui list are obtained. By obtaining the first column identifier corresponding to the first header name and the second column identifier corresponding to the second header name, the target column data corresponding to the first column identifier can be deleted from the elementui list, and the target column data can be inserted into the column position indicated by the second column identifier to obtain the updated elementui list and display the updated elementui list. In this technical solution, the user can perform the first input for the first header name of the target column data, thereby adjusting the display position of the target column data to the column position where the column data corresponding to the terminal position is located. Compared with the related art, the operation complexity is reduced and the efficiency of position adjustment for column data in the elementui list is improved.

[0150] Please refer to Figure 7 , which shows a block diagram of a data processing device provided by an embodiment of the present invention. Figure 7As shown, the data processing device 700 includes: a display module 701 , a receiving module 702 , a control module 703 , an acquisition module 704 and an update module 705 .

[0151] Display module 701, used to display an elementui list including multiple columns of data on the screen, each column of data including a table header name;

[0152] A receiving module 702 is used to receive a first input of a first header name of a target column of data among multiple columns of data;

[0153] The control module 703 is used to control the movement of the target column data based on the first input in response to the first input, and obtain the first header name and the second header name of the column data corresponding to the end position in the elementui list, where the end position is the position where the movement of the target column data ends;

[0154] The acquisition module 704 is used to acquire a first column identifier corresponding to the first table header name and a second column identifier corresponding to the second table header name;

[0155] An updating module 705 is used to delete the target column data corresponding to the first column identifier in the elementui list, and insert the target column data into the column position indicated by the second column identifier to obtain an updated elementui list;

[0156] The display module 701 is also used to display the updated elementui list.

[0157] Optionally, the update module 705 is further used to:

[0158] In the column array of the elementui list, delete the target element where the first column identifier is located, and insert the target element at the position corresponding to the second column identifier to obtain the updated column array to complete the update of the elementui list; one element in the column array corresponds to a column of data, and the element includes the header name and column identifier of a column of data, and the arrangement order of each element is the display order of each column of data in the elementui list;

[0159] Displaying the updated elementui list, including: based on the updated column array and the list data of the elementui list, rendering and displaying the updated elementui list, the list data is stored in the form of key-value pairs, the key field of the key-value pair is used to store the column identifier, and the value field of the key-value pair is used to store the data in the column data except the header name.

[0160] Optionally, the control module 703 is further used to: when it is determined that the end position is located in the area where the elementui list is located, obtain a first header name and a second header name of the column data corresponding to the end position in the elementui list.

[0161] Optionally, the acquisition module 704 is further used to acquire the moving distance and movable distance of the target column data, the movable distance being the distance between the moving start position of the target column data and the target edge position of the elementui list, and the target edge position being the edge position pointed to by the moving direction of the target column data in the elementui list;

[0162] The data processing device 700 further includes: a determination module, which is used to determine that the end position is located in the area where the elementui list is located when the moving distance is less than the movable distance.

[0163] Optionally, the receiving module 702 is further configured to receive a second input of a first header name of a target column of data in the multiple columns of data.

[0164] The acquisition module 704 is further configured to acquire, in response to the second input, a first column identifier corresponding to the first table header name.

[0165] The data processing device 700 further includes: a calculation module for calculating the total number of characters in each row of data in the column where the target column data corresponding to the first column identifier is located; and a first target column width for calculating the maximum number of characters when the characters are located in the same row.

[0166] The adjustment module is used to adjust the width style value of the column indicated by the first column identifier to the first target column width, and the maximum total number of characters is the maximum value of the total number of characters in each row of data.

[0167] The display module 701 is also used to render and display the elementui list.

[0168] Optionally, the adjustment module is also used to:

[0169] When the maximum total number of characters is greater than or equal to the number of characters in the first table header name, the width style value of the column indicated by the first column identifier is adjusted to the first target column width;

[0170] When the maximum total number of characters is less than the number of characters in the first header name, and the header width when the first header name is located in the same row is less than the minimum width style value of the column indicated by the first column identifier, the width style value of the column indicated by the first column identifier is adjusted to the minimum width style value;

[0171] When the maximum total number of characters is less than the number of characters of the first header name, and the header width when the first header name is located in the same row is greater than the minimum width style value of the column indicated by the first column identifier, the width style value of the column indicated by the first column identifier is adjusted to the width style value of the header where the first header name is located.

[0172] Optionally, the receiving module 702 is further configured to receive a third input of a first table header name for target column data in the multiple columns of data;

[0173] The acquisition module 704 is further used to acquire the first column identifier and display the column width setting interface in response to the third input; and is also used to acquire the second target column width input in the column width setting interface;

[0174] The adjustment module is further used to adjust the width style value of the column indicated by the first column identifier to a second target column width;

[0175] The display module 701 is also used to render and display the elementui list.

[0176] Optionally, the adjustment module is further used to: control the width style attribute of the column indicated by the first column identifier to be invalid, add a new width style attribute to the column indicated by the first column identifier, and assign the new width style attribute to the second target column width.

[0177] In summary, a data processing device provided by an embodiment of the present invention can receive a first input for a first header name of a target column data in the multiple columns of data, so that in response to the first input, the target column data is controlled to move based on the first input, and the first header name and the second header name of the column data corresponding to the terminal position of the target column data movement in the elementui list are obtained. By obtaining the first column identifier corresponding to the first header name and the second column identifier corresponding to the second header name, the target column data corresponding to the first column identifier can be deleted from the elementui list, and the target column data can be inserted into the column position indicated by the second column identifier to obtain the updated elementui list and display the updated elementui list. In this technical solution, the user can perform the first input for the first header name of the target column data, thereby adjusting the display position of the target column data to the column position where the column data corresponding to the terminal position is located. Compared with the related art, the operation complexity is reduced and the efficiency of position adjustment for column data in the elementui list is improved.

[0178] An embodiment of the present invention also provides an electronic device, which includes a processor, a memory, and a program or instruction stored in the memory and executable on the processor. When the program or instruction is executed by the processor, the steps executed by the terminal in the data processing method provided by the embodiment of the present invention are implemented, or the steps executed by the server in the data processing method provided by the embodiment of the present invention are implemented.

[0179] An embodiment of the present invention also provides a readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, the steps executed by the terminal in the data processing method provided by the embodiment of the present invention are implemented, or the steps executed by the server in the data processing method provided by the embodiment of the present invention are implemented.

[0180] An embodiment of the present invention also provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run a program or instruction to implement the steps executed by the terminal in the data processing method provided by the embodiment of the present invention, or to implement the steps executed by the server in the data processing method provided by the embodiment of the present invention.

[0181] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A data processing method, characterized in that: The method comprises: Display an elementui list including multiple columns of data on the screen, each column of data including a table header name; Receive a first input of a first table header name for a target column of data among multiple columns of data; In response to the first input, the target column data is controlled to move based on the first input, and the first header name and the second header name of the column data corresponding to the end position in the elementui list are obtained, and the end position is the position where the target column data movement ends; Obtain a first column identifier corresponding to the first table header name, and a second column identifier corresponding to the second table header name; Deleting the target column data corresponding to the first column identifier in the elementui list, and inserting the target column data into the column position indicated by the second column identifier, to obtain an updated elementui list; Display the updated elementui list.

2. The method according to claim 1, characterized in that The step of deleting the target column data corresponding to the first column identifier in the elementui list and inserting the target column data into the column position indicated by the second column identifier to obtain an updated elementui list includes: In the column array of the elementui list, the target element where the first column identifier is located is deleted, and the target element is inserted at the position corresponding to the second column identifier to obtain an updated column array to complete the update of the elementui list; one element in the column array corresponds to a column of data, and the element includes a header name and a column identifier of a column of data, and the arrangement order of each of the elements is the display order of each column of data in the elementui list; The display of the updated elementui list includes: based on the updated column array and the list data of the elementui list, rendering and displaying the updated elementui list, the list data is stored in the form of key-value pairs, the key field of the key-value pair is used to store the column identifier, and the value field of the key-value pair is used to store the data in the column data except the header name.

3. The method according to claim 1, characterized in that The obtaining of the first header name and the second header name of the column data corresponding to the termination position in the elementui list includes: When it is determined that the termination position is located in the area where the elementui list is located, the first header name and the second header name of the column data corresponding to the termination position in the elementui list are obtained.

4. The method according to claim 3, characterized in that The method further comprises: Obtain the moving distance and movable distance of the target column data, wherein the movable distance is the distance between the moving start position of the target column data and the target edge position of the elementui list, and the target edge position is the edge position pointed to by the moving direction of the target column data in the elementui list; When the moving distance is less than the movable distance, it is determined that the termination position is located in the area where the elementui list is located.

5. The method according to claim 1, characterized in that The method further comprises: Receive a second input of a first table header name for target column data in the plurality of columns of data; In response to the second input, obtaining a first column identifier corresponding to the first table header name; Calculate the total number of characters in each row of data in the column where the target column data corresponding to the first column identifier is located; Calculate the first target column width when the maximum number of characters are located in the same row, and adjust the width style value of the column indicated by the first column identifier to the first target column width, wherein the maximum total number of characters is the maximum value of the total number of characters in each row of data; Renders and displays the elementui list.

6. The method according to claim 5, characterized in that The step of adjusting the width style value of the column indicated by the first column identifier to the first target column width includes: When the maximum total number of characters is greater than or equal to the number of characters in the first table header name, adjusting the width style value of the column indicated by the first column identifier to the first target column width; When the maximum total number of characters is less than the number of characters of the first header name, and the header width when the first header names are located in the same row is less than the minimum width style value of the column indicated by the first column identifier, adjusting the width style value of the column indicated by the first column identifier to the minimum width style value; When the maximum total number of characters is less than the number of characters of the first header name, and the header width when the first header name is located in the same row is greater than the minimum width style value of the column indicated by the first column identifier, the width style value of the column indicated by the first column identifier is adjusted to the width style value of the header where the first header name is located.

7. The method according to claim 1 or 5, characterized in that: The method further comprises: receiving a third input of a first table header name for target column data among the multiple columns of data; In response to the third input, acquiring the first column identifier and displaying a column width setting interface; Obtaining a second target column width input in the column width setting interface; Adjusting the width style value of the column indicated by the first column identifier to the second target column width; Renders and displays the elementui list.

8. The method according to claim 7, characterized in that The step of adjusting the width style value of the column indicated by the first column identifier to the second target column width includes: The width style attribute of the column indicated by the first column identifier is controlled to be invalid, a new width style attribute is added to the column indicated by the first column identifier, and the new width style attribute is assigned the second target column width.

9. A data processing device, characterized in that: The device method comprises: Display module, used to display the elementui list including multiple columns of data on the screen, each column of data including a table header name; A receiving module, used for receiving a first input of a first table header name for target column data in multiple columns of data; a control module, configured to respond to the first input, control the movement of the target column data based on the first input, and obtain the first header name and a second header name of the column data corresponding to the end position in the elementui list, wherein the end position is the position where the movement of the target column data ends; An acquisition module, used to acquire a first column identifier corresponding to the first table header name and a second column identifier corresponding to the second table header name; An updating module, configured to delete the target column data corresponding to the first column identifier in the elementui list, and insert the target column data into the column position indicated by the second column identifier, so as to obtain an updated elementui list; The display module is also used to display the updated elementui list.

10. An electronic device, characterized in that: The electronic device comprises: a processor and a memory connected to the processor, The memory stores instructions, and the processor is used to implement the data processing method described in any one of claims 1 to 8 when executing the instructions.

Images