Liferay 6.2: Action on multi-rows in Search-Container

Vietnam version

Come back with post Liferay: Actions on a row in Search Container, we have added the actions into each result row. However, you can not handle more than two rows at once. So, how do you do if you want to delete multi-row at a moment? Thankfully, Liferay has provided a powerful tool to do this. Let's read this post to get more details.

As you can see, the latest result of post Liferay: Actions on a row in Search Container is displayed by the following image:

We will modify the source of the previous post to get the result which is illustrated by the next picture:

As you can see, I have added a new column in the table, the cells in this column contain a textbox. If you mark on it, it means this row is selected. In the case of above picture, as soon as you click on Delete button, the program will delete all selected rows. So, how to get the expectation result? Let's see the following snippet:

Now, let's compare the above snippet with the one of the previous post (here). There are only there differences. I will show and analyze them:

• Line 11rs: I declared a new rowChecker object. You can see the API of RowChecker class at here.
• Line 15th: Now, I added rowChecker attribute at this line (rowChecker="<%= rowChecker %>"). If you do not add this attribute, Liferay Framework does not add the column which contains the checkboxes (like about image).
• Line 46th: Added a net button. In my case, I added Delete button to delete all selected rows.

Thus, the GUI is complete. We only net to adding the deleting event into Delete button. Take a look at following code:

Currently, we will compare two above snippet continually. Do you see the difference? Let's observe:

• Line 46th: Added onClick attribute to call deleteStudents function.
• Line 47th: Added a hidden tag. This tag will hold data to delete.
• Line 50th-67th: We defined deleteStudents function at here. We will get id value, at line 55th, (id is studentId in this situation) of selected rows by Liferay.Util.listCheckedExcept utility with two parameters (form name (fm) and select-all checkbox's id (the value default is allRowIds)). Similarly, you can get the id value of unselected rows by Liferay.Util.listUncheckedExcept utility.
• Line 57th: Check that at least one row is selected and confirm the deletion.
• Line 58th: If you accept the deletion. It will get the ids of the selected rows and store this value  on deleteStudentId tag. In controller layer, we will catch this value and implement the deletion (view detail at here).
• Line 60th: We called submit form function. The result is the selected row will be deleted.

Summary

The content of this and previous post (Liferay: Actions on a row in Search Container) provided a great tool to create the uniform and professional applications. Click here to get the full source code.