CN108920145B - UI table color block moving method - Google Patents
UI table color block moving method Download PDFInfo
- Publication number
- CN108920145B CN108920145B CN201810432596.0A CN201810432596A CN108920145B CN 108920145 B CN108920145 B CN 108920145B CN 201810432596 A CN201810432596 A CN 201810432596A CN 108920145 B CN108920145 B CN 108920145B
- Authority
- CN
- China
- Prior art keywords
- data
- cell
- previous
- row
- current data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a UI form color block moving method, which comprises the following steps: 1) calculating the row and column numbers of the cells where the current data are located; 2) calculating the row and column numbers of the cells where the previous data are located, wherein the index number of the data packet where the previous data are located is 1 less than that of the data packet where the current data are located; the index numbers of the previous data and the current data in the data packet are the same; 3) and updating the background colors of the cell in which the current data is positioned and the cell in which the previous item of data is positioned. The method can realize that the background color of other cells in the same row/column is not changed when the background color of a single cell is changed, so that the current data can be more prominently displayed, and the requirement of a user for tracking data is met.
Description
Technical Field
The invention belongs to the technical field of UI design, and particularly relates to a UI form color block moving method.
Background
In UI design, the use of lists is common, and current data is filled into the lists to meet the requirement of data analysis.
If the data in the list needs to be updated in a cyclic manner, the software developer will typically prompt the user by changing the background color of the current row in order to facilitate the user's tracking of the current data. However, if the number of data lines to be displayed is much larger than the number of lines that can be displayed in the list (and a scroll bar cannot be used), only the number of columns can be expanded at this time, and multiple groups of data are displayed in the same line.
Disclosure of Invention
The invention aims to provide a UI table color block moving method so as to specifically change the background color of a data cell to achieve the aim of prompting data updating.
The invention is realized by the following technical scheme:
a UI table color block moving method comprises the following steps:
1) calculating the row and column numbers of the cells where the current data are located;
2) calculating the row and column numbers of the cells where the previous data are located, wherein the index number of the data packet where the previous data are located is 1 less than that of the data packet where the current data are located; the index numbers of the previous data and the current data in the data packet are the same;
3) and updating the background colors of the cell in which the current data is positioned and the cell in which the previous item of data is positioned.
Preferably, if the data packet in which the current data is located is the first data packet, it needs to be determined whether the data packet is in the first cycle; if so, the current data does not have the corresponding previous data, and only the background color of the cell where the current data is located is updated; if not, the previous item of data is in the last packet of the last cycle.
Preferably, in step 1), the calculation formula of the row and column number (a, B) of the cell where the current data is located is:
A＝X％N，B＝(X/N)*In+Ix-1；
wherein A is the line number of the cell where the current data is located, and starts from 0; b is the column number of the cell where the current data is located, starting from 0; x is the index number of the data packet where the current data is located, and starts from 0; in is the total number of data In a data packet; ix is the index number of the current data in the data packet where the current data is located, and starts from 1; n is the total number of rows in the list; the data in the same data packet are sequentially arranged in the same row according to the index sequence number.
Preferably, in step 2), the calculation formula for calculating the row and column number (C, D) of the cell in which the previous item of data is located is:
if a is not equal to 0, C ═ a-1, D ═ B;
if A is 0 and B is more than or equal to In, then C is N-1 and D is B-In;
if a is 0 and 0 ≦ B < In, then C ═ L-1)% N, D ═ ((L-1)/N) × In + Ix-1;
wherein, L is the total number of the data packets required to be displayed.
Preferably, in step 3), the background color of the cell in which the previous item of data is located is updated, and then the background color of the cell in which the current item of data is located is updated.
Preferably, steps 1) -3) are repeated to effect a cyclic movement of the color patches.
Compared with the prior art, the invention has the following beneficial technical effects:
the UI table color block moving method provided by the invention respectively calculates the row number and the column number of the cell where the current data is positioned and the row number and the column number of the cell where the previous data is positioned, and then respectively changes the background color of the cell where the current data is positioned and the background color of the cell where the previous data is positioned, thereby achieving the purpose of highlighting the updated data. The method can realize that the background color of other cells in the same row/column is not changed when the background color of a single cell is changed, so that the current data can be more prominently displayed, and the requirement of a user for tracking data is met.
Drawings
FIG. 1 is a flow chart of a method of calculating a row-column number of a target cell.
FIG. 2 is a flowchart of a method for moving a UI table color block.
FIG. 3 is a table diagram of the present invention.
Detailed Description
The present invention will now be described in further detail with reference to specific examples, which are intended to be illustrative, but not limiting, of the invention.
When multiple groups of data need to be displayed on the same line, in order to meet the tracking of the current data by a user, the background color of a single cell can be changed to meet the requirement. If the data needs to be updated circularly, the function of circularly moving the single color blocks needs to be realized. The difficulty with this assumption is that the background color of a single cell changes and the color patch moves cyclically. The selection of the list is performed by default in a row or column unit, and highlight selection is performed, so that the background color of the current cell is only changed in one row/column of the single color block; for this, the row and column numbers in the list corresponding to the current data index need to be calculated; and calculate the previous row column number.
In the present embodiment, it is assumed that the data to be displayed contains In types (such as temperature, speed, rotation speed, etc.), the index of these data In the data packet is I1 ═ 1, I2 ═ 2 … In ═ n, and the data In the same data packet are arranged In the same row from left to right In sequence according to the index number. If the total number of packets to be displayed is L, the index of the packet is X, and X starts from 0.
The total number of rows in the list in the design is N, and the index number of the rows (i.e., row number) increases from top to bottom, starting with 0. The column numbers of the list are sequentially increasing from left to right, starting with 0.
As shown in fig. 1 and 2, the UI table color block moving method of the present invention comprises the steps of:
1) calculating the row and column numbers of the cells where the current data are located;
2) calculating the row and column numbers of the cells where the previous data is located;
wherein, the index number of the data packet of the previous data is 1 less than that of the data packet of the current data; the index numbers of the previous data and the current data in the data packet are the same;
3) and updating the background colors of the cell in which the current data is positioned and the cell in which the previous item of data is positioned.
If the data packet where the current data is located is the first data packet, namely the index number of the data packet is 0, the number of cycles where the data needing to be displayed is located needs to be judged, and if the data is the first cycle, the data does not have the corresponding previous data; if not, the corresponding previous data is the corresponding data of the last data packet.
For step 1), the specific calculation method of the row and column numbers (a, B) of the cell where the current data is located is as follows: a ═ X% N, B ═ X/N × In + Ix-1;
wherein A is the line number of the cell where the current data is located, and starts from 0; b is the column number of the cell where the current data is located, starting from 0; x is the index number of the data packet where the current data is located, and starts from 0; in is the total number of data In a data packet; ix is the index number of the current data in the data packet, starting from 1. N is the total number of rows in the list.
In step 1), the total number of columns of the list may also be judged in order to determine the size of the list. The determination method is that if L% N is 0, that is, the number of packets is an integral multiple of the number of rows, the total number of columns M In the list is (L/N) × In; if L% N is not equal to 0, i.e. the number of packets is not an integer multiple of the number of rows, then the total number of columns M In the list is (L/N +1) × In. More specific algorithms are, M ═ ((L-1)/N +1) × In;
in step 2), the row and column number of the cell in which the previous item of data is located needs to be judged according to the row and column number (a, B) of the cell in which the current item of data is located. The method specifically comprises the following steps:
if the row number of the cell where the current data is located is not 0, the row number and the column number of the cell where the previous data is located are (A-1, B);
if the row number of the cell In which the current data is located is 0 but the column number is not In the range of [0, In ], the row number and the column number of the cell In which the previous data is located are (N-1, B-In);
if the row number of the cell where the current data is located is 0 and the column number is In the range of [0, In), judging whether a data packet where the current data is located is In a first cycle, and if the data packet is In the first cycle, directly updating the background color of the cell where the current data is located without the previous data; if the cycle is not the first cycle, it can be confirmed that the previous item of data is In the last packet of the previous cycle, and the row and column number of the cell In which the previous item of data is located is ((L-1)% N, ((L-1)/N) × In + Ix-1).
Fig. 3 shows a specific embodiment, where the data in the data packet that needs to be displayed currently is: temperature, speed, rotational speed, i.e., In 3; the total number of the current data packets is L-6; for a packet with index X5, the row and column number of its speed (I2 2) is calculated by the above procedure as: a is 5% 3-2; b ═ 3+2 ═ 5 (5/3); the effect is shown in figure 3.
Claims (3)
1. A UI form color block moving method is characterized by comprising the following steps:
1) calculating the row and column numbers of the cells where the current data are located;
the calculation formula of the row and column numbers (A, B) of the cell where the current data is located is as follows:
A＝X％N，B＝(X/N)*In+Ix-1；
wherein A is the line number of the cell where the current data is located, and starts from 0; b is the column number of the cell where the current data is located, starting from 0; x is the index number of the data packet where the current data is located, and starts from 0; in is the total number of data In a data packet; ix is the index number of the current data in the data packet where the current data is located, and starts from 1; n is the total number of rows in the list; data in the same data packet are sequentially arranged in the same row according to the index sequence number;
2) calculating the row and column numbers of the cells where the previous data are located, wherein the index number of the data packet where the previous data are located is 1 less than that of the data packet where the current data are located; the index numbers of the previous data and the current data in the data packet are the same;
the calculation formula for calculating the row and column numbers (C, D) of the cells where the previous item of data is located is as follows:
if a is not equal to 0, C ═ a-1, D ═ B;
if A is 0 and B is more than or equal to In, then C is N-1 and D is B-In;
if a is 0 and 0 ≦ B < In, then C ═ L-1)% N, D ═ ((L-1)/N) × In + Ix-1;
wherein, L is the total number of the data packets needing to be displayed;
if the row number of the cell where the current data is located is not 0, the row number and the column number of the cell where the previous data is located are (A-1, B);
if the row number of the cell In which the current data is located is 0 but the column number is not In the range of [0, In ], the row number and the column number of the cell In which the previous data is located are (N-1, B-In);
if the row number of the cell where the current data is located is 0 and the column number is In the range of [0, In), judging whether a data packet where the current data is located is In a first cycle, and if the data packet is In the first cycle, directly updating the background color of the cell where the current data is located without the previous data; if the cycle is not the first cycle, the previous item of data can be confirmed to be In the last data packet of the previous cycle, and the row and column number of the cell In which the previous item of data is located is ((L-1)% N, ((L-1)/N) × In + Ix-1);
3) updating the background colors of the cell where the current data is located and the cell where the previous item of data is located;
if the data packet where the current data is located is the first data packet, whether the data packet is in the first circulation needs to be judged; if so, the current data does not have the corresponding previous data, and only the background color of the cell where the current data is located is updated; if not, the previous data item is in the last data packet of the last cycle;
when a plurality of groups of data need to be displayed on the same line, in order to meet the tracking of a user on the current data, the requirement can be met by changing the background color of a single cell; if the data needs to be updated circularly, the function of circularly moving the single color blocks needs to be realized.
2. The UI form color block moving method according to claim 1, wherein in step 3), the background color of the cell in which the previous item of data is located is updated first, and then the background color of the cell in which the current item of data is located is updated.
3. The UI table color block moving method of claim 2, wherein the steps 1) -3) are repeated to realize the cyclic movement of the color blocks.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810432596.0A CN108920145B (en) | 2018-05-08 | 2018-05-08 | UI table color block moving method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810432596.0A CN108920145B (en) | 2018-05-08 | 2018-05-08 | UI table color block moving method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108920145A CN108920145A (en) | 2018-11-30 |
| CN108920145B true CN108920145B (en) | 2022-04-19 |
Family
ID=64403667
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810432596.0A Active CN108920145B (en) | 2018-05-08 | 2018-05-08 | UI table color block moving method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108920145B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102043586A (en) * | 2010-12-21 | 2011-05-04 | 无锡永中软件有限公司 | Method and device for displaying background color in electronic form |
| CN103970735A (en) * | 2013-01-25 | 2014-08-06 | 苏州精易会信息技术有限公司 | Row-column highlighting method of target cell in webpage Table |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110066933A1 (en) * | 2009-09-02 | 2011-03-17 | Ludwig Lester F | Value-driven visualization primitives for spreadsheets, tabular data, and advanced spreadsheet visualization |
| US10726200B2 (en) * | 2011-02-04 | 2020-07-28 | Benjamin Chou | Systems and methods for user interfaces that provide enhanced verification of extracted data |
| US20120013539A1 (en) * | 2010-07-13 | 2012-01-19 | Hogan Edward P A | Systems with gesture-based editing of tables |
| CN107766309B (en) * | 2017-08-29 | 2021-06-25 | 腾讯科技（深圳）有限公司 | Data table generation method and device, storage medium and electronic device |
| CN107766314B (en) * | 2017-10-20 | 2021-07-09 | 网易（杭州）网络有限公司 | Data processing method and device for electronic forms |
-
2018
- 2018-05-08 CN CN201810432596.0A patent/CN108920145B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102043586A (en) * | 2010-12-21 | 2011-05-04 | 无锡永中软件有限公司 | Method and device for displaying background color in electronic form |
| CN103970735A (en) * | 2013-01-25 | 2014-08-06 | 苏州精易会信息技术有限公司 | Row-column highlighting method of target cell in webpage Table |
Non-Patent Citations (1)
| Title |
|---|
| JS实现改变当前选中单元格的背景色，离开后恢复原色;帆软传说哥;《https://help.finereport.com/finereport8.0/doc-view-1814.html》;20180123;1-4 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108920145A (en) | 2018-11-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105487760B (en) | Method and device for displaying message and electronic equipment | |
| Liu et al. | Memory-based prisoner’s dilemma on square lattices | |
| CN105955733B (en) | A kind of method, apparatus and mobile terminal for modifying icon | |
| CN102006365B (en) | Contact affinity-disaffinity relationship display method, device and mobile terminal | |
| CN106201624A (en) | A kind of recommendation method of application program and terminal | |
| Bono et al. | Evolutionary and pulsation properties of Type II Cepheids | |
| CN106162680A (en) | Dilatation parameter determination method and device | |
| CN116962438B (en) | Gradient data synchronization method, system, electronic equipment and readable storage medium | |
| WO2022042754A1 (en) | Image processing method and apparatus, and device | |
| CN105955583B (en) | Icon arrangement method and system and display terminal | |
| CN105068779B (en) | A kind of display control method and device | |
| CN108920145B (en) | UI table color block moving method | |
| CN110084380A (en) | A kind of repetitive exercise method, equipment, system and medium | |
| CN104866185A (en) | Control interface display method and device | |
| CN108055387A (en) | Recommendation information display method and device, electronic equipment and readable storage medium | |
| EP2031854B1 (en) | Method and apparatus for displaying images | |
| Chiang et al. | Updated analysis of two-body charmed B meson decays | |
| US20240086725A1 (en) | Time series modeling predictions using partial history | |
| CN104346042A (en) | Display area setting method and device | |
| CN103513972B (en) | Display methods and electronic equipment | |
| CN105930521B (en) | A kind of data bank management device and method | |
| CN104461425A (en) | Screen content display adjusting method and device and terminal | |
| CN107632756A (en) | Programs menu display methods and terminal | |
| CN105988868B (en) | A kind of method and terminal shifting application program | |
| CN105487801B (en) | Progress bar adjusting method and mobile terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |