June 2012
M	T	W	T	F	S	S
« Aug
	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

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”));

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

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”));

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

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”));

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

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”));

}

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ả:

Chúc may mắn!

Like this:

Be the first to like this page.

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

tiens said

November 22, 2011 at 9:29 am
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.

Võ Văn Hải's blog

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

Đọc Võ Văn Hải’s Blog

Chia sẻ kiến thức

Recent Posts

Archives

Subscribe

Các phản hồi gần đây

Các trang được yêu thích

Ngẫm và nghĩ

Sorry

Pages

Blog Stats

Email Subscription

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

Like this:

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

tiens said

Leave a Reply Cancel reply

Follow “Võ Văn Hải's blog”