Liferay 6.2: Thao tác trên nhiều dòng trong search-container

English version

Trởi lại với bài Liferay: Thao tác trên từng dòng của search-container, chúng ta đã thêm được các thao tác vào từng dòng kết quả. Nhưng nếu muốn xử lý được nhiều hơn một dòng thì phải làm như thế nào? Giả sử, ta muốn xóa một lúc nhiều dòng chẳng hạn thì sẽ xử lý ra sao? Rất may, Liferay cung cấp cho chúng ta một số tiện ích rất thú vị để làm điều này, hãy cùng thảo luận nhé.

Như bạn thấy, kết quả cuối cùng của bài Liferay: Thao tác trên từng dòng của search-container được thể hiện bằng hình ảnh dưới đây:

Chúng ta sẽ sửa đổi lại mã nguồn của bài trước để thu được kết quả như hình dưới đây:

Như bạn thấy, mình đã thêm một cột mới vào bảng, các ô trong cột này có chứa một textbox, nếu bạn tick vào nó thì có nghĩa là dòng tương ứng được chọn. Và khi bạn nhấn vào nút Xóa thì ta sẽ thực hiện xóa các dòng mà ta đã chọn. Vậy, làm thế nào để đạt được kết quả mong muốn? Hãy xem đoạn code sau:

Bây giờ, hãy so sánh đoạn code trên với đoạn code của bài trước (xem ở đây). Ta thấy, chỉ có khách biệt ở 3 dòng mà thôi, mình sẽ chỉ ra từng dòng và phân tích ý nghĩa của nó nhé:

• Dòng số 11: ở đây mình khai báo một đối tượng mới rowChecker. Bạn có thể xem API của RowCheck tại đây.
• Dòng số 15: Tại dòng này mình thêm thuộc tính rowChecker vào (rowChecker="<%= rowChecker %>"). Nếu thuộc tính rowChecker không được khai báo Liferay sẽ không tự động thêm vào cột chứa các textbox như hình trên đâu.
• Dòng 46: Thêm vào một button, ở đây mình muốn thực hiện thao tác xóa hàng loạt nên mình cho thêm nút xóa.

Như vậy, về giao diện là hoàn chỉnh rồi, ta chỉ cần xử lý sự kiện khi nhấn vào nút Delete mà thôi. Hãy quan sát đoạn code sau nhé:

Bây giờ, ta tiếp tục so sánh hai đoạn code trên, bạn có thấy khác nhau gì không? Ta hay cùng quan sát nhé:

• Dòng 46: Thêm thuộc tính onClick để gọi đến hàm deleteStudents.
• Dòng 47: Thêm vào một thẻ input với kiểu là hidden. Vì khi chuyển dữ liệu xuống lớp dưới để xử lý thì ta cần phải truyền của form html, chính vì vậy, ta sẽ thêm thẻ này vào và lớp dưới sẽ bắt dữ liệu mà thẻ này mang để xử lý.
• Dòng 50-67: Ta sẽ định nghĩa hàm deleteStudents tại đây. Quan sát dòng 55, ta sẽ lấy id (trong trường hợp này là studentId) của các dòng được chọn bằng tiện ích Liferay.Util.listCheckedExcept với hai tham số là thên form (trong trường hợp này là fm) và id của nút chọn tất cả (nút checkbox ở dòng tiêu đề, mặc định là allRowIds). Tương tự, có thể lấy id của các bản ghi không được chọn bằng Liferay.Util.listUncheckedExcept.
• Dòng 57: Kiểm tra xem chúng ta có chọn dòng nào hay không và xác nhận việc xóa.
• Dòng 58: Nếu đồng ý xóa thì chúng ta sẽ lấy danh sách các id và gán cho thẻ deleteStudentId. Ở lớp dưới ta sẽ bắt được tham số này và thực hiện việc xóa (xem tại đây).
• Dòng 60: Ta thực hiện submit form và chờ đợi kết quả là những dòng ta chọn sẽ được xóa thành công.

Kết luận

Nội dung của bài này kết hợp với bài Liferay: Thao tác trên từng dòng của search-container đã cung cấp cho bạn nhưng công cụ rất tốt giúp cho bạn viết được những ứng dụng thống nhất, chuyên nghiệp. Bạn có thể xem mã nguồn đầy đủ tại Github.