jmesa分頁的方式有兩種,一種是通過java代碼直接控制,第二種是通過標簽來控制。
首先介紹一下直接在java代碼中控制的方式:
- public class PaginationActionBean implements ActionBean {
-
-
- private String id = "user_table";
- private ActionBeanContext context;
- private String html;
-
- public String getHtml() {
- return html;
- }
- public void setHtml(String html) {
- this.html = html;
- }
- ........
-
- @DefaultHandler
- public Resolution display() {
- TableFacade tableFacade = TableFacadeFactory.createTableFacade(id, this
- .getContext().getRequest());
-
- addItems(tableFacade);
- html = html(tableFacade);
- ForwardResolution resolution = new ForwardResolution("/jsp/page.jsp");
- return resolution;
- }
-
- private void addItems(TableFacade tableFacade) {
- tableFacade.setItems(FillListData.getData());
- }
-
- private String html(TableFacade tableFacade) {
-
- tableFacade.setColumnProperties("name", "password", "deleteUser");
-
- HtmlTable table = (HtmlTable) tableFacade.getTable();
- table.setCaption("用戶列表");
- table.getTableRenderer().setWidth("600px");
-
- HtmlRow row = table.getRow();
-
- HtmlColumn name = row.getColumn("name");
- name.setTitle("名字");
-
- HtmlColumn password = row.getColumn("password");
- password.setTitle("密碼");
-
- HtmlColumn delete = row.getColumn("deleteUser");
- delete.setTitle("刪除");
- delete.setWidth("100px");
-
-
-
- name.getCellRenderer().setCellEditor(new CellEditor() {
- public Object getValue(Object item, String property, int rowcount) {
- Object value = new BasicCellEditor().getValue(item, property,
- rowcount);
- HtmlBuilder html = new HtmlBuilder();
- html.a().href().quote().append("http://baidu.com").quote()
- .close();
- html.append(value);
- html.aEnd();
- return html.toString();
- }
- });
-
- delete.getCellRenderer().setCellEditor(new CellEditor() {
- public Object getValue(Object item, String property, int rowcount) {
-
- HtmlBuilder html = new HtmlBuilder();
-
- Object user = ItemUtils.getItemValue(item, "name");
- String js = " onclick='javascript:del(\"user\"," + user + ") '";
- html.a().append(js).href().quote().append(
- getContext().getRequest().getContextPath()
- + "/Pagination.action?delete&user=" + user)
- .quote().close();
- html.append("刪除");
- html.aEnd();
- return html.toString();
- }
- });
-
- return tableFacade.render();
- }
-
- ..............
- }
public class PaginationActionBean implements ActionBean {
//此id表示將要創建的table的id
private String id = "user_table";
private ActionBeanContext context;
private String html;
public String getHtml() {
return html;
}
public void setHtml(String html) {
this.html = html;
}
........
@DefaultHandler
public Resolution display() {
TableFacade tableFacade = TableFacadeFactory.createTableFacade(id, this
.getContext().getRequest());
addItems(tableFacade);
html = html(tableFacade);
ForwardResolution resolution = new ForwardResolution("/jsp/page.jsp");
return resolution;
}
private void addItems(TableFacade tableFacade) {
tableFacade.setItems(FillListData.getData());
}
private String html(TableFacade tableFacade) {
tableFacade.setColumnProperties("name", "password", "deleteUser");
HtmlTable table = (HtmlTable) tableFacade.getTable();
table.setCaption("用戶列表");
table.getTableRenderer().setWidth("600px");
HtmlRow row = table.getRow();
HtmlColumn name = row.getColumn("name");
name.setTitle("名字");
HtmlColumn password = row.getColumn("password");
password.setTitle("密碼");
HtmlColumn delete = row.getColumn("deleteUser");
delete.setTitle("刪除");
delete.setWidth("100px");
// Using an anonymous class to implement a custom editor.
// 用于演示在表格中增加超鏈接
name.getCellRenderer().setCellEditor(new CellEditor() {
public Object getValue(Object item, String property, int rowcount) {
Object value = new BasicCellEditor().getValue(item, property,
rowcount);
HtmlBuilder html = new HtmlBuilder();
html.a().href().quote().append("http://baidu.com").quote()
.close();
html.append(value);
html.aEnd();
return html.toString();
}
});
delete.getCellRenderer().setCellEditor(new CellEditor() {
public Object getValue(Object item, String property, int rowcount) {
HtmlBuilder html = new HtmlBuilder();
// 取得每一行的id號
Object user = ItemUtils.getItemValue(item, "name");
String js = " onclick='javascript:del(\"user\"," + user + ") '";
html.a().append(js).href().quote().append(
getContext().getRequest().getContextPath()
+ "/Pagination.action?delete&user=" + user)
.quote().close();
html.append("刪除");
html.aEnd();
return html.toString();
}
});
return tableFacade.render(); // Return the Html.
}
..............
}
上面的代碼中最重要的就是那上html方法,此方法完成了整個表格的定制工作,包括鏈接在內。如果要重新設置每頁顯示的記錄數(默認每頁可顯示15,50,100),要么修改jmesa.properties文件,要么通過java代碼設置。修改配置文件的話,同時要修改兩個地方:
limit.rowSelect.maxRows=15
html.toolbar.maxRowsDroplist.increments=15,50,100
如果修改,必須滿足第一行的數字必須是第二行所有數字中的一個。用java代碼修改的也要遵照同樣的原則。
jsp代碼很簡單:
- <script type="text/javascript"
- src="${pageContext.request.contextPath}/js/jquery.js"></script>
- <script type="text/javascript"
- src="${pageContext.request.contextPath}/js/jquery.jmesa.js"></script>
- <script type="text/javascript"
- src="${pageContext.request.contextPath}/js/jmesa.js"></script>
- <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jmesa.css"></link>
- </head>
- <body>
- <h1>Stripes Calculator</h1>
-
- <form>
- ${actionBean.html}
- <script type="text/javascript">
- function onInvokeAction(id) {
- createHiddenInputFieldsForLimitAndSubmit(id);
- }
- </script>
- </form>
- </body>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery.jmesa.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jmesa.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jmesa.css"></link>
</head>
<body>
<h1>Stripes Calculator</h1>
<form>
${actionBean.html}
<script type="text/javascript">
function onInvokeAction(id) {
createHiddenInputFieldsForLimitAndSubmit(id);
}
</script>
</form>
</body>
上面這段代碼中,需要注意一下JS聲明的順序,而且還要申明一個form,不然分頁的時候JS會出錯。還要加上上面的那段JS代碼。
第二種方式是直接通過標簽的方式申明,因此需要在JSP頭部申明:
- <%@ taglib uri="/WEB-INF/tld/jmesa.tld" prefix="jmesa" %>
- .........
- ...............
<%@ taglib uri="/WEB-INF/tld/jmesa.tld" prefix="jmesa" %>
.........
...............
將${actionBean.html}替換成:
- <jmesa:tableFacade id="user_table" items="${items}" var="bean" >
- <jmesa:htmlTable width="600px">
- <jmesa:htmlRow>
- <jmesa:htmlColumn property="name"/>
- <jmesa:htmlColumn property="password" title="Last Name"/>
- </jmesa:htmlRow>
- </jmesa:htmlTable>
- </jmesa:tableFacade>
<jmesa:tableFacade id="user_table" items="${items}" var="bean" >
<jmesa:htmlTable width="600px">
<jmesa:htmlRow>
<jmesa:htmlColumn property="name"/>
<jmesa:htmlColumn property="password" title="Last Name"/>
</jmesa:htmlRow>
</jmesa:htmlTable>
</jmesa:tableFacade>
這部分代碼的作用與上面action直接操縱表格的方式一樣,只是把工作轉移到JSP中。只是上面的${items}表示一個將要顯示的collection,不用再使用字符串的方式顯示。如果兩種方式都用的話,則以JSP中的方式為準。
jmesa的配置文件已經集成在JAR中,如果需要改變,可以將此文件復制出來,改變其內容,然后在web.xml重新指定其路徑:
- <context-param>
- <param-name>jmesaPreferencesLocation</param-name>
- <param-value>WEB-INF/jmesa.properties</param-value>
- </context-param>