EC tags

原创

mb6108e2a4e3ac0 2021-08-04 11:34:36 博主文章分类：JAVA ©著作权

文章标签 css 分页 ide spring java 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者mb6108e2a4e3ac0的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、简介
Extreme Table是最功能强大而又容易配置,扩展,自定义的Table 控件。
最主要的功能包括排序, 分页, 导出Excel, pdf和汇总
官方网站：
http://www.extremecomponents.org
ExtremeTable自带的文档：
http://extremecomponents.org/wiki/index.php/Main_Page
Luck翻译的ExtremeTable官方文档中文版：
http://extremecomponents.org/wiki/index.php/Simplified_Chinese
二、简单示例
1，将extremecomponents.jar丢入WEB-INF/lib
2，将SpringSide与ec的相关images丢入/resources/images/table
3，将SpringSide的extremecomponents.css丢入/resources/css
4，将SpringSide的extremetable.properties丢入classpath,如src-conf/table
5，extremecomponents.css：
/*ExtremeTable专用Style*/
.eXtremeTable {
margin: 0;
padding: 0;
}
.eXtremeTable select {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
border: solid 1px #EEE;
width: 75px;
}
.eXtremeTable .tableRegion {
border: 1px solid #AAC2D9;
padding: 2px;
font-size: 12px;
margin-top: 7px;
}
.eXtremeTable .filter {
background-color: #F4F4F4;
}
.eXtremeTable .title {
color: #1a7cdf;
vertical-align: middle;
font-size: 18px;
font-weight: bold;
}
.eXtremeTable .titleRow {
background-color: #F4F4F4;
}
.eXtremeTable .titleRow td {
border-bottom: 1px solid #308dbb;
padding-top: 2px;
padding-bottom: 2px;
vertical-align: middle;
}
.eXtremeTable .titleRow span {
color: #444444;
font-weight: bold;
font-size: 12px;
}
.eXtremeTable .filter input {
font-size: 12px;
width: 100%;
}
.eXtremeTable .filter select {
font-size: 9px;
border: solid 1px #EEE;
width: 100%;
}
.eXtremeTable .tableHeader {
background-color: #308dbb;
color: white;
font-size: 12px;
font-weight: bold;
text-align: left;
padding-right: 3px;
padding-left: 3px;
padding-top: 4px;
padding-bottom: 4px;
margin: 0px;
border-right: 1px solid white;
background-image: url( "../images/tableTopbg.gif" );
}
.eXtremeTable .tableHeaderSort {
background-color: #3a95c2;
color: white;
font-size: 12px;
font-weight: bold;
text-align: left;
padding-right: 3px;
padding-left: 3px;
padding-top: 4px;
padding-bottom: 4px;
white-space: nowrap;
border-right: 1px solid white;
background-image: url( "../images/tableTopbg.gif" );
}
.eXtremeTable .odd a, .even a {
color: Black;
font-size: 12px;
}
.eXtremeTable .odd td, .eXtremeTable .even td {
vertical-align: middle;
font-size: 12px;
padding-right: 3px;
padding-left: 3px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 1px solid #CADAE8;
border-right: 1px solid #DAE6EF;
}
.eXtremeTable .odd {
background-color: #FFFFFF;
}
.eXtremeTable .even {
background-color: #F8F8F8;
}
.eXtremeTable .highlight td {
color: black;
font-size: 12px;
vertical-align: middle;
background-color: #fdecae;
padding-right: 3px;
padding-left: 3px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 1px solid #CADAE8;
border-right: 1px solid #DAE6EF;
}
.eXtremeTable .highlight a, .highlight a {
color: black;
font-size: 12px;
}
.eXtremeTable .toolbar {
background-color: #FFFFFF;
font-size: 12px;
border-right: 1px solid silver;
border-left: 1px solid silver;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
}
.eXtremeTable .toolbar td {
color: #444444;
padding: 0px 3px 0px 3px;
text-align: center;
}
.eXtremeTable .separator {
width: 7px;
}
.eXtremeTable .statusBar {
background-color: #FFFFFF;
font-size: 12px;
}
.eXtremeTable .filterButtons {
background-color: #F4F4F4;
text-align: right;
}
.eXtremeTable .title span {
margin-left: 7px;
}
.eXtremeTable .formButtons {
display: block;
margin-top: 10px;
margin-left: 5px;
}
.eXtremeTable .formButton {
cursor: pointer;
font-size: 12px;
font-weight: bold;
background-color: #308dbb;
color: white;
margin-top: 5px;
border: outset 1px #333;
vertical-align: middle;
}
.eXtremeTable .calcRow {
background-color: #FFFFFF;
}
.eXtremeTable .calcRow td {
background-color: #FFFFFF;
border-top: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
.eXtremeTable .calcTitle {
font-weight: bold;
font-size: 12px;
}
.eXtremeTable .calcResult {
font-size: 12px;
}
6，extremetable.properties：
table.filterable=false
table.imagePath=/resources/images/table/*.gif
table.locale=zh_CN
table.view.html=org.extremecomponents.table.view.CompactView
row.highlightRow=true
column.format.date=yyyy-MM-dd
column.format.currency=###,###,###,###,#00.00
7，以listBlog为例：
public void onList(HttpServletRequest request,
HttpServletResponse response, ModelAndView mav) throws Exception {
Limit limit = ExtremeTablePage.getLimit(request, defaultPageSize);
Page page = commonManager.findBy(Blog.class, null,
ExtremeTablePage.getSort(limit), limit.getPage(),
limit.getCurrentRowsDisplayed());
mav.addObject("blogList", page.getResult());
mav.addObject("totalRows", page.getTotalCount());
}
8，Page和上面介绍pager时的Page类一样
9，ExtremeTablePage：
package com.itone.hibernate.util;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.extremecomponents.table.context.Context;
import org.extremecomponents.table.context.HttpServletRequestContext;
import org.extremecomponents.table.limit.Limit;
import org.extremecomponents.table.limit.LimitFactory;
import org.extremecomponents.table.limit.Sort;
import org.extremecomponents.table.limit.TableLimit;
import org.extremecomponents.table.limit.TableLimitFactory;
import com.itone.common.support.Constants;
/**
* 辅助ExtremeTable获取分页信息的Util类
*
* @author calvin
*/
public class ExtremeTablePage {
static public Limit getLimit(HttpServletRequest request) {
return getLimit(request, Constants.DEFAULT_PAGE_SIZE);
}
/**
* 从request构造Limit对象实例.
* Limit的构造流程比较不合理，为了照顾export Excel时忽略信息分页，导出全部数据
* 因此流程为程序先获得total count, 再使用total count 构造Limit，再使用
limit中的分页数据查询分页数据
* 而SS的page函数是在同一步的，无法拆分，再考虑到首先获得的totalCount
*/
static public Limit getLimit(HttpServletRequest request, int defautPageSize) {
Context context = new HttpServletRequestContext(request);
LimitFactory limitFactory = new TableLimitFactory(context);
TableLimit limit = new TableLimit(limitFactory);
limit.setRowAttributes(1000000000, defautPageSize);
return limit;
}
/**
* 将Limit中的排序信息转化为Map{columnName,升序/降序}
*/
static public Map getSort(Limit limit) {
Map sortMap = new HashMap();
if (limit != null) {
Sort sort = limit.getSort();
if (sort != null && sort.isSorted()) {
sortMap.put(sort.getProperty(), sort.getSortOrder());
}
}
return sortMap;
}
}
10，commonManager.findBy（args）用到SpringSide的BaseHibernateDao并有扩展：
public Page findBy(Class clazz, Map filterMap, Map orderMap, int pageNo, int
pageSize, CriteriaSetup criteriaSetup) {
Criteria criteria = null;
if(clazz == null) {
criteria = getSession().createCriteria(getEntityClass());
} else {
criteria = getSession().createCriteria(clazz);
}
if (!CollectionUtils.isEmpty(filterMap)) {
try {
criteriaSetup.setup(criteria, filterMap);
} catch (Exception e) {
}
}
if (!CollectionUtils.isEmpty(orderMap))
sortCriteria(criteria, orderMap, null);
criteria.setResultTransformer(CriteriaSpecification.ROOT_ENTITY);
return pagedQuery(criteria, pageNo, pageSize);
}
11，listBlog.jsp：
<%@ taglib prefix="ec" uri="http://www.extremecomponents.org%>
<link href="/resources/css/extremecomponents.css" rel="stylesheet"
type="text/css">
<ec:table
var="blog"
items="blogList"
action="/blog.do"
retrieveRowsCallback="limit"
sortRowsCallback="limit"
rowsDisplayed="10">
<ec:row>
<ec:column property="name" title="博客名称"/>
<ec:column property="user.name" title="博客作者" alias="userName"/>
<ec:column property="description" title="描述"/>
<ec:column property="edit" title="操作" sortable="false" viewsAllowed="html">
<a href="blog.do?method=edit&id=${blog.id}">
编辑
</a>
</ec:column>
</ec:row>
</ec:table>
12，web.xml
<context-param>
<param-name>extremecomponentsPreferencesLocation</param-name>
<param-value>/table/extremetable.properties</param-value>
</context-param>