CN117194828B - Table rolling paging method and device in reaction and electronic equipment - Google Patents
Table rolling paging method and device in reaction and electronic equipment Download PDFInfo
- Publication number
- CN117194828B CN117194828B CN202311475533.0A CN202311475533A CN117194828B CN 117194828 B CN117194828 B CN 117194828B CN 202311475533 A CN202311475533 A CN 202311475533A CN 117194828 B CN117194828 B CN 117194828B
- Authority
- CN
- China
- Prior art keywords
- data
- component
- rolling
- paging
- page
- 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
- 238000005096 rolling process Methods 0.000 title claims abstract description 62
- 238000000034 method Methods 0.000 title claims abstract description 59
- 238000006243 chemical reaction Methods 0.000 title claims abstract description 33
- 238000012545 processing Methods 0.000 claims abstract description 31
- 230000007246 mechanism Effects 0.000 claims abstract description 18
- 238000009877 rendering Methods 0.000 claims abstract description 12
- 230000000694 effects Effects 0.000 claims abstract description 7
- 238000012544 monitoring process Methods 0.000 claims abstract description 7
- 230000006870 function Effects 0.000 claims description 30
- 230000009471 action Effects 0.000 claims description 10
- 238000013523 data management Methods 0.000 claims description 7
- 230000008569 process Effects 0.000 claims description 7
- 230000011218 segmentation Effects 0.000 claims description 5
- 230000005540 biological transmission Effects 0.000 claims description 3
- 238000004140 cleaning Methods 0.000 claims description 3
- 238000013500 data storage Methods 0.000 claims description 3
- 230000000007 visual effect Effects 0.000 claims description 3
- 238000004590 computer program Methods 0.000 description 11
- 230000005587 bubbling Effects 0.000 description 5
- 238000004891 communication Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 230000001960 triggered effect Effects 0.000 description 3
- 230000015572 biosynthetic process Effects 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000018109 developmental process Effects 0.000 description 2
- 238000003786 synthesis reaction Methods 0.000 description 2
- 230000000903 blocking effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the invention provides a method and a device for rolling and paging Table in a reaction and electronic equipment, belonging to the technical field of data processing, wherein the method comprises the following steps: selecting to use the React as a front end framework component to create, and creating a required React component; using a usesite hook of a reaction to manage data states inside the component; monitoring and processing page rolling events by utilizing a real event processing mechanism; using a user effect hook of the act to load data required by paging; and dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence by utilizing a component rendering mechanism of the act. The scheme adopts the fact as a front end framework, and fully utilizes usesite to efficiently manage data and page rolling information so as to improve the performance and user experience of the system.
Description
Technical Field
The present invention relates to the field of data processing technologies, and in particular, to a method and an apparatus for Table rolling paging in a reaction, and an electronic device.
Background
In order to solve the problem of page blocking caused by overlarge data volume, a large company usually adopts a paging mode to improve page performance, paging loading data of a Table form is realized by adopting options at present, and a click switching next page function is added below the Table form.
The native Table component usually does not support the function of paging or rolling to load more data, and in the options of the Table, the paging function has a problem that the data of the previous page cannot be reserved, which results in that the user cannot view the data of the previous page and the current page at the same time, and further improvement is needed.
Because of the different project requirements, it is sometimes not possible to directly use the packaging modules provided by large companies or rely on native development to meet specific requirements. Too much Table scroll loading data results in page stuck being a common performance problem, particularly when handling large amounts of data, which is often caused by the browser's need to render large amounts of DOM elements on the page and handle large amounts of data.
The above problems are to be solved.
Disclosure of Invention
In view of this, embodiments of the present invention provide a method, an apparatus, and an electronic device for Table scrolling paging in practice, which at least partially solve the problems existing in the prior art.
In a first aspect, an embodiment of the present invention provides a method for Table rolling paging in practice, including:
selecting to use a reaction as a front end framework component to create, and creating a required reaction component, wherein the reaction component comprises a page component and a sub-component;
using a usesite hook of the act to manage the data state inside the component, defining and initializing state variables where data is required to be stored and updated, and then using a state returned by usesite and an update function to realize data management;
monitoring and processing a page rolling event by utilizing a real event processing mechanism, and acquiring rolling position and rolling speed information of page rolling in real time by adding a rolling event monitor;
when the rolling position and the rolling speed information of page rolling meet the paging condition, using a useEffect hook of the act to load data required by paging, and after the data acquisition is completed, using usesite to update the data state of the act component;
and dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence by utilizing a component rendering mechanism of the act, and when the data is required to be displayed by a Table, displaying the data by using a Table component in the ant.
According to a specific implementation manner of the embodiment of the present disclosure, the loading data required for paging by using the exact useEffect hook includes:
and the data caching and lazy loading modes are adopted, so that the page load is reduced and the loading speed is improved.
According to a specific implementation of an embodiment of the disclosure, the method further includes:
when the data is empty, a corresponding prompt is displayed on the interface.
According to a specific implementation of an embodiment of the disclosure, the method further includes:
judging whether the operation executed by the user needs to reload data or not;
if so, the data reload operation is performed by the logic that triggers the interface to request or recall the data acquisition.
According to a specific implementation of an embodiment of the disclosure, the method further includes:
receiving homepage data transmitted by an upper layer assembly, and realizing data transmission and utilization;
after the homepage data are intercepted, data storage and cleaning are carried out, and the display data quantity in the page visual range is calculated.
According to a specific implementation of an embodiment of the disclosure, the method further includes:
when a user executes more pull-down loading operations, checking whether the stored data has more data to be displayed;
if more data to be displayed exist, the data display is carried out again;
if no data without more exist, an interface request is initiated;
if the interface returns the data, the data is input again;
if the interface has no data available, the rolling paged rendering is completed for the Table in React.
According to a specific implementation manner of the embodiment of the present disclosure, the dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence includes:
word segmentation processing is carried out on the content to be displayed on a plurality of pages to obtain a data element set；
Calculating a neighborhood value of a data element in the data element set:
where n is the number of data elements,representing the ith data element in the set of data elements,representing data elementsIs used to determine the neighborhood value of (1),representing the neighborhood value adjustment parameters,representing data elementsAnd data elementsDistance between them.
According to a specific implementation manner of the embodiment of the present disclosure, the dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence further includes:
computing data elements in a set of data elementsRanking value of (2)：
Based on data elementsRanking value of (2)Data element setPerforming descending order arrangement, respectively displaying the data element sets subjected to the descending order arrangement on a plurality of pages,parameters are adjusted for similarity.
In a second aspect, an embodiment of the present invention provides a Table rolling paging device in act, including:
the system comprises a creation module, a processing module and a processing module, wherein the creation module is used for selecting to use a reaction as a front end framework component to create a required reaction component, and the reaction component comprises a page component and a sub-component;
the definition module is used for managing the data state in the component by using a usesite hook of the act, defining and initializing state variables at the place where data is required to be stored and updated, and then realizing data management by using a usesite returned state and an update function;
the acquisition module is used for utilizing a real event processing mechanism to monitor and process page scrolling events, and acquiring scrolling position and scrolling speed information of page scrolling in real time by adding a scrolling event monitor;
the updating module is used for loading data required by paging by using a useEffect hook of the action when the rolling position and the rolling speed information of page rolling meet the paging condition, and updating the data state of the action component by using useState after the data acquisition is completed;
the display module is used for dynamically displaying the acquired data on the page by utilizing a component rendering mechanism of the act, and when the data is required to be displayed by the form, the data is displayed by using a Table component in the ant.
In a third aspect, an embodiment of the present invention further provides an electronic device, including:
at least one processor; the method comprises the steps of,
a memory communicatively coupled to the at least one processor; wherein,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of Table scrolling paging in practice in any of the implementations of the Ren Di or first aspect described above.
In a fourth aspect, embodiments of the present invention further provide a non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the method of Table scrolling paging in a compact in any implementation of the foregoing first aspect or the first aspect.
In a fifth aspect, embodiments of the present invention also provide a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions which, when executed by a computer, cause the computer to perform the method of Table scrolling paging in practice in any of the implementations of the first aspect or aspects.
The Table rolling paging scheme in the compact in the embodiment of the invention comprises the following steps: selecting to use a reaction as a front end framework component to create, and creating a required reaction component, wherein the reaction component comprises a page component and a sub-component; using a usesite hook of the act to manage the data state inside the component, defining and initializing state variables where data is required to be stored and updated, and then using a state returned by usesite and an update function to realize data management; monitoring and processing a page rolling event by utilizing a real event processing mechanism, and acquiring rolling position and rolling speed information of page rolling in real time by adding a rolling event monitor; when the rolling position and the rolling speed information of page rolling meet the paging condition, using a useEffect hook of the act to load data required by paging, and after the data acquisition is completed, using usesite to update the data state of the act component; and dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence by utilizing a component rendering mechanism of the act, and when the data is required to be displayed by a Table, displaying the data by using a Table component in the ant. According to the scheme, the fact is adopted as a front-end framework, usesite is fully utilized to efficiently manage data and page rolling information, and useEffect is utilized to acquire required data during component loading, so that the performance and user experience of the system are improved.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings that are needed in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and that other drawings can be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic flow chart of a method for rolling and paging Table in practice according to an embodiment of the present invention;
FIG. 2 is a schematic flow chart of another method for rolling and paging Table in practice according to an embodiment of the present invention;
FIG. 3 is a schematic diagram of a device for rolling and paging Table in practice according to an embodiment of the present invention;
fig. 4 is a schematic diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
Embodiments of the present invention will be described in detail below with reference to the accompanying drawings.
Other advantages and effects of the present disclosure will become readily apparent to those skilled in the art from the following disclosure, which describes embodiments of the present disclosure by way of specific examples. It will be apparent that the described embodiments are merely some, but not all embodiments of the present disclosure. The disclosure may be embodied or practiced in other different specific embodiments, and details within the subject specification may be modified or changed from various points of view and applications without departing from the spirit of the disclosure. It should be noted that the following embodiments and features in the embodiments may be combined with each other without conflict. All other embodiments, which can be made by one of ordinary skill in the art without inventive effort, based on the embodiments in this disclosure are intended to be within the scope of this disclosure.
It is noted that various aspects of the embodiments are described below within the scope of the following claims. It should be apparent that the aspects described herein may be embodied in a wide variety of forms and that any specific structure and/or function described herein is merely illustrative. Based on the present disclosure, one skilled in the art will appreciate that one aspect described herein may be implemented independently of any other aspect, and that two or more of these aspects may be combined in various ways. For example, an apparatus may be implemented and/or a method practiced using any number of the aspects set forth herein. In addition, such apparatus may be implemented and/or such methods practiced using other structure and/or functionality in addition to one or more of the aspects set forth herein.
It should also be noted that the illustrations provided in the following embodiments merely illustrate the basic concepts of the disclosure by way of illustration, and only the components related to the disclosure are shown in the drawings and are not drawn according to the number, shape and size of the components in actual implementation, and the form, number and proportion of the components in actual implementation may be arbitrarily changed, and the layout of the components may be more complicated.
In addition, in the following description, specific details are provided in order to provide a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects may be practiced without these specific details.
The embodiment of the disclosure provides a method for rolling and paging a Table in a React. The Table scrolling paging method in the practice provided in the present embodiment may be executed by a computing device, which may be implemented as software or as a combination of software and hardware, and the computing device may be integrally provided in a server, a terminal device, or the like.
Referring to fig. 1 and fig. 2, an embodiment of the present disclosure provides a Table rolling paging method in act, including:
s101, selecting to use a reaction as a front end framework component to create, and creating a required reaction component, wherein the reaction component comprises a page component and a sub-component.
React is a JavaScript library for building user interfaces that is open to Facebook, and is focused on views in the MVC architecture. So that the fact is easy to fuse with the existing development stack of the developer.
The act component is the smallest building block of an act application that is reusable, self-contained, and can be combined into larger components. In React, components are written using JavaScript or TypeScript.
In the reaction, a function component and a class component are used for front-end framework component creation, wherein the function component is written by using a function grammar and is used for constructing UI elements, state management is not performed, a complex UI is constructed by the class component, and the state of the component is managed by using a life cycle method and state attribute of the reaction.
S102, using a usesite hook of the React to manage the data state inside the component, defining and initializing state variables where the data needs to be stored and updated, and then using a usesite returned state and an update function to realize data management.
usesite is a hook for a act to add local state in a function component. Class components and this state are commonly used in the prior art to manage the state of the components, and after usesite is used, the state can be more conveniently added in the function components.
In use, useState returns a state value and a function setCount to update the state, which correspond to the state value and the function to update the state, respectively, and when the state changes, the action re-renders the component.
S103, utilizing a real event processing mechanism to monitor and process page scrolling events, and acquiring scrolling position and scrolling speed information of page scrolling in real time by adding a scrolling event monitor.
The event processing mechanism of the reaction mainly comprises event monitoring, event synthesis, event bubbling and event triggering, is used for monitoring and processing page rolling events, and acquires the rolling position and the rolling speed information of page rolling in real time by adding a rolling event monitor.
Event monitoring: the reaction binds the event to the DOM node or document object through the event monitor, and registers a corresponding callback function through the event type for processing the logic after the event triggering.
Event synthesis: when an event is triggered, the action synthesizes an event object and a corresponding callback function into an event object, and then distributes the event object to a corresponding component for processing through an event distributor.
Event bubbling: the event bubbling mechanism of the browser is the basis for realizing event bubbling by the fact. When an event of a component is triggered, a act bubbles the event object up to the ancestor component until the outermost component, and triggers the corresponding event handling function layer by layer.
Event triggering: when an event is triggered, the action will execute the corresponding callback function according to the declaration period function of the component and the event processing function of the component instance. In the callback function, event bubbling and triggering of default events are prevented by event. StopPropagation ().
S104, when the rolling position and the rolling speed information of page rolling meet the paging condition, using a useEffect hook of the act to load data required by paging, and after the data acquisition is completed, using usesite to update the data state of the act component.
The scroll position and scroll speed of the user on the page can be used for judging whether the paging operation is needed to be carried out on the table, and when the paging content needs to be loaded, the user effect hook of the act can be used for loading data needed by paging.
The first parameter of useEffect is a side effect function that is automatically performed after component rendering. If the side effect function returns a function, this returned function is executed when the component is uninstalled, for clearing the side effect.
useEffect is used to replace the component lifecycle method. Specifically, the exact. Component componentDidMount, componentDidUpdate and componentWillUnmount method is replaced with useEffect. For this purpose, useEffect may be used to send network requests or read local files to obtain the data needed for form paging.
In the process of dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence, the acquired data can be displayed on a plurality of pagesWord segmentation is carried out on the content to be displayed on the surface to obtain a data element set；
Calculating a neighborhood value of a data element in the data element set:
where n is the number of data elements,representing the ith data element in the set of data elements,representing data elementsIs used to determine the neighborhood value of (1),representing the neighborhood value adjustment parameters,representing data elementsAnd data elementsDistance between them.
According to a specific implementation manner of the embodiment of the present disclosure, the dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence further includes:
computing data elements in a set of data elementsRanking value of (2)：
Based on data elementsRanking value of (2)Data element setPerforming descending order arrangement, respectively displaying the data element sets subjected to the descending order arrangement on a plurality of pages,parameters are adjusted for similarity.
S105, dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence by utilizing a component rendering mechanism of the act, and when the data is required to be displayed in a form, displaying the data by using a Table component in the ant.
anti is a compact-based UI library that provides a number of practical components, including Table components, for data presentation. Specifically, examples of Table components of the ant are as follows:
jsximport { Table } from 'antd';
const data = [
{
key: '1',
name, 'Zhang Sany',
age: 32,
address is 'mountain lake park west way No. 1',
},
{
key: '2',
name, 'Liqu',
age: 42,
address is 'mountain lake park west way No. 1',
},
{
key: '3',
name is 'Wangwu',
age: 32,
address is 'mountain lake park west way No. 1',
},
];
const columns = [
{
title: 'name',
dataIndex: 'name',
key: 'name',
},
{
title: 'age',
dataIndex: 'age',
key: 'age',
},
{
title, 'address',
dataIndex: 'address',
key: 'address',
},
];
<Table columns={columns} dataSource={data} />;
in the Table component in ant, data, which is an array of objects, each corresponding to a row in the Table, and column definition columns may be defined.
The invention adopts the reaction as the front end framework, fully utilizes usesite to efficiently manage data and page rolling information, and simultaneously utilizes useEffect to acquire required data when the component is loaded so as to improve the performance and user experience of the system.
According to a specific implementation manner of the embodiment of the present disclosure, the loading data required for paging by using the exact useEffect hook includes:
and the data caching and lazy loading modes are adopted, so that the page load is reduced and the loading speed is improved.
According to a specific implementation of an embodiment of the disclosure, the method further includes:
when the data is empty, a corresponding prompt is displayed on the interface.
According to a specific implementation of an embodiment of the disclosure, the method further includes:
judging whether the operation executed by the user needs to reload data or not;
if so, the data reload operation is performed by the logic that triggers the interface to request or recall the data acquisition.
According to a specific implementation of an embodiment of the disclosure, the method further includes:
receiving homepage data transmitted by an upper layer assembly, and realizing data transmission and utilization;
after the homepage data are intercepted, data storage and cleaning are carried out, and the display data quantity in the page visual range is calculated.
According to a specific implementation of an embodiment of the disclosure, the method further includes:
when a user executes more pull-down loading operations, checking whether the stored data has more data to be displayed;
if more data to be displayed exist, the data display is carried out again;
if no data without more exist, an interface request is initiated;
if the interface returns the data, the data is input again;
if the interface has no data available, the rolling paged rendering is completed for the Table in React.
According to a specific implementation manner of the embodiment of the present disclosure, the dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence includes:
word segmentation processing is carried out on the content to be displayed on a plurality of pages to obtain a data element set；
Calculation of
Where n is the number of data elements,representing the ith data element in the set of data elements,representing data elementsIs used to determine the neighborhood value of (1),representing the neighborhood value adjustment parameters,representing data elementsAnd data elementsDistance between them.
According to a specific implementation manner of the embodiment of the present disclosure, the dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence further includes:
computing data elements in a set of data elementsRanking value of (2)：
Based on data elementsRanking value of (2)Data element setPerforming descending order arrangement, respectively displaying the data element sets subjected to the descending order arrangement on a plurality of pages,parameters are adjusted for similarity.
Corresponding to the above method embodiment, referring to fig. 3, the embodiment of the present invention further discloses a Table rolling paging device 30 in act, including:
a creation module 301, configured to select to use a reaction as a front end framework component to create a desired reaction component, where the reaction component includes a page component and a sub-component;
a definition module 302, configured to use a usesite hook of a reaction to manage a data state inside a component, define and initialize a state variable where data needs to be stored and updated, and then use a usesite returned state and an update function to implement data management;
an obtaining module 303, configured to monitor and process a page scrolling event by using a real event processing mechanism, and obtain, by adding a scrolling event monitor, scrolling position and scrolling speed information of page scrolling in real time;
an updating module 304, configured to load data required for paging using a useEffect hook of the action when the scrolling position and scrolling speed information of page scrolling satisfy the paging condition, and update the data state of the action component using useState after the data acquisition is completed;
the display module 305 is configured to dynamically display the acquired data on the page by using a component rendering mechanism of act, and when the data needs to be displayed in a Table, use a Table component in ant to display the data.
Referring to fig. 4, an embodiment of the present invention also provides an electronic device 60, including:
at least one processor; the method comprises the steps of,
a memory communicatively coupled to the at least one processor; wherein,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of Table scrolling paging in act in the method embodiment described above.
Embodiments of the present invention also provide a non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the foregoing method embodiments.
Embodiments of the present invention also provide a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions that, when executed by a computer, cause the computer to perform the method of Table scrolling paging in practice in the method embodiments described above.
Referring now to fig. 4, a schematic diagram of an electronic device 60 suitable for use in implementing embodiments of the present disclosure is shown. The electronic devices in the embodiments of the present disclosure may include, but are not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and the like, and stationary terminals such as digital TVs, desktop computers, and the like. The electronic device shown in fig. 4 is merely an example and should not be construed to limit the functionality and scope of use of the disclosed embodiments.
As shown in fig. 4, the electronic device 60 may include a processing means (e.g., a central processing unit, a graphics processor, etc.) 601, which may perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 602 or a program loaded from a storage means 608 into a Random Access Memory (RAM) 603. In the RAM 603, various programs and data necessary for the operation of the electronic device 60 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other through a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.
In general, the following devices may be connected to the I/O interface 605: input devices 606 including, for example, a touch screen, touchpad, keyboard, mouse, image sensor, microphone, accelerometer, gyroscope, etc.; an output device 607 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 608 including, for example, magnetic tape, hard disk, etc.; and a communication device 609. The communication means 609 may allow the electronic device 60 to communicate with other devices wirelessly or by wire to exchange data. While fig. 4 shows the electronic device 60 with various means, it is to be understood that not all of the illustrated means are required to be implemented or provided. More or fewer devices may be implemented or provided instead.
In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from a network via communication means 609, or from storage means 608, or from ROM 602. The above-described functions defined in the methods of the embodiments of the present disclosure are performed when the computer program is executed by the processing device 601.
The foregoing is merely illustrative of the present invention, and the present invention is not limited thereto, and any changes or substitutions easily contemplated by those skilled in the art within the scope of the present invention should be included in the present invention. Therefore, the protection scope of the invention is subject to the protection scope of the claims.
Claims (8)
1. A method for rolling and paging a Table in a reaction is characterized by comprising the following steps:
selecting to use a reaction as a front end framework component to create, and creating a required reaction component, wherein the reaction component comprises a page component and a sub-component;
using a usesite hook of the act to manage the data state inside the component, defining and initializing state variables where data is required to be stored and updated, and then using a state returned by usesite and an update function to realize data management;
monitoring and processing a page rolling event by utilizing a real event processing mechanism, and acquiring rolling position and rolling speed information of page rolling in real time by adding a rolling event monitor;
when the rolling position and the rolling speed information of page rolling meet the paging condition, using a useEffect hook of the act to load data required by paging, and after the data acquisition is completed, using usesite to update the data state of the act component;
dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence by utilizing a component rendering mechanism of the act, and when the data is required to be displayed by a form, displaying the data by using a Table component in the ant; wherein the method comprises the steps of
The dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence comprises the following steps:
word segmentation processing is carried out on the content to be displayed on a plurality of pages to obtain a data element set；
Calculating a neighborhood value of a data element in the data element set:
where n is the number of data elements,representing the ith data element in the set of data elements, etc.>Representing data element +.>Is used to determine the neighborhood value of (1),/>representing neighborhood value adjustment parameters, ">Representing data element +.>And data element->A distance therebetween;
computing data elements in a set of data elementsRanking value->：
Based on data elementsRanking value->Data element set->Performing descending order arrangement, and respectively displaying the descending order arranged data element sets on a plurality of pages,/L->Parameters are adjusted for similarity.
2. The method of claim 1, wherein the using the use effect hook of act to load data required for paging comprises:
and the data caching and lazy loading modes are adopted, so that the page load is reduced and the loading speed is improved.
3. The method according to claim 2, wherein the method further comprises:
when the data is empty, a corresponding prompt is displayed on the interface.
4. A method according to claim 3, characterized in that the method further comprises:
judging whether the operation executed by the user needs to reload data or not;
if so, the data reload operation is performed by the logic that triggers the interface to request or recall the data acquisition.
5. The method according to claim 4, wherein the method further comprises:
receiving homepage data transmitted by an upper layer assembly, and realizing data transmission and utilization;
after the homepage data are intercepted, data storage and cleaning are carried out, and the display data quantity in the page visual range is calculated.
6. The method of claim 5, wherein the method further comprises:
when a user executes more pull-down loading operations, checking whether the stored data has more data to be displayed;
if more data to be displayed exist, the data display is carried out again;
if no data without more exist, an interface request is initiated;
if the interface returns the data, the data is input again;
if the interface has no data available, the rolling paged rendering is completed for the Table in React.
7. A device for rolling and paging a Table in practice, comprising:
the system comprises a creation module, a processing module and a processing module, wherein the creation module is used for selecting to use a reaction as a front end framework component to create a required reaction component, and the reaction component comprises a page component and a sub-component;
the definition module is used for managing the data state in the component by using a usesite hook of the act, defining and initializing state variables at the place where data is required to be stored and updated, and then realizing data management by using a usesite returned state and an update function;
the acquisition module is used for utilizing a real event processing mechanism to monitor and process page scrolling events, and acquiring scrolling position and scrolling speed information of page scrolling in real time by adding a scrolling event monitor;
the updating module is used for loading data required by paging by using a useEffect hook of the action when the rolling position and the rolling speed information of page rolling meet the paging condition, and updating the data state of the action component by using useState after the data acquisition is completed;
the display module is used for dynamically displaying the acquired data on the page by utilizing a component rendering mechanism of the act, and when the data is required to be displayed by the form, the data is displayed by using a Table component in the ant; wherein the method comprises the steps of
The dynamically displaying the acquired data on a plurality of pages according to a preset paging sequence comprises the following steps:
word segmentation processing is carried out on the content to be displayed on a plurality of pages to obtain a data element set；
Calculating a neighborhood value of a data element in the data element set:
where n is the number of data elements,representing the ith data element in the set of data elements, etc.>Representing data element +.>Neighborhood value of>Representing neighborhood value adjustment parameters, ">Representing data element +.>And data element->A distance therebetween;
computing data elements in a set of data elementsRanking value->：
Based on data elementsRanking value->Data element set->Performing descending order arrangement, and respectively displaying the descending order arranged data element sets on a plurality of pages,/L->Parameters are adjusted for similarity.
8. An electronic device, the electronic device comprising:
at least one processor; the method comprises the steps of,
a memory communicatively coupled to the at least one processor; wherein,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of Table rolling paging in practice of any one of the preceding claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311475533.0A CN117194828B (en) | 2023-11-08 | 2023-11-08 | Table rolling paging method and device in reaction and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311475533.0A CN117194828B (en) | 2023-11-08 | 2023-11-08 | Table rolling paging method and device in reaction and electronic equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117194828A CN117194828A (en) | 2023-12-08 |
| CN117194828B true CN117194828B (en) | 2024-02-06 |
Family
ID=89002054
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311475533.0A Active CN117194828B (en) | 2023-11-08 | 2023-11-08 | Table rolling paging method and device in reaction and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117194828B (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2021221856A1 (en) * | 2020-04-30 | 2021-11-04 | Microsoft Technology Licensing, Llc | Browser based visual debugging |
| CN113704653A (en) * | 2021-07-16 | 2021-11-26 | 苏州浪潮智能科技有限公司 | Data display method and related device |
| CN114356327A (en) * | 2021-12-29 | 2022-04-15 | 上海万物新生环保科技集团有限公司 | React visual area rendering method and device |
| CN115408095A (en) * | 2022-11-02 | 2022-11-29 | 北京滴普科技有限公司 | Method and system for displaying tree data with large data volume based on dynamic paging technology |
| CN116821534A (en) * | 2023-06-16 | 2023-09-29 | 上海基玉远达信息科技股份有限公司 | Method and system for positioning webpage based on rolling loading |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20230252233A1 (en) * | 2021-03-29 | 2023-08-10 | Comake, Inc. | Methods and systems for shared language framework to maximize composability of software, translativity of information, and end-user independence |
-
2023
- 2023-11-08 CN CN202311475533.0A patent/CN117194828B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2021221856A1 (en) * | 2020-04-30 | 2021-11-04 | Microsoft Technology Licensing, Llc | Browser based visual debugging |
| CN113704653A (en) * | 2021-07-16 | 2021-11-26 | 苏州浪潮智能科技有限公司 | Data display method and related device |
| CN114356327A (en) * | 2021-12-29 | 2022-04-15 | 上海万物新生环保科技集团有限公司 | React visual area rendering method and device |
| CN115408095A (en) * | 2022-11-02 | 2022-11-29 | 北京滴普科技有限公司 | Method and system for displaying tree data with large data volume based on dynamic paging technology |
| CN116821534A (en) * | 2023-06-16 | 2023-09-29 | 上海基玉远达信息科技股份有限公司 | Method and system for positioning webpage based on rolling loading |
Non-Patent Citations (1)
| Title |
|---|
| 基于React组件快速构建网站前端;张根 等;电脑知识与技术(第15期);第125-127页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117194828A (en) | 2023-12-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8949739B2 (en) | Creating and maintaining images of browsed documents | |
| CN109857486B (en) | Method, device, equipment and medium for processing program page data | |
| AU2014308633B2 (en) | Swipe toolbar to switch tabs | |
| CN111931472B (en) | Page table rendering method and device, electronic equipment and computer readable medium | |
| CN113238706B (en) | View display method, device, equipment and medium | |
| CN111339463A (en) | List data display method and device and electronic equipment | |
| CN110647369B (en) | Page dynamic display method and device, mobile terminal and storage medium | |
| CN111273830A (en) | Data display method and device, electronic equipment and computer readable medium | |
| CN110825481A (en) | Method and device for displaying page information corresponding to page tag and electronic equipment | |
| CN113238688B (en) | Form display method, device, equipment and medium | |
| CN117194828B (en) | Table rolling paging method and device in reaction and electronic equipment | |
| CN110618811B (en) | Information presentation method and device | |
| CN115758004A (en) | Webpage table display method and device, computer readable medium and electronic equipment | |
| CN111274513B (en) | Window display method, device, terminal and storage medium | |
| CN113961298A (en) | Page switching method, device, equipment and medium | |
| CN113704334A (en) | Target data display method, device, equipment and storage medium | |
| CN113204557A (en) | Electronic form importing method, device, equipment and medium | |
| CN112711457A (en) | Method and device for field drawing and electronic equipment | |
| CN111190599A (en) | Method and device for realizing android self-defined soft keyboard by using Dialog and electronic equipment | |
| CN115033148B (en) | Document display method, device, electronic equipment and storage medium | |
| CN114327188B (en) | Form layout method, form layout device, electronic equipment and computer readable medium | |
| CN113835791B (en) | Method and apparatus for presenting hierarchical relationships of view components | |
| US20220253295A1 (en) | Software widget installation on a client device | |
| CN117707369A (en) | Display method and device and electronic equipment | |
| CN117891548A (en) | Information display method, device, electronic equipment and storage medium |
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 |