如何使用ECSide列表组件构建列表(内附源码)
2013-03-12 10:08
555 查看
说在前面的话:
ECSide组件,一个功能丰富,简单易用的列表组件,套用圈子里的一句话:它可能不是最好的,但也许是你最需要的。感兴趣的同志们可以访问ECSide的圈子,里面的资源及文档都很丰富,不在这里做过多的介绍了,圈子地址为http://ecside.group.javaeye.com/
实例讲解:
实现从一张公告表读取公告信息并以列表展示的功能。本文中的源代码可通过这个链接下载。
bulletin_powered_by_ecside_allen.zip
另附ECSide标签的使用说明,方便大家查阅。
ECSide标签使用说明
开发环境:
Dev Tool: Eclipse 3.3
Web Server: Tomcat 5.5.23
Framework: Spring 2.0.6 + Hibernate 3.3.0 + Struts 1.2.8 + ecside_2.0_RC1
Database: Oracle 9i
实现步骤:
0) 准备工作
使用ecside工具,你需要准备的有:
1、ecside.jar
2、 ecside.tld标签
3、ecside.js
4、ecside.css
5、ecside使用table图片
注:以上内容均可在圈子中下载到。
1)配置ecside
需要在web.xml中配置ecside的过滤器,用于文件导出和语言编码,忘记配置的话,会出现“正在提交”的问题。
<!-- ecside export filter
-->
< filter
>
< filter-name
> ecsideExport
</ filter-name
>
< filter-class
> org.ecside.filter.ECSideFilter
</ filter-class
>
< init-param
>
< param-name
> useEasyDataAccess
</ param-name
>
< param-value
> true
</ param-value
>
</ init-param
>
< init-param
>
< param-name
> useEncoding
</ param-name
>
< param-value
> true
</ param-value
>
</ init-param
>
< init-param
>
< param-name
> encoding
</ param-name
>
< param-value
> UTF-8
</ param-value
>
</ init-param
>
</ filter
>
< filter-mapping
>
< filter-name
> ecsideExport
</ filter-name
>
< url-pattern
> /*
</ url-pattern
>
</ filter-mapping
>
还需配置一下tld,
< taglib
>
< taglib-uri
> /WEB-INF/ecside.tld
</ taglib-uri
>
< taglib-location
> /WEB-INF/taglib/ecside.tld
</ taglib-location
>
</ taglib
>
另外,还可以初始化ecside.properties文件,写这个文件的目的是:把公共的内容集中在一个文件中,方便使用。一旦我们使用ecside 组件,哪个这些配置信息就可以直接引用。形式可以如下:
########### table ###############
table.method=post
table.width=95%
table.pageSizeList=10,20,50,100,1000,2000,all
table.rowsDisplayed=10
table.sortable=true
########### column ###############
column.format.date=yyyy/MM/dd
column.format.number=0.##
column.format.currency=###,###,###
2) 在Struts Action中使用ecside
首先来简单介绍一下RSF(列表、排序、过滤)操作方式:
ecside支持两种RSF方式: 基于java collection层 和 基于数据库层,下面分别介绍:
基于java collection层
这是ec的默认实现方式, 最简单易用.你要做的就是将整个列表所要展现的全部数据放入collection 内,并交给EC来处理.其中RSF操作,全部由EC在内存中完成,由于你已经将全部数据放入了collection中,所以排序 过滤都是基于全部数据的.你要在DAO中做的就是一个 查询操作,SQL语句中不需要加入 关于排序 分页 过滤的代码.
这种方式的优点非常明显:实现简单.缺点同样明显,而且在很大程度上是致命的: 数据量大的时候速度慢,而且很可能OutOfMemory.
基于数据库层
在这种方式下,EC的角色发生了一点点变化。此时,EC负责把 collection 里的内容展现出来, 同时会向你提供RSF相关的参数。而这些参数需要你自己手动取得 并传入到DAO中(当然EC提供了很多方便的方法来帮助你取得这些参数),具体功能的实现需要你自己在DAO中组织相应的SQL语句。
这种方式的优缺点正好和方式一相反。
我这里采用第二种基于数据库层的分页方式实现列表,这时在JSP中使用ecside时,要将<ec:table>中的几个重要属性设定为limit。如: <ec:table filterRowsCallback="process/limit" sortRowsCallback="process/limit" retrieveRowsCallback="process/limit" ...> 这里filterRowsCallback表示过滤的Callback方式,sortRowsCallback表示排序的Callback方式,retrieveRowsCallback表示分页的Callback方式,这三个属性都需要设定为limit。(不熟悉的读者可以查询原版EC中的相关说明,不在这里详述。)
Struts Action的代码为:
/**/ /*
* 用ECSide構建列表
*
*/
public ActionForward list(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
{
String v_type
= request.getParameter(
" type
" );
// 0) 設定過濾條件
Map
< String, Object
> filterMap
= new
HashMap <
String, Object >
();
// filterMap.put("content", "test");
Map
< String, Object
> sortMap
= new
HashMap <
String, Object >
();
sortMap.put(
" createTime
" ,
" desc "
); //
按照創建時間倒序排列
// 1) 設定ECSide分頁對象
Limit limit
= RequestUtils.getLimit(request);
// 取总记录数
int
pageNo =
RequestUtils.getPageNo(request);
int pagesize
= RequestUtils.getCurrentRowsDisplayed(request);
if (pagesize
==
0 )
pagesize
= PAGESIZE;
// 设置总记录数及每页记录数
int
totalRows =
RequestUtils.getTotalRowsFromRequest(request);
if (totalRows
<=
0 )
{
http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" border="0" >
totalRows
= getEntityManager()
.getCount(getEntityClass(), filterMap);
}
limit.setRowAttributes(totalRows, pagesize);
// 根據參數得到結果
List
< Bulletin
> result
= getEntityManager().queryForListByCriter(
getEntityClass(), filterMap, sortMap,
((pageNo
-
1 ) *
pagesize), pagesize);
request.setAttribute(getEntityListName(), result);
request.setAttribute(
" myPageSize
" , getPageSize(request));
request.setAttribute(
" type
" , v_type);
return mapping.findForward(LIST);
}
这里我构建了过滤条件及排序条件查询数据,通过queryForListByCriter方法,输入当前起始页及每页的显示条数在数据层得到所需数据。详见代码中的注释。另附数据处理层两个方法的代码:
/**//*分页查询数据*/
public List queryForListByCriter(Class entityClass, Map filter,
Map sortMap, int start, int everypage)
{
Criteria criteria = getCriteria(entityClass);
setFilter(criteria, filter);
setSort(criteria, sortMap);
criteria.setFirstResult(start);
criteria.setMaxResults(everypage);
return criteria.list();
}
/**//*计算数据条数*/
public int getCount(Class entityClass, Map filter)
{
Criteria criteria = getCriteria(entityClass);
setFilter(criteria, filter);
criteria.setProjection(Projections.rowCount());
return ((Integer) criteria.uniqueResult()).intValue();
}
注:ecside与ORM工具无关,不管你使用什么方法只要能获得一个集合就好,这里我用的是Hibernate获得的集合。
3)在JSP中使用ecside
需要注意的是:
1. items的值一定要和request.setAttribute(getEntityListName(), result); 属性一致
2. 可以引用属性名做为值显示,如:${bulletin.id}
3. <ec:column property="name" title="公告名称">property属性值一定是映射文件中的某个属性
<%
@ page contentType
=
" text/html; charset=UTF-8
"
%>
<%
@ taglib uri
=
" /WEB-INF/ecside.tld
"
prefix =
" ec
" %>
<%
@ taglib uri
=
" http://java.sun.com/jsp/jstl/core "
prefix =
" c
" %>
<%
@ taglib uri
=
" http://java.sun.com/jsp/jstl/fmt "
prefix =
" fmt
" %>
<%
@ taglib uri
=
" http://java.sun.com/jsp/jstl/functions "
prefix =
" fn
" %>
< c:set
var ="ctx"
value ="${pageContext.request.contextPath}"
/>
< html
>
< head
>
< meta
http-equiv ="Content-Type"
content ="text/html; charset=UTF-8"
/>
< META
HTTP-EQUIV ="pragma"
CONTENT ="no-cache"
>
< META
HTTP-EQUIV ="Cache-Control"
CONTENT ="no-cache, must-revalidate"
>
< META
HTTP-EQUIV ="expires"
CONTENT ="0"
>
< title
> 公告列表 </
title >
< link
rel ="stylesheet"
type ="text/css"
href ="${ctx}/module/bizAcceptance/resources/ecside/css/ecside_style.css"
/>
< script
type ="text/javascript"
src ="${ctx}/module/bizAcceptance/resources/ecside/js/prototype_mini.js"
></
script >
< script
type ="text/javascript"
src ="${ctx}/module/bizAcceptance/resources/ecside/js/ecside.js"
></
script >
< script
type ="text/javascript"
src ="${ctx}/module/bizAcceptance/resources/ecside/js/ecside_msg_utf8_cn.js"
></
script >
</ head
>
< body
>
< table
width ="100%"
border ="0"
cellspacing ="0"
cellpadding ="0"
>
<!-- 校验信息
-->
< tr
>
< td
class ="left"
> <%
@ include file
=
" /module/commons/htmlmessages.jsp
"
%>
</ td >
</ tr
>
< tr
>
< td
height ="30"
>
< span
style ="align:left;font-size:9pt;"
>
請選擇公告
< input
type ="button"
name ="Submit3"
value ='進
入' onclick ="doView()"
>
</ span
>< br >
</ td
>
</ tr
>
< tr
>
< td
>
< ec:table
items ="bulletins"
var ="bulletin"
retrieveRowsCallback
="limit"
filterRowsCallback
="limit"
action
="${ctx}/module/bulletin.do?method=list&type=${type}"
title
="我的公告列表"
useAjax
="false"
showPrint
="false"
width
="100%"
resizeColWidth
="true"
filterable
="false"
listWidth
="100%"
rowsDisplayed
="${myPageSize}"
pageSizeList
="${myPageSize},10,15,20,all"
xlsFileName
="公告列表.xls"
styleClass
="tableRegion"
style
="border:2px;table-layout:fixed;"
classic
="true" >
< ec:row
>
< ec:column
property ="_0"
title ="選擇"
width ="6%"
>
< input
type ="radio"
id ="radio_${GLOBALROWCOUNT}"
name ="checkedRadio"
value ="${bulletin.id}"
>
</ ec:column
>
< ec:column
property ="_1"
title ="序號"
width ="6%"
>
${GLOBALROWCOUNT}
</ ec:column
>
< ec:column
property ="name"
title ="公告名稱"
>
< a
href ="JavaScript:doStarting('${affair.id}')"
title ="點擊查看"
>< c:out
value ="${bulletin.name}"
/></ a >
</ ec:column
>
< ec:column
property ="desn"
title ="描述"
ellipsis ="true"
/>
< ec:column
property ="createBy"
title ="創建人"
width ="10%"
/>
< ec:column
property ="createTime"
title ="創建時間"
width ="20%"
>
< fmt:formatDate
value ="${bulletin.createTime}"
pattern ="yyyy-MM-dd HH:mm:ss"
/>
</ ec:column
>
< ec:column
property ="_2"
title ="可執行操作"
>
< a
href ="${ctx}/module/bulletin.do?method=edit&ID=${bulletin.id}"
>< img
src ="${ctx}/images/affairmgt/update.gif"
border ="0"
title ="編輯"
> 編輯
</ a >
< a
href ="${ctx}/module/bulletin.do?method=delete&ID=${bulletin.id}"
>< img
src ="${ctx}/images/affairmgt/delete.gif"
border ="0"
title ="移除"
> 移除
</ a >
</ ec:column
>
</ ec:row
>
</ ec:table
>
</ td
>
</ tr
>
</ table
>
< script
language ="javascript"
>
var
_confirm =
"
false "
;
var
confirmMsg =
" 查看此公告?
" ;
var
urlPrefix =
" ${ctx}/module/bulletin.do?method=view&ID=
"
;
function
doView(itemId)
{
if
(itemId !=
null
)
{
if
(_confirm ==
'
false '
|| confirm(confirmMsg))
{
ShowWaiting('正在加载数据,请稍候
');
window.location
=
urlPrefix +
itemId;
}
}
else
{
var
radio =
document.getElementsByName('checkedRadio');
for
(i =
0
; i <
radio.length; i ++
)
{
if
(radio[i].checked)
{
if
(_confirm ==
'
false '
|| confirm(confirmMsg))
{
itemId
=
radio[i].value;
ShowWaiting('正在加载数据,请稍候
');
window.location
=
urlPrefix +
itemId;
}
return
;
}
}
alert('請選擇一個公告!');
}
}
</ script
>
</ body
>
</ html
>
其中,<ec:column property="desn" title="描述" ellipsis="true" />,ellipsis属性实现单元格内数据过长的时候,自动截短并加"..."的功能,但是ie only!因为ff不支持 text-overflow: ellipsis; 使用ellipsis="true"的同时,还要为ec:table加上 style="table-layout:fixed;" (如果您已经使用了调整列宽功能 则不用添加)。
4) 启动服务,大功告成。
原文地址: http://www.blogjava.net/allen-zhe/archive/2009/03/09/246328.html
ECSide组件,一个功能丰富,简单易用的列表组件,套用圈子里的一句话:它可能不是最好的,但也许是你最需要的。感兴趣的同志们可以访问ECSide的圈子,里面的资源及文档都很丰富,不在这里做过多的介绍了,圈子地址为http://ecside.group.javaeye.com/
实例讲解:
实现从一张公告表读取公告信息并以列表展示的功能。本文中的源代码可通过这个链接下载。
bulletin_powered_by_ecside_allen.zip
另附ECSide标签的使用说明,方便大家查阅。
ECSide标签使用说明
开发环境:
Dev Tool: Eclipse 3.3
Web Server: Tomcat 5.5.23
Framework: Spring 2.0.6 + Hibernate 3.3.0 + Struts 1.2.8 + ecside_2.0_RC1
Database: Oracle 9i
实现步骤:
0) 准备工作
使用ecside工具,你需要准备的有:
1、ecside.jar
2、 ecside.tld标签
3、ecside.js
4、ecside.css
5、ecside使用table图片
注:以上内容均可在圈子中下载到。
1)配置ecside
需要在web.xml中配置ecside的过滤器,用于文件导出和语言编码,忘记配置的话,会出现“正在提交”的问题。
<!-- ecside export filter
-->
< filter
>
< filter-name
> ecsideExport
</ filter-name
>
< filter-class
> org.ecside.filter.ECSideFilter
</ filter-class
>
< init-param
>
< param-name
> useEasyDataAccess
</ param-name
>
< param-value
> true
</ param-value
>
</ init-param
>
< init-param
>
< param-name
> useEncoding
</ param-name
>
< param-value
> true
</ param-value
>
</ init-param
>
< init-param
>
< param-name
> encoding
</ param-name
>
< param-value
> UTF-8
</ param-value
>
</ init-param
>
</ filter
>
< filter-mapping
>
< filter-name
> ecsideExport
</ filter-name
>
< url-pattern
> /*
</ url-pattern
>
</ filter-mapping
>
还需配置一下tld,
< taglib
>
< taglib-uri
> /WEB-INF/ecside.tld
</ taglib-uri
>
< taglib-location
> /WEB-INF/taglib/ecside.tld
</ taglib-location
>
</ taglib
>
另外,还可以初始化ecside.properties文件,写这个文件的目的是:把公共的内容集中在一个文件中,方便使用。一旦我们使用ecside 组件,哪个这些配置信息就可以直接引用。形式可以如下:
########### table ###############
table.method=post
table.width=95%
table.pageSizeList=10,20,50,100,1000,2000,all
table.rowsDisplayed=10
table.sortable=true
########### column ###############
column.format.date=yyyy/MM/dd
column.format.number=0.##
column.format.currency=###,###,###
2) 在Struts Action中使用ecside
首先来简单介绍一下RSF(列表、排序、过滤)操作方式:
ecside支持两种RSF方式: 基于java collection层 和 基于数据库层,下面分别介绍:
基于java collection层
这是ec的默认实现方式, 最简单易用.你要做的就是将整个列表所要展现的全部数据放入collection 内,并交给EC来处理.其中RSF操作,全部由EC在内存中完成,由于你已经将全部数据放入了collection中,所以排序 过滤都是基于全部数据的.你要在DAO中做的就是一个 查询操作,SQL语句中不需要加入 关于排序 分页 过滤的代码.
这种方式的优点非常明显:实现简单.缺点同样明显,而且在很大程度上是致命的: 数据量大的时候速度慢,而且很可能OutOfMemory.
基于数据库层
在这种方式下,EC的角色发生了一点点变化。此时,EC负责把 collection 里的内容展现出来, 同时会向你提供RSF相关的参数。而这些参数需要你自己手动取得 并传入到DAO中(当然EC提供了很多方便的方法来帮助你取得这些参数),具体功能的实现需要你自己在DAO中组织相应的SQL语句。
这种方式的优缺点正好和方式一相反。
我这里采用第二种基于数据库层的分页方式实现列表,这时在JSP中使用ecside时,要将<ec:table>中的几个重要属性设定为limit。如: <ec:table filterRowsCallback="process/limit" sortRowsCallback="process/limit" retrieveRowsCallback="process/limit" ...> 这里filterRowsCallback表示过滤的Callback方式,sortRowsCallback表示排序的Callback方式,retrieveRowsCallback表示分页的Callback方式,这三个属性都需要设定为limit。(不熟悉的读者可以查询原版EC中的相关说明,不在这里详述。)
Struts Action的代码为:
/**/ /*
* 用ECSide構建列表
*
*/
public ActionForward list(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
{
String v_type
= request.getParameter(
" type
" );
// 0) 設定過濾條件
Map
< String, Object
> filterMap
= new
HashMap <
String, Object >
();
// filterMap.put("content", "test");
Map
< String, Object
> sortMap
= new
HashMap <
String, Object >
();
sortMap.put(
" createTime
" ,
" desc "
); //
按照創建時間倒序排列
// 1) 設定ECSide分頁對象
Limit limit
= RequestUtils.getLimit(request);
// 取总记录数
int
pageNo =
RequestUtils.getPageNo(request);
int pagesize
= RequestUtils.getCurrentRowsDisplayed(request);
if (pagesize
==
0 )
pagesize
= PAGESIZE;
// 设置总记录数及每页记录数
int
totalRows =
RequestUtils.getTotalRowsFromRequest(request);
if (totalRows
<=
0 )
{
http://www.blogjava.net/Images/OutliningIndicators/InBlock.gif" border="0" >
totalRows
= getEntityManager()
.getCount(getEntityClass(), filterMap);
}
limit.setRowAttributes(totalRows, pagesize);
// 根據參數得到結果
List
< Bulletin
> result
= getEntityManager().queryForListByCriter(
getEntityClass(), filterMap, sortMap,
((pageNo
-
1 ) *
pagesize), pagesize);
request.setAttribute(getEntityListName(), result);
request.setAttribute(
" myPageSize
" , getPageSize(request));
request.setAttribute(
" type
" , v_type);
return mapping.findForward(LIST);
}
这里我构建了过滤条件及排序条件查询数据,通过queryForListByCriter方法,输入当前起始页及每页的显示条数在数据层得到所需数据。详见代码中的注释。另附数据处理层两个方法的代码:
/**//*分页查询数据*/
public List queryForListByCriter(Class entityClass, Map filter,
Map sortMap, int start, int everypage)
{
Criteria criteria = getCriteria(entityClass);
setFilter(criteria, filter);
setSort(criteria, sortMap);
criteria.setFirstResult(start);
criteria.setMaxResults(everypage);
return criteria.list();
}
/**//*计算数据条数*/
public int getCount(Class entityClass, Map filter)
{
Criteria criteria = getCriteria(entityClass);
setFilter(criteria, filter);
criteria.setProjection(Projections.rowCount());
return ((Integer) criteria.uniqueResult()).intValue();
}
注:ecside与ORM工具无关,不管你使用什么方法只要能获得一个集合就好,这里我用的是Hibernate获得的集合。
3)在JSP中使用ecside
需要注意的是:
1. items的值一定要和request.setAttribute(getEntityListName(), result); 属性一致
2. 可以引用属性名做为值显示,如:${bulletin.id}
3. <ec:column property="name" title="公告名称">property属性值一定是映射文件中的某个属性
<%
@ page contentType
=
" text/html; charset=UTF-8
"
%>
<%
@ taglib uri
=
" /WEB-INF/ecside.tld
"
prefix =
" ec
" %>
<%
@ taglib uri
=
" http://java.sun.com/jsp/jstl/core "
prefix =
" c
" %>
<%
@ taglib uri
=
" http://java.sun.com/jsp/jstl/fmt "
prefix =
" fmt
" %>
<%
@ taglib uri
=
" http://java.sun.com/jsp/jstl/functions "
prefix =
" fn
" %>
< c:set
var ="ctx"
value ="${pageContext.request.contextPath}"
/>
< html
>
< head
>
< meta
http-equiv ="Content-Type"
content ="text/html; charset=UTF-8"
/>
< META
HTTP-EQUIV ="pragma"
CONTENT ="no-cache"
>
< META
HTTP-EQUIV ="Cache-Control"
CONTENT ="no-cache, must-revalidate"
>
< META
HTTP-EQUIV ="expires"
CONTENT ="0"
>
< title
> 公告列表 </
title >
< link
rel ="stylesheet"
type ="text/css"
href ="${ctx}/module/bizAcceptance/resources/ecside/css/ecside_style.css"
/>
< script
type ="text/javascript"
src ="${ctx}/module/bizAcceptance/resources/ecside/js/prototype_mini.js"
></
script >
< script
type ="text/javascript"
src ="${ctx}/module/bizAcceptance/resources/ecside/js/ecside.js"
></
script >
< script
type ="text/javascript"
src ="${ctx}/module/bizAcceptance/resources/ecside/js/ecside_msg_utf8_cn.js"
></
script >
</ head
>
< body
>
< table
width ="100%"
border ="0"
cellspacing ="0"
cellpadding ="0"
>
<!-- 校验信息
-->
< tr
>
< td
class ="left"
> <%
@ include file
=
" /module/commons/htmlmessages.jsp
"
%>
</ td >
</ tr
>
< tr
>
< td
height ="30"
>
< span
style ="align:left;font-size:9pt;"
>
請選擇公告
< input
type ="button"
name ="Submit3"
value ='進
入' onclick ="doView()"
>
</ span
>< br >
</ td
>
</ tr
>
< tr
>
< td
>
< ec:table
items ="bulletins"
var ="bulletin"
retrieveRowsCallback
="limit"
filterRowsCallback
="limit"
action
="${ctx}/module/bulletin.do?method=list&type=${type}"
title
="我的公告列表"
useAjax
="false"
showPrint
="false"
width
="100%"
resizeColWidth
="true"
filterable
="false"
listWidth
="100%"
rowsDisplayed
="${myPageSize}"
pageSizeList
="${myPageSize},10,15,20,all"
xlsFileName
="公告列表.xls"
styleClass
="tableRegion"
style
="border:2px;table-layout:fixed;"
classic
="true" >
< ec:row
>
< ec:column
property ="_0"
title ="選擇"
width ="6%"
>
< input
type ="radio"
id ="radio_${GLOBALROWCOUNT}"
name ="checkedRadio"
value ="${bulletin.id}"
>
</ ec:column
>
< ec:column
property ="_1"
title ="序號"
width ="6%"
>
${GLOBALROWCOUNT}
</ ec:column
>
< ec:column
property ="name"
title ="公告名稱"
>
< a
href ="JavaScript:doStarting('${affair.id}')"
title ="點擊查看"
>< c:out
value ="${bulletin.name}"
/></ a >
</ ec:column
>
< ec:column
property ="desn"
title ="描述"
ellipsis ="true"
/>
< ec:column
property ="createBy"
title ="創建人"
width ="10%"
/>
< ec:column
property ="createTime"
title ="創建時間"
width ="20%"
>
< fmt:formatDate
value ="${bulletin.createTime}"
pattern ="yyyy-MM-dd HH:mm:ss"
/>
</ ec:column
>
< ec:column
property ="_2"
title ="可執行操作"
>
< a
href ="${ctx}/module/bulletin.do?method=edit&ID=${bulletin.id}"
>< img
src ="${ctx}/images/affairmgt/update.gif"
border ="0"
title ="編輯"
> 編輯
</ a >
< a
href ="${ctx}/module/bulletin.do?method=delete&ID=${bulletin.id}"
>< img
src ="${ctx}/images/affairmgt/delete.gif"
border ="0"
title ="移除"
> 移除
</ a >
</ ec:column
>
</ ec:row
>
</ ec:table
>
</ td
>
</ tr
>
</ table
>
< script
language ="javascript"
>
var
_confirm =
"
false "
;
var
confirmMsg =
" 查看此公告?
" ;
var
urlPrefix =
" ${ctx}/module/bulletin.do?method=view&ID=
"
;
function
doView(itemId)
{
if
(itemId !=
null
)
{
if
(_confirm ==
'
false '
|| confirm(confirmMsg))
{
ShowWaiting('正在加载数据,请稍候
');
window.location
=
urlPrefix +
itemId;
}
}
else
{
var
radio =
document.getElementsByName('checkedRadio');
for
(i =
0
; i <
radio.length; i ++
)
{
if
(radio[i].checked)
{
if
(_confirm ==
'
false '
|| confirm(confirmMsg))
{
itemId
=
radio[i].value;
ShowWaiting('正在加载数据,请稍候
');
window.location
=
urlPrefix +
itemId;
}
return
;
}
}
alert('請選擇一個公告!');
}
}
</ script
>
</ body
>
</ html
>
其中,<ec:column property="desn" title="描述" ellipsis="true" />,ellipsis属性实现单元格内数据过长的时候,自动截短并加"..."的功能,但是ie only!因为ff不支持 text-overflow: ellipsis; 使用ellipsis="true"的同时,还要为ec:table加上 style="table-layout:fixed;" (如果您已经使用了调整列宽功能 则不用添加)。
4) 启动服务,大功告成。
原文地址: http://www.blogjava.net/allen-zhe/archive/2009/03/09/246328.html
相关文章推荐
- 如何使用Maven构建《hadoop权威指南3》随书的源码包
- 如何使用Maven构建《hadoop权威指南3》随书的源码包
- Flex Builder教程教您如何使用MXML组件构建用户界面
- Hadoop学习笔记(八):如何使用Maven构建《hadoop权威指南3》随书的源码包
- 教你如何在SpringMVC项目中单独使用Feign组件(含源码分析)
- 【hadoop】Hadoop学习笔记(八):如何使用Maven构建《hadoop权威指南3》随书的源码包
- 如何使用axis构建SOAP应用程序
- 如何使用maven构建项目
- 使用 PHP 构建的 Web 应用如何避免 XSS 攻击
- Android源码学习之如何使用eclipse+NDK
- ASP.NET中ListView(列表视图)的使用前台绑定附源码
- 如何使用Xcode的Targets来管理开发和生产版本的构建
- 树状列表组件JSTree的使用
- 如何使用Model View delegate自定义列表
- 如何使用Eclipse导入并运行源码
- 详解Django之admin组件的使用和源码剖析
- python列表操作实例源码讲解(创建、使用、更新、删除)
- 使用cocos创建的项目,如何进行源码调试?
- UGUI背包实现详解之二——UGUI组件如何搭配使用做出背包
- 利用boost::mutex实现线程安全列表模板类,附源码及使用例子