You can see this number 1 article “unintentional government, list function analysis” is about list function. Although I wrote it carefully at the time, it was basically explained around the broad term “list function.”
Recently, I am working on a background management system match-schedule for sports events, and I have more experience in managing background list. So I want to more popular and detailed elaboration, my heart a background management system list should have what functions.
Too much detail. Take a screenshot of the basic list page and then make a feature list.
Figure 1 (marked here for convenience) :
Box kuang in FIG. 1 is part of the list page of the background management system, it will cover the list page of every class. Of course, there are far more details, which will be illustrated in the screenshot below.
From top to bottom, left to right:
-
Urls are readable and easy to understand
-
The activated navigation bar should identify the activated location with a logo or highlight so that users can easily identify where they clicked
-
The entire list of names HTML h1 tags, focus notes
-
Current list data (MetaData) The total number of entries in the current list. The current page displays the number of entries
-
The page breadcrumb navigates where the current list is located in the hierarchy of the system
-
Buttons to configure the current table (explained separately below)
-
For a long time, I debated whether to put these buttons at the top or the bottom of the list page, and chose the top. The advantage is that no matter how many items you have on your page, you can select them and execute them directly at the top instead of having to drag them to the bottom. Douying: “Very convenient and easy to use, I use it all the time.”
-
The placeholder search box, which you’ll need for almost every data table page, usually appears in the top left or right side of the table function button. A ‘placeholder’ placeholder will be better for indicating what to search for
-
The header checkbox is used to select all or none of the items on the current page after the user filters or searches
-
Table header sort table th, whether the field can be sorted, the current sort way, how to cancel the sort
-
Table content A link Title link should be explained with Titile, so that users can know what will happen after clicking when the mouse hangs over it (example: AG super game)
-
Buttons for how many items to display per page (not shown in this image, but specified below)
-
When there are too many data items in the list, it is impossible for users to view them in separate screens. Moreover, when the program takes out a large amount of data at one time, the server query will be slow, and the front-end rendering speed will be greatly reduced (there is a risk that the user’s browser will stop responding in the rendering process). It is recommended that the display size of each page be 10-30.
These are the instructions in Figure 1. I think each node needs to be carefully studied. Such as font color, overall page cleanliness, link color, hints, etc… Let’s move on to Figure 2.
Figure 2:
-
The remaining data in the selected list currently only shows 11 data, a total of 47 data, and there are 36 data not taken out in the server, but I need to select all of them
-
After selecting the item, the relevant action button activates the comparison of ‘Figure 1’ and ‘Figure 2’. One of the buttons here is forbidden and the other one is clickable
-
Filtering classification here is not a general function, but since it is mentioned, for example, the user clicks the button, then the button should be highlighted or activated, all for the convenience of user identification
-
The selected table data items should be highlighted. In this screenshot, some items are not unselected for comparison. If you are reading ‘Figure 1’, the selected items are in a light green wave
-
Displays the number of items per page that have received queries from relevant users. This is based on a certain data width dynamic change, many background systems are fixed, such as 10,20,50,100,200 and so on increment. Here, I calculated according to the number of buttons, calculated according to the total number of data items, apportionedto the buttons of 5 steps, each page displays a maximum of 200 limit policies
These are all shown in Figure 2, which are related changes of the page display after the following user operations, as well as prompts, as well as strategies for displaying the number of items, etc., and are briefly explained in Figure 3 below (Figure 2-1).
Figure 3:
When the user selects the rest of the entries, the front end selects all of the entries under the filter condition. The front end gives the POST form a name value such as’ Select_ALL=”true”, so that the identity is checked when the operation is posted to the back end to reduce the process of checking the database again.
Figure 4:
List function just need the search function, here I highlight my search results, while the search box fills in the search value. Lock the user’s search value, and only this URL is accessed, so this is going to be populated with that value. Search side I am full text fuzzy matching, only a list of fields matching keywords will be treated as one of the results. Of course, it would be even better to have an optional action to locate the search column.
To sum up, the above mentioned may not be detailed enough to have 18 details, I hope to have a friend in need of help.
Please also pay attention to support the author