Self-adaptive multi-column layout dynamic search form system

Abstract

The invention relates to the technical field of intelligent search, and discloses a self-adaptive multi-column layout dynamic search form system which comprises a system module assembly, the system module assembly comprises an algorithm module, a label width management module, a dynamic unfolding and folding module and a paging type selector module, the algorithm module is a column number calculation algorithm, and the label width management module is a label width management module. According to the method, the optimal column number of form layout is dynamically determined through a calculate Columns function, and when a column number calculation algorithm works, firstly, the width of a container and the width of a client side are obtained for comparative analysis. According to the method, the maximum width of each column of labels is automatically calculated, alignment of the labels in the same column is ensured, the visual uniformity is improved, the label space is dynamically allocated, intelligent adjustment is performed according to the label content length, efficient utilization of the space is realized, alignment of the labels in different columns can be ensured, the professionality and consistency of an overall interface are kept, and the user experience is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of intelligent search, and particularly to a dynamic search form system with an adaptive multi-column layout. Background Art

[0002] The modern communication era has brought about great development of wired and wireless networks. Computer networks, television networks, and telephone networks are undergoing unprecedented technological development driven by customer needs. Wireless and mobile networking technologies such as cellular phone technology have addressed relevant customer needs while providing more flexibility and directness for information transmission.

[0003] Current and future networking technologies continue to facilitate the convenience of information transmission and provide convenience for users. One area that requires increased convenience of information transmission and providing convenience for users involves providing information retrieval in a network. Accordingly, multiple devices associated with each of the different entities can be arranged to communicate with each other to locate and affect information transmission. Specifically, mechanisms have been developed to enable devices such as mobile terminals to perform searches for information or content related to a specific query or keyword.

[0004] With the rapid development of enterprise-level Web applications, the search form, as an important entry for data query, has continuously increasing requirements for complexity and functionality. Traditional search forms have the following problems:

[0005] 1. The layout is not flexible enough and it is difficult to adapt to different screen sizes

[0006] 2. A large number of query conditions lead to page chaos

[0007] 3. The interaction experience of the selector component is poor

[0008] 4. The code reusability is poor and the maintenance cost is high

[0009] Therefore, there is an urgent need in the market for a search form solution that can adapt to the layout, has a good interaction experience, and is easy to maintain. Summary of the Invention

[0010] (1) Technical Problems to be Solved

[0011] In view of the deficiencies of the prior art, the present invention provides a dynamic search form system with an adaptive multi-column layout, which realizes the adaptive layout and efficient development of the search form through an intelligent layout algorithm and a component reuse mechanism.

[0012] (2) Technical Solutions

[0013] To achieve the above object, the present invention adopts the following technical solutions:

[0014] An adaptive multi-column layout dynamic search form system, including a system module assembly. The system module assembly includes an algorithm module, a label width management module, a dynamic expansion and collapse module, and a paged selector module. The algorithm module is a column number calculation algorithm, which dynamically determines the optimal number of columns for the form layout through the calculateColumns function. When the column number calculation algorithm is working, it first obtains the container width and compares it with the client width for analysis. When the container width exceeds 1200 pixels, the column number calculation algorithm automatically adopts a three-column layout to make full use of the widescreen space. When the container width is between 768 and 1200 pixels, the column number calculation algorithm adopts a two-column layout to ensure reasonable form element sizes. When the container width is less than 768 pixels, the column number calculation algorithm defaults to a one-column layout to ensure good display effects and operation experiences on mobile devices. The label width management module automatically calculates the maximum width of each column label. The dynamic expansion and collapse module calculates the default display quantity, intelligently determines the number of form items initially displayed according to the screen size and the number of form items, and the dynamic expansion and collapse module provides expansion and collapse controls. The paged selector module processes the selector data through the filterValue method.

[0015] Further, the label width management module dynamically allocates label space and intelligently adjusts it according to the label content length.

[0016] On the basis of the foregoing solution, the label width management module ensures the alignment of labels between different columns, maintaining the professionalism and consistency of the overall interface.

[0017] As a further solution of the present invention, the dynamic expansion and collapse module has a smooth transition animation, providing a smooth visual effect when switching between the expanded and collapsed states.

