Võ Văn Hải's blog

Chỉ có một điều tuyệt đối đó là mọi thứ đều tương đối…

Sắp xếp dữ liệu hiển thị trong bảng

Sắp xếp dữ liệu trong bản là 1 công việc thường hay gặp khi làm việc với database. May mắn là với RichFaces chúng ta có thể dễ dàng làm được điều này. Sau đây là 1 ví dụ. Để cho bài viết hấp dẫn hơn, ta sử dụng dữ liệu về 7 kỳ quan mới của thế giới thay vì dữ liệu User hay Account nào đó.

Đầu tiên bạn cấu hình và tạo project như ở bài trước.

Tạo 1 backing bean có tên newWondersBean với 2 lớp có code như sau:
Lớp Wonder.java


package wonder;

public class Wonder {

private String name;

private String location;

private String imageUrl;

public Wonder(String name, String location, String imageUrl) {

this.name = name;

this.location = location;

this.imageUrl = imageUrl;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getLocation() {

return location;

}

public void setLocation(String location) {

this.location = location;

}

public String getImageUrl() {

return imageUrl;

}

public void setImageUrl(String imageUrl) {

this.imageUrl = imageUrl;

}

@Override

public String toString() {

return name;

}

}

Và lớp NewWondersBean.java

package wonder;import java.util.ArrayList;import javax.annotation.PostConstruct;public class NewWondersBean {

private ArrayList <Wonder> sevenNewWonders = new ArrayList <Wonder>();

@PostConstruct

public void init () {

sevenNewWonders = new ArrayList <Wonder>();

sevenNewWonders.add(new Wonder(“Chichen Itza”, “Mexico”, http://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Chichen-Itza-Castillo-Seen-From-East.JPG/90px-Chichen-Itza-Castillo-Seen-From-East.JPG&#8221;));

sevenNewWonders.add(new Wonder(“Christ the Redeemer”, “Brazil”, http://upload.wikimedia.org/wikipedia/commons/thumb/5/50/CorcovadofotoRJ.jpg/90px-CorcovadofotoRJ.jpg&#8221;));

sevenNewWonders.add(new Wonder(“Colosseum”, “Italy”, http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Colosseum_in_Rome%2C_Italy_-_April_2007.jpg/90px-Colosseum_in_Rome%2C_Italy_-_April_2007.jpg&#8221;));

sevenNewWonders.add(new Wonder(“Great Wall of China”, “China”, http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/GreatWallNearBeijingWinter.jpg/90px-GreatWallNearBeijingWinter.jpg&#8221;));

sevenNewWonders.add(new Wonder(“Machu Picchu”, “Peru”, http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/90px-Before_Machu_Picchu.jpg&#8221;));

sevenNewWonders.add(new Wonder(“Petra”, “Jordan”, http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/PetraMonastery.JPG/90px-PetraMonastery.JPG&#8221;));

sevenNewWonders.add(new Wonder(“Taj Mahal”, “India”, http://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Taj_Mahal_in_March_2004.jpg/90px-Taj_Mahal_in_March_2004.jpg&#8221;));

}

public ArrayList <Wonder> getSevenNewWonders() {

return sevenNewWonders;

}

}

Sau đó bạn tạo 1 trang, đặt tên cho nó là SortingDataTable.jsp.
Nội dung của trang như sau:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="rich" uri="http://richfaces.org/rich"%>
<%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sorting with build-in tag</title>
</head>
<body>
<f:view>
<h:form>
<rich:dataTable value="#{newWondersBean.sevenNewWonders}" var="wonder">
<rich:column sortBy="#{wonder.name}">
<f:facet name="header">
<h:outputText styleClass="headerText" value="Name" />
</f:facet>
<h:outputText value="#{wonder.name}" />
</rich:column>
<rich:column sortBy="#{wonder.location}">
<f:facet name="header">
<h:outputText styleClass="headerText" value="Location" />
</f:facet>
<h:outputText value="#{wonder.location}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText styleClass="headerText" value="Image" />
</f:facet>
<h:graphicImage url="#{wonder.imageUrl}" />
</rich:column>
</rich:dataTable>
</h:form>
</f:view>
</body>
</html>

Thực thi ứng dụng và sau đây là kết quả:
https://vovanhai.files.wordpress.com/2008/11/rf_intro07.png
Chúc may mắn!

One Response to “Sắp xếp dữ liệu hiển thị trong bảng”

  1. tiens said

    Bạn ơi mình có chút vướng mắc trong bảng tính, bạn giúp mình được không?

    Mình đang đổi File CSV sang TXT để sửa dữ liệu thì gặp lỗi sau mà không biết sửa ở đâu:
    Khi nhập dữ liệu vào bảng tính bao gồm nhiều dòng và nhiều cột, khi mình lưu sang CSV để dùng sau đó coppy file CSV đó sang máy khác và đổi đuôi sang TXT hoặc xls thì dữ liệu của một dòng bây giờ nó nằm trọn trong một ô đầu tiên của dòng đó.
    Các ô kế tiếp trống trơn, và dữ liệu trong ô đầu tiên này nó hiển thị trùm lên các ô tiếp theo đúng như vị trí của ô đó như bản nhập gốc.
    Như vậy dữ liệu gốc nhập ở nhiều cột bây giờ nó chỉ nằm trong một cột đầu tiên, còn các dòng vẫn không thay đổi.
    Mong bạn giúp mình nhé, Cảm ơn.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: