Trong hai bài viết mà mình đã đăng là: Tìm kiếm & Liệt kê và Kết hợp Search-Container & Cơ sở dữ liệu, mình đã hướng đẫn cách thứ để hiển thị dữ liệu dưới dạng bảng. May mắn thay, Liferay đã cung cấp sẵn cho chúng ta một cách thức để làm việc này nên tạo ra cho chương trình của chúng ta một sự thống nhất nhất định (khi dự án có nhiều người tham gia).
Tuy nhiên, hai bài viết hướng đẫn của mình chỉ mới tập trung vào việc hiển thị dữ liệu mà thôi. Ta thường có xu hướng thao tác trực tiếp trên các dữ liệu được hiển thị này và Liferay cũng cho phép chúng ta tương tác lên từng dòng dữ liệu được hiển thị trong Search-Container. Bài viết này là một hướng dẫn nhỏ để bạn có thể thao tác trên từng dòng, hoặc trên nhiều dòng dữ liệu trong Search-Container.
Mình sẽ phân ra làm hai loại và chúng ta sẽ đi cài đặt từng loại một nhé. Loại thứ nhất là thao tác trên một dòng và loại thứ hai là thao tác trên nhiều dòng. Mình sử dụng lại project đã viết ở bài Kết hợp Search-Container & Cơ sở dữ liệu để minh họa cho các trường hợp mình nói dưới đây, bạn có thể xem chi tiết portlet tại đây.
Thao tác trên một dòng
Thực hiện thao tác như sửa, xóa, cập nhât,... một bản ghi đã được hiển thị trong search-container là thao tác hay được sử dụng nhất. Đối với trường hợp này, Liferay cung cấp cho chúng ta hai cách làm đó là: 1) nếu ta chỉ cần thực hiện duy nhất một thao tác ta chỉ cần tạo một URL với tham số phù hợp và đặt nó là giá trị cuả thuộc tính href, 2) trường hợp nếu cần thực hiện nhiều thao tác trên một dòng thì ta có thể sử dụng thêm thẻ search-container-column-jsp để đình nghĩa nhiều thao tác. Hãy xem từng trường hợp nhé:
Thuộc tính href
Xem lại bài viết Kết hợp Search-Container & Cơ sở dữ liệu, ta thấy rằng khi deploy portlet vào máy chủ ta sẽ được kết quả như sau:
 |
| Search-container hiển thị dữ liệu mặc định |
Lúc này, search-container chỉ hiển thị dữ liệu thành từng dòng. Để thao tác với các dữ liệu này, trong phiên bản 6.2, Liferay cung cấp cho chúng ta các thẻ để hiển thị dữ liệu của từng ô đó là: search-container-column-button, search-container-column-date, search-container-column-jsp, search-container-column-text, search-container-column-status. Trong các thẻ này có thuộc tính href nếu giá trị của thuộc tính này khác rỗng thì trên ô tương ứng sẽ hiển thị liên kết như hình dưới:
 |
| Search-container hiển thị dữ liệu có thể thao tác được |
So sánh hai hình trên, ta thấy rằng sau khi cung cấp giá trị cho thuộc tính href (khác rỗng) thì mỗi ô sẽ biến thành một liên kết, các liên kết này sẽ chứa các tham số cần thiết cho mục đích cụ thể của bạn. Giả sử, mình muốn khi click vào liên kết này sẽ hiển thị thông tin chi tiết của sinh viên được chọn thì bạn hãy quan sát đoạn code ở dưới đây nhé:
Bạn hãy để ý từ dòng 24 đến 27, ở đây, mình muốn hiển thị thông tin chi tiết của một sinh viên thì mình chỉ cần sử dụng RenderURL (portlet:renderURL). Bạn có thể dùng ActionURL (portlet:actionURL) hoặc ResourceURL (portlet:resourceURL) tùy thuộc vào yêu cầu của bài toán.
Ở dòng số 25, mình truyền vào một tham số là id của một student và tham số mvcPath là /html/actions/detail.jsp (ở dòng 26). Ở file, detail.jsp ta sẽ lấy lại id của student và hiển thị thông tin chi tiết của sinh viên tương ứng với dòng dữ liệu bạn đã chọn.
Ở các dòng 29, 31, 33 và 35, mình đặt giá trị của thuộc tính href là tên của URL mà mình muốn thực hiện thao tác (viewDetailURL).
Thẻ search-container-column-jsp
Ta không thể sử dụng thuộc tính href để thực hiện nhiều hơn một thao tác trên một dòng. Do đó, Liferay cung cấp cho chúng ta thêm một cách nữa để cho phép người dùng có thể thực hiện nhiều thao tác trên một dòng. Thực tế, thẻ search-container-column-jsp cho phép chúng ta đính kèm (include) một file jsp vào một ô trong search-container và trong trường hợp này file đính kèm sẽ chứa các thao tác mà chúng ta mong muốn như là sửa, xóa,... Hình dưới là một ví dụ khi ta muốn áp dụng nhiều thao tác trên một dòng:
 |
| Nhiều thao tác trên một dòng |
Như bạn thấy, ta sẽ thêm vào một cột và cột này sẽ chứa các thao tác ta cần thêm vào. Trong trường hợp này, ta thêm vào ba thao tác trên mỗi dòng là Chi tiết (để xem thông tin chi tiết tương ứng với việc click vào link trên dòng đó), Sửa (xửa thông tin sinh viên) và Xóa (xóa sinh viên khỏi cơ sở dữ liệu). Vậy làm thế nào để được như hình trên? Ta hãy xem hai đoạn code dưới đây nhé:
Như bạn thấy, đoạn code này chỉ khác với đoạn code trên ở dòng số 37 mà thôi. Ở dòng này, ta sử dụng thẻ <search-container:search-container-column-jsp> để đính kèm (include) file action.jsp có nội dung như sau:
Ta sẽ phân tích đoạn code này một chút:
- Dòng số 6: Mục đích của dòng này là mình sẽ lấy SearchContainer mà đang gọi file action.jsp.
- Dòng số 8-9: Lấy đối tượng Student tương ứng với dòng chúng ta chọn.
- Dòng 12-30: Mình sử dụng thẻ <liferay-ui:icon-menu> để tạo ra một danh sách các icon. Nếu có nhiều hơn một icon sẽ tự động co lại.
- Ta sử dụng thẻ <liferay-ui:icon> để hiện thị icon và URL tương ứng. Trong ví dụ này, ta có ba thao tác (hai thao tác Render (chi tiết và sửa) và một thao tác Action (xóa))
Bây giờ hãy deploy portlet của bạn lên máy chủ và kết quả sẽ được như hình trên. Source code đầy đủ bạn có thể tải về từ đây.
Không có nhận xét nào:
Đăng nhận xét