[0018] Further, when the filterValue method processes data, it first checks whether the system is in an asynchronous loading state. For asynchronous data, it resets the page number to 1 and sets the input value as the filtering condition, and then calls the getList method to obtain the filtered data list.

[0019] On the basis of the foregoing solution, when the filterValue method checks whether the system is in an asynchronous loading state, for the non-asynchronous mode, the system executes the local filtering logic.

[0020] Further, the paged selector module includes a paging navigation module and a result paging module.

[0021] The beneficial effects of the present invention are:

[0022] 1. In the present invention, the label width management module automatically calculates the maximum width of each column of labels, ensuring the alignment of labels within the same column, improving the visual neatness. The label width management module dynamically allocates label space, intelligently adjusts according to the length of label content, realizes efficient use of space, and can also ensure the alignment of labels between different columns, maintaining the professionalism and consistency of the overall interface and enhancing the user experience.

[0023] 2. In the present invention, the dynamic expansion and contraction module calculates the default display quantity, intelligently determines the number of form items to be initially displayed according to the screen size and the number of form items, and the dynamic expansion and contraction module provides expansion and contraction controls, enabling users to view more or fewer displayed form items according to their needs.

[0024] 3. In the present invention, the dynamic expansion and contraction module has a smooth transition animation, providing a smooth visual effect when switching between the expanded and contracted states, enhancing the user experience.

[0025] 4. In the present invention, through the filterValue method, efficient data filtering and option display are achieved, significantly improving the selector performance and user experience in scenarios with a large amount of data. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 FIG. is a schematic structural diagram of the system framework of a dynamic search form system with an adaptive multi-column layout proposed by the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0027] The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all of the embodiments. It should be noted that unless otherwise clearly specified and limited, the terms "installation", "connection", and "setting" should be understood in a broad sense. For those of ordinary skill in the art, the specific meanings of the above terms in this patent can be understood according to specific situations.

[0028] Embodiment 1

[0029] Refer to Figure 1, An adaptive multi-column layout dynamic search form system, including a system module assembly. The system module assembly includes an algorithm module, a label width management module, a dynamic expansion and contraction module, and a paging selector module. The algorithm module is a column number calculation algorithm, which dynamically determines the optimal number of columns for the form layout through the calculateColumns function. When the column number calculation algorithm is working, it first obtains the container width (containerWidth) and compares and analyzes it with the client width (this.$el.clientWidth). When the container width exceeds 1200 pixels, the column number calculation algorithm automatically adopts a 3-column layout to make full use of the widescreen space. When the container width is between 768 and 1200 pixels, the column number calculation algorithm adopts a 2-column layout to ensure reasonable form element sizes. When the container width is less than 768 pixels, the column number calculation algorithm defaults to a 1-column layout to ensure good display effects and operation experiences on mobile devices. The label width management module automatically calculates the maximum width of each column of labels to ensure the alignment of labels in the same column and improve the visual neatness. The dynamic expansion and contraction module calculates the default display quantity, intelligently determines the number of form items initially displayed according to the screen size and the number of form items, and the dynamic expansion and contraction module provides expansion and contraction controls, enabling users to view more or fewer displayed form items according to their needs. The paging selector module processes the selector data through the filterValue method.

[0030] In the present invention, the label width management module dynamically allocates label space, intelligently adjusts it according to the label content length, and realizes efficient use of space. The label width management module ensures the alignment of labels between different columns, maintains the professionalism and consistency of the overall interface, and improves the user experience. The dynamic expansion and contraction module has a smooth transition animation, providing a smooth visual effect when switching between the expanded and contracted states, and enhancing the user experience.

[0031] Embodiment 2

[0032] Refer to Figure 1, A dynamic search form system with an adaptive multi-column layout, including a system module assembly. The system module assembly includes an algorithm module, a label width management module, a dynamic expansion and contraction module, and a paging selector module. The algorithm module is a column number calculation algorithm, which dynamically determines the optimal number of columns for the form layout through the calculateColumns function. When the column number calculation algorithm is working, it first obtains the container width (containerWidth) and compares it with the client width (this.$el.clientWidth). When the container width exceeds 1200 pixels, the column number calculation algorithm automatically adopts a 3-column layout to make full use of the widescreen space. When the container width is between 768 and 1200 pixels, the column number calculation algorithm adopts a 2-column layout to ensure reasonable form element sizes. When the container width is less than 768 pixels, the column number calculation algorithm defaults to a 1-column layout to ensure good display effects and operation experiences on mobile devices. The label width management module automatically calculates the maximum width of each column's labels to ensure that the labels in the same column are aligned, improving the visual neatness. The dynamic expansion and contraction module calculates the default display quantity, intelligently determines the number of form items to be initially displayed based on the screen size and the number of form items, and the dynamic expansion and contraction module provides expansion and contraction controls, enabling users to view more or fewer displayed form items according to their needs. The paging selector module processes the selector data through the filterValue method.

[0033] In the present invention, the label width management module dynamically allocates label space, intelligently adjusts according to the label content length, realizes efficient use of space, ensures the alignment of labels between different columns, maintains the professionalism and consistency of the overall interface, and improves the user experience. The dynamic expansion and contraction module has a smooth transition animation, providing a smooth visual effect when switching between the expanded and collapsed states, enhancing the user experience.

[0034] In the present invention, when the filterValue method processes data, it first checks whether the system is in an asynchronous loading state (this.isAsync). For asynchronous data, it resets the page number to 1 and sets the input value as the filtering condition (this.params[this.filterVal] = value), and then calls the getList method to obtain the filtered data list.

[0035] In particular, when the filterValue method checks whether the system is in an asynchronous loading state, for the non-asynchronous mode, the system executes the local filtering logic, realizes efficient data filtering and option display, greatly improves the selector performance and user experience in the scenario of a large amount of data, and the paging selector module includes a paging navigation module and a result paging module.

[0036] The above are only the preferred specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present invention, according to the technical solution and inventive concept of the present invention, making equivalent substitutions or changes, shall be covered by the protection scope of the present invention.

Claims

1. An adaptive multi-column layout dynamic search form system, including a system module assembly, characterized in that, The system module assembly includes an algorithm module, a label width management module, a dynamic expansion and contraction module, and a paged selector module. The algorithm module is a column number calculation algorithm that dynamically determines the optimal number of columns for the form layout through the calculateColumns function. When the column number calculation algorithm is working, it first obtains the container width and compares it with the client width for analysis. When the container width exceeds 1200 pixels, the column number calculation algorithm automatically adopts a three-column layout to make full use of the widescreen space. When the container width is between 768 and 1200 pixels, the column number calculation algorithm adopts a two-column layout to ensure reasonable form element sizes. When the container width is less than 768 pixels, the column number calculation algorithm defaults to a one-column layout to ensure good display effects and operation experiences on mobile devices. The label width management module automatically calculates the maximum width of each column of labels. The dynamic expansion and contraction module calculates the default display quantity, intelligently determines the number of form items to be initially displayed based on the screen size and the number of form items, and the dynamic expansion and contraction module provides expansion and contraction controls. The paged selector module processes the selector data through the filterValue method.

2. The dynamic search form system with an adaptive multi-column layout according to claim 1, characterized in that, The label width management module dynamically allocates label space and intelligently adjusts it according to the label content length.

3. The dynamic search form system with an adaptive multi-column layout according to claim 2, wherein The label width management module ensures the alignment of labels between different columns, maintaining the professionalism and consistency of the overall interface.

4. An adaptive multi-column layout dynamic search form system according to claim 1, characterized in that, The dynamic expansion and contraction module has a smooth transition animation, providing a smooth visual effect when switching between the expanded and contracted states.

5. An adaptive multi-column layout dynamic search form system according to claim 1, characterized in that, When processing data, the filterValue method first checks whether the system is in an asynchronous loading state. For asynchronous data, it resets the page number to 1 and sets the input value as the filtering condition, and then calls the getList method to obtain the filtered data list.

6. The dynamic search form system with an adaptive multi-column layout according to claim 5, wherein When checking whether the system is in an asynchronous loading state, for the non-asynchronous mode, the system executes the local filtering logic in the filterValue method.

7. An adaptive multi-column layout dynamic search form system according to claim 1, characterized in that, The paged selector module includes a paging navigation module and a result paging module.

Images