In the previous article, we introduced the list page of member management and the development of new functions. In this article, we will continue our member management function and introduce the details, modification and deletion functions.
1 Create a detail page
Open the console, click the icon to create a page, and create a details page
2 Data Details Component
We also use the data container component to build the details page, here we choose the data details component. Drag the details component into the editing area
, select our data model, the component will automatically identify the fields of our data source, and match the required components according to the type of the field. The fields
of the data source are divided into two categories, one is our custom, One is the system comes with. On the details page, we usually only keep our custom fields, and the redundant fields generated by these systems are deleted. When deleting, you only need to delete the corresponding component in the outline tree on the left.
3 URL parameter passing
On the data details page, when we filter the data, we need to filter the data according to the parameters passed in from the page. How to set URL parameters? Select our page component in the outline number, click New URL parameter in the property panel on the right
to create a new ID parameter
4 Binding filter conditions
After the URL parameters are established, we need to let our data details component know which parameter is passed in. Select the data details component and set data filtering, the condition is that the data identifier is equal to our URL parameter
5 Configuration page jump
After the details page is configured, we need to be able to jump from the list page to the details page. In the page list on the left, switch to the member list page
Select the common container of our list and set the click event
Select to open the page
You need to select our member details page, and to pass in specific parameters, click the fx expression next to the parameter
Just pass in our data ID
6 Configuration modification and deletion buttons
Our modification and deletion functions need to be set on the details page. Select the grid layout, add a row down Select the row
, change the number of columns to 2
and add buttons to the column, set the title of a button to modify, and set the title of a button to delete
7 Modify function development
To modify the function, we first need to create a modification page
. Add a form container on the modification page, select the scene to update, and select the member information for the data model.
When modifying, we also need to pass in parameters, create a new ID
form container data identifier, and set it as our URL parameter
return Go to the details page, set an event for the modification button, open our modification page, and pass in parameters
8 Delete function development
The delete function does not need to set a page, set an event for the delete button, call the delete method of the data source, and return to the previous page after the deletion is successful
Summarize
In this article, we introduced the details, modification, and deletion function development. Mainly with the help of the form container and data detail components of the data container, you must be proficient in the specific use of URL parameters to build management pages as needed.