这是不配置extremetable.properties的初始样式。
这是配置了extremetable.properties自定义的样式,主要是加了一个页数下拉框,可以选择第几页,每页几行。这个下拉框要加上对应的onchange()方法、action,非常复杂。
项目目录。
-------------------------------------------------------------------------------------------------------------------
ecTable的初步配置很简单。导入jar包。web.xml里面可以指定extremetable.properties。然后配置extremetable.properties。可以不指定,使用默认样式。还有一些image。可以自定义css。我们的css这里不写了,大致是这样:.eXtremeTable .tableRegion ,以.eXtremeTable开头。可以去下载项目。
http://download.csdn.net/detail/u010653311/6453225
web.xml就不贴了。这里没有配置导出报表和国际化。
index.jsp
<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<link href="${ctx}/css/extremecomponents.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css" />
</head>
<body style="padding:0 100px;">
<br/>
<div id="TableBody">
<ec:table tableId="adhocSql" items="data" var="map"
width="100%" form="EditForm"
action="${ctx}/adhocSql/query.action"
imagePath="${ctx}/images/extremecomponents/*.gif" view="html"
retrieveRowsCallback="limit" autoIncludeParameters="false">
<ec:exportXls fileName="adhocSqlList.xls" tooltip="导出Excel" />
<ec:row>
<ec:column property="name" title="姓名" width="10%"/>
<ec:column property="age" title="年龄" width="10%" />
</ec:row>
</ec:table>
</div>
</body>
</html>
配置文件:
table.filterable=false
table.imagePath=/images/extremecomponents/*.gif
table.locale=zh_CN
table.view.html=com.huateng.framework.extremecomponents.view.IssueView
exportXls.view=org.extremecomponents.table.view.XlsView
row.highlightRow=true
column.format.date=yyyy/MM/dd/hh/mm/ss
column.format.currency=###,###,###,###,#00.00
table.maxRowsDisplayed=50
table.medianRowsDisplayed=20
table.rowsDisplayed=10
column.cell.OrderState=com.huateng.framework.extremecomponents.cell.CustomerOrderStateCell
这里指定了一个IssueView。自定义样式都是这个类。
column.cell.OrderState是这么用的:jsp里面
<ec:column property="orderStat" cell="OrderState" title="订单状态" width="10%"/>
就会找到CustomerOrderStateCell这个类。另外cell=""里面好像可以直接写类和包的全称。
这个类可以把一个输入转为一个输出。Action传过来的实际值比如是1,显示到页面上面可以变为‘草稿’。
public class CustomerOrderStateCell extends AbstractCell {
/* (non-Javadoc)
* @see org.extremecomponents.table.cell.AbstractCell#getCellValue(org.extremecomponents.table.core.TableModel, org.extremecomponents.table.bean.Column)
*/
@SuppressWarnings("unchecked")
@Override
protected String getCellValue(TableModel model, Column column) {
List<DictInfoDTO> list = (List<DictInfoDTO>)SystemInfo.getDictInfo().get(SystemInfoConstants.CUSTOMER_ORDER_STATE);
String value = column.getValueAsString();
if (StringUtils.isBlank(value))
return "";
for (DictInfoDTO d : list) {
if (value.equals(String.valueOf(d.getDictId()))) {
value = d.getDictShortName();
break;
}
}
return value;
}
}
这个类比较简单。
再看IssueView
package com.huateng.framework.extremecomponents.view;
import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.table.view.CompactView;
import org.extremecomponents.util.HtmlBuilder;
import com.huateng.framework.extremecomponents.toolbar.IssueToolbar;
public class IssueView extends CompactView {
protected void toolbar(HtmlBuilder html, TableModel model) {
new IssueToolbar(html, model).layout();
}
}
IssueToolBar:
package com.huateng.framework.extremecomponents.toolbar;
import java.util.Iterator;
import org.extremecomponents.table.bean.Export;
import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.table.view.CompactToolbar;
import org.extremecomponents.table.view.html.BuilderConstants;
import org.extremecomponents.table.view.html.BuilderUtils;
import org.extremecomponents.util.HtmlBuilder;
public class IssueToolbar extends CompactToolbar {
public IssueToolbar(HtmlBuilder html, TableModel model) {
super(html, model);
}
protected void columnRight(HtmlBuilder html, TableModel model) {
boolean filterable = BuilderUtils.filterable(model);
boolean showPagination = BuilderUtils.showPagination(model);
boolean showExports = BuilderUtils.showExports(model);
IssueToolbarBuilder toolbarBuilder = new IssueToolbarBuilder(html, model);
html.td(4).styleClass(BuilderConstants.COMPACT_TOOLBAR_CSS).align("right").close();
html.table(4).border("0").cellPadding("1").cellSpacing("2").close();
html.tr(5).close();
if (showPagination) {
html.td(5).close();
toolbarBuilder.firstPageItemAsImage();
html.tdEnd();
html.td(5).close();
toolbarBuilder.prevPageItemAsImage();
html.tdEnd();
html.td(5).close();
toolbarBuilder.nextPageItemAsImage();
html.tdEnd();
html.td(5).close();
toolbarBuilder.lastPageItemAsImage();
html.tdEnd();
html.td(5).close();
toolbarBuilder.separator();
html.tdEnd();
html.td(5).close();
toolbarBuilder.rowsDisplayedDroplist();
html.tdEnd();
if (showExports) {
html.td(5).close();
toolbarBuilder.separator();
html.tdEnd();
}
}
if (showExports) {
Iterator iterator = model.getExportHandler().getExports().iterator();
for (Iterator iter = iterator; iter.hasNext();) {
html.td(5).close();
Export export = (Export) iter.next();
toolbarBuilder.exportItemAsImage(export);
html.tdEnd();
}
}
if (filterable) {
if (showExports || showPagination) {
html.td(5).close();
toolbarBuilder.separator();
html.tdEnd();
}
html.td(5).close();
toolbarBuilder.filterItemAsImage();
html.tdEnd();
html.td(5).close();
toolbarBuilder.clearItemAsImage();
html.tdEnd();
}
html.trEnd(5);
html.tableEnd(4);
html.tdEnd();
}
}
IssueToolbarBuilder:
package com.huateng.framework.extremecomponents.toolbar;
import org.extremecomponents.table.core.TableConstants;
import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.table.view.html.TableActions;
import org.extremecomponents.table.view.html.ToolbarBuilder;
import org.extremecomponents.util.HtmlBuilder;
import com.huateng.framework.extremecomponents.tableaction.IssueTableActions;
public class IssueToolbarBuilder extends ToolbarBuilder {
private static String pathString="/EcTableWeb";
public IssueToolbarBuilder(HtmlBuilder html, TableModel model) {
super(html, model);
}
public void rowsDisplayedDroplist() {
int rowsDisplayed = getTableModel().getTableHandler().getTable()
.getRowsDisplayed();
int medianRowsDisplayed = getTableModel().getTableHandler().getTable()
.getMedianRowsDisplayed();
int maxRowsDisplayed = getTableModel().getTableHandler().getTable()
.getMaxRowsDisplayed();
int currentRowsDisplayed = getTableModel().getLimit()
.getCurrentRowsDisplayed();
//System.out.println(rowsDisplayed+","+medianRowsDisplayed+","+maxRowsDisplayed+","+currentRowsDisplayed);
//10,20,50,10
//显示页数的下拉框
getHtmlBuilder().table(0).close().tr(4).close().td(8).style(" padding:0 0 0 4px;").close();
int currentPage = getTableModel().getLimit().getPage();
int totalRows = getTableModel().getLimit().getTotalRows();
int totalPages = 1;
if (totalRows % currentRowsDisplayed > 0) {
totalPages = totalRows / currentRowsDisplayed + 1;
} else {
totalPages = totalRows / currentRowsDisplayed;
}
getHtmlBuilder().select().name(
getTableModel().getTableHandler().prefixWithTableId()
+ TableConstants.PAGE_SCOPE);
StringBuffer onchangePage = new StringBuffer();
onchangePage.append(new IssueTableActions(getTableModel())
.getPagesDisplayedAction());
getHtmlBuilder().onchange(onchangePage.toString());
getHtmlBuilder().close();
getHtmlBuilder().newline();
getHtmlBuilder().tabs(4);
for (int i = 1; i <= totalPages; i++) {
getHtmlBuilder().option().value(String.valueOf(i));
if (i == currentPage) {
getHtmlBuilder().selected();
}
getHtmlBuilder().close();
getHtmlBuilder().append(String.valueOf(i));
getHtmlBuilder().optionEnd();
}
getHtmlBuilder().newline();
getHtmlBuilder().tabs(4);
getHtmlBuilder().selectEnd();
// getHtmlBuilder().br();
// getHtmlBuilder().img("images/extremecomponents/rowsDisplayed.gif");
// getHtmlBuilder().nbsp();
// 显示条数的下拉框
getHtmlBuilder().tdEnd().td(8).style(" padding:0 0 0 4px;").close();
getHtmlBuilder().select().name(
getTableModel().getTableHandler().prefixWithTableId()
+ TableConstants.ROWS_DISPLAYED);
StringBuffer onchange = new StringBuffer();
onchange.append(new TableActions(getTableModel())
.getRowsDisplayedAction());
getHtmlBuilder().onchange(onchange.toString());
getHtmlBuilder().close();
getHtmlBuilder().newline();
getHtmlBuilder().tabs(4);
// default rows
getHtmlBuilder().option().value(String.valueOf(rowsDisplayed));
if (currentRowsDisplayed == rowsDisplayed) {
getHtmlBuilder().selected();
}
getHtmlBuilder().close();
getHtmlBuilder().append(String.valueOf(rowsDisplayed));
getHtmlBuilder().optionEnd();
// median rows
getHtmlBuilder().option().value(String.valueOf(medianRowsDisplayed));
if (currentRowsDisplayed == medianRowsDisplayed) {
getHtmlBuilder().selected();
}
getHtmlBuilder().close();
getHtmlBuilder().append(String.valueOf(medianRowsDisplayed));
getHtmlBuilder().optionEnd();
// max rows
getHtmlBuilder().option().value(String.valueOf(maxRowsDisplayed));
if (currentRowsDisplayed == maxRowsDisplayed) {
getHtmlBuilder().selected();
}
getHtmlBuilder().close();
getHtmlBuilder().append(String.valueOf(maxRowsDisplayed));
getHtmlBuilder().optionEnd();
getHtmlBuilder().newline();
getHtmlBuilder().tabs(4);
getHtmlBuilder().selectEnd();
getHtmlBuilder().tdEnd().trEnd(4);
getHtmlBuilder().tr(4).close().td(8).close();
getHtmlBuilder().img(pathString+"/images/extremecomponents/rowsDisplayed.gif");
getHtmlBuilder().tdEnd().td(8).close();
getHtmlBuilder().img(pathString+"/images/extremecomponents/table/rowsDisplayed.gif");
getHtmlBuilder().tdEnd().trEnd(4).tableEnd(0);
}
}
用来指定onchange() Action的IssueTableActions:
package com.huateng.framework.extremecomponents.tableaction;
import org.apache.commons.lang.StringUtils;
import org.extremecomponents.table.core.TableConstants;
import org.extremecomponents.table.core.TableModel;
import org.extremecomponents.table.view.html.BuilderUtils;
import org.extremecomponents.table.view.html.TableActions;
/**
* 扩展TableActions,使原来页面中下拉框由显示行数变为显示页敄1�7
* 这里完成了下拉框中js语句onchenge()的实玄1�7
* @author liming.feng
*
*/
public class IssueTableActions extends TableActions {
private TableModel model;
public IssueTableActions(TableModel model) {
super(model);
this.model = model;
}
/**
* 构建页面控件“翻页下拉框”的js中onchenge()语句
* @return String
*/
public String getPagesDisplayedAction() {
StringBuffer action = new StringBuffer("javascript:");
action.append(getClearedExportTableIdParameters());
action.append(getRowsDisplayedFormParameter(TableConstants.PAGE));
action.append(getOnInvokeOrSubmitAction());
return action.toString();
}
/*
* Added 16 AUG 2007 - Todd Fredrich - To duplicate previous functionality of getOnInvokeAction().
*/
public String getOnInvokeOrSubmitAction() {
String onInvokeAction = getOnInvokeAction();
if (StringUtils.isNotBlank(onInvokeAction)) {
return onInvokeAction;
}
return getSubmitAction();
}
public String getSubmitAction() {
StringBuffer result = new StringBuffer();
String form = BuilderUtils.getForm(model);
String action = model.getTableHandler().getTable().getAction();
result.append("document.forms.").append(form).append(".setAttribute('action','").append(action).append("');");
String method = model.getTableHandler().getTable().getMethod();
result.append("document.forms.").append(form).append(".setAttribute('method','").append(method).append("');");
result.append("document.forms.").append(form).append(".submit()");
return result.toString();
}
}
说几点细节:比如getHtmlBuilder().table(0).close().tr(4).close().td(8)
close()方法是加上‘>’符号,tr(4)里面的数字没有实际意义,如果system.out打印出来发现那里是缩进了几格。这个htmlBuilder就是像手写html代码一样。可以直接打印看字符串。
另外带上Action
package com.huateng.action;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class DataInitAction {
private List<Map<String, Object>> data = new ArrayList<Map<String,Object>>();
private int totalRows = 0;
public String init(){
Map<String, Object> map = new HashMap<String, Object>();
map.put("name", "tommy");
map.put("age", 22);
data.add(map);
map = new HashMap<String, Object>();
map.put("name", "jerry");
map.put("age", 33);
data.add(map);
totalRows = data.size();
return "succ";
}
public List<Map<String, Object>> getData() {
return data;
}
public void setData(List<Map<String, Object>> data) {
this.data = data;
}
public int getTotalRows() {
return totalRows;
}
public void setTotalRows(int totalRows) {
this.totalRows = totalRows;
}
}
这里没连数据库,翻页什么都做不了。
实际中Action中还有一个方法取得页面页数等数据,是这样的:
/**
* list列表页面初始化获得页数等信息
*
* @param request
* @param response
* @return
* @throws Exception
*/
protected void ListPageInit(String tableId, PageQueryDTO pageQueryDTO) throws Exception {
if (pageQueryDTO == null)
return;
if (tableId != null)
this.tableId = tableId;
HttpServletRequest request = getRequest();
Limit limit = getLimit(request, tableId);
pageQueryDTO.setCurrentPage(limit.getPage());
pageQueryDTO.setRowsDisplayed(getRowsDisplayed(request, tableId));
pageQueryDTO.setQueryAll(this.isExportView(request, tableId));
// 是否有排序,如果有,记录排序的字段名、字段别名和排序的种类(降序or升序)
if (limit.getSort() != null) {
// 排序的种类
pageQueryDTO.setSort(limit.getSort().getSortOrder());
if (TableConstants.SORT_ASC.equals(limit.getSort().getSortOrder())
|| TableConstants.SORT_DESC.equals(limit.getSort().getSortOrder())) {
// 排序的字段名
pageQueryDTO.setSortFieldName(limit.getSort().getProperty());
// 排序的字段别名
pageQueryDTO.setSortFieldAliasName(limit.getSort().getAlias());
}
}
}
/**
* 得到ec分页、排序、索引用的Limit
*
* @param request
* @return
*/
protected Limit getLimit(HttpServletRequest request, String tableId) {
if (tableId == null)
tableId = "ec";
Context context = new HttpServletRequestContext(request);
LimitFactory limitFactory = new TableLimitFactory(context, tableId);
Limit limit = new TableLimit(limitFactory);
return limit;
}
/**
* 得到每页的页数
*
* @param request
* @return
*/
protected int getRowsDisplayed(HttpServletRequest request, String tableId) {
if (tableId == null)
tableId = "ec";
Context context = new HttpServletRequestContext(request);
String rowsDisplayed = String.valueOf(getLimit(request, tableId).getCurrentRowsDisplayed());
Preferences preferences = new TableProperties();
preferences.init(context, TableModelUtils.getPreferencesLocation(context));
if ("0".equals(rowsDisplayed)) {
Object rd = request.getParameterMap().get(tableId + "_" + TableConstants.ROWS_DISPLAYED);
if (rd != null) {
rowsDisplayed = ((String[]) rd)[0];
} else {
rowsDisplayed = preferences.getPreference(PreferencesConstants.TABLE_ROWS_DISPLAYED);
}
}
return Integer.parseInt(rowsDisplayed);
}
/**
* 判断是否是导出操作
*
* @param request
* @return
*/
protected boolean isExportView(HttpServletRequest request, String tableId) {
if (tableId == null)
tableId = "ec";
Object rd = request.getParameterMap().get(TableConstants.EXPORT_TABLE_ID);
if (rd != null) {
String ex = ((String[]) rd)[0];
return StringUtils.isNotBlank(ex);
}
return false;
}
下载位置http://download.csdn.net/detail/u010653311/6453225