ExtremeTable使用指南Form指南appdemoItEye技术网站.docx
- 文档编号:9572231
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:8
- 大小:17.63KB
ExtremeTable使用指南Form指南appdemoItEye技术网站.docx
《ExtremeTable使用指南Form指南appdemoItEye技术网站.docx》由会员分享,可在线阅读,更多相关《ExtremeTable使用指南Form指南appdemoItEye技术网站.docx(8页珍藏版)》请在冰豆网上搜索。
ExtremeTable使用指南Form指南appdemoItEye技术网站
ExtremeTable使用指南:
Form指南-appdemo-ItEye技术网站
ExtremeTable使用指南:
Form指南
1.引言eXtremeTable本质上是一个form组件,所以我假定表被包在form里,所有的功能都被认为是对form元素的操作。
如果你想在表体中包含一些定制的form元素,或者想将eXtremeTable嵌入到另外的form中,那么你就要使用表标签的form属性用来参照最近的form。
为了示范form特性,我们要做的工作将分解为JSP,Cell和Controller。
1.1.JSP下面列出的是checkbox示例的完整代码。
想要强调的主要事情是表标签form属性设置为presForm,它参照被称为presForm的form元素。
同时请注意表标签的autoIncludeParameters属性。
进行排序、过滤、分页时,默认的eXtremeTable将保持所有传至JSP页面的参数。
这个特性对于内部其他的form进行排序、过滤、分页时,用于高效复制form元素同样有效。
可以设置autoIncludeParameters属性为false来固定它。
在这个form使用id属性是因为xhtm标准的要求,同时你也可以使用form的name属性。
<formid="presForm"action="<c:
urlvalue="selectedPresidentsListedController.run"/>"method="post">Enteryourname:
<input
type="text"
name="userName"
style="font-family:
verdana,arial,helvetica,sans-serif;font-size:
11px;"
value="<c:
outvalue="${param.userName}"/>"
/><ec:
table
items="presidents"
action="${pageContext.request.contextPath}/selectedPresidentsController.run"
view="compact"
imagePath="${pageContext.request.contextPath}/images/table/compact/*.gif"
rowsDisplayed="8"
autoIncludeParameters="false"
form="presForm"
>
<ec:
exportPdf
fileName="output.pdf"
tooltip="ExportPDF"
headerColor="black"
headerBackgroundColor="#b6c2da"
headerTitle="Presidents"
/>
<ec:
row>
<ec:
column
alias="checkbox"
title=""
width="5px"
filterable="false"
sortable="false"
viewsAllowed="compact"
cell="selectedPresident"
/>
<ec:
columnproperty="fullName"title="Name"/>
<ec:
columnproperty="nickName"/>
<ec:
columnproperty="term"/>
</ec:
row>
</ec:
table><input
type="button"
name="sel"
class="button"
value="ListSelectedPresidents"
onclick="document.forms.presForm.submit();"
/><scripttype="text/javascript">
functionsetPresidentState(chkbx){
//makesurethatalwaysknowthestateofthecheckbox
if(chkbx.checked){
eval('document.forms.presForm.chkbx_'+chkbx.name).value='SELECTED';
}else{
eval('document.forms.presForm.chkbx_'+chkbx.name).value='UNSELECTED';
}
}
</script></form>1.1.1.Form特性的技术说明表标签form属性参照最近的form是你使用这个特性所必须知道的,为了更好的理解这个特性,介绍更多的关于内部实现技术的细节是值得的。
如果您不特意指定form属性,eXtremeTable自动在表附近包上一个form。
所有表的动作例如:
排序、过滤、分页将自动给一些隐藏的input元素赋值,然后提交这个form到表标签action属性设置的Aciton。
这非常有效,除非您想要将自己的form元素设置到表体,或者想将这个表放到别的form里。
表标签form属性参照最近的form,所有表的动作例如:
排序、过滤、分页将自动给一些隐藏的input元素赋值,但是现在最近form的action属性将要改变表标签的动作。
这非常重要,因为:
当排序、过滤、分页时,eXtremeTable能够从一个controller得到数据集合,但是提交这个form到别的controller来处理这个form时需要对用户的输入进行处理。
然而,这些对于你使用表标签来说都是透明的。
就像你现在做的那样简单地设置表标签的action属性,然后设置相关的form到你想提交的位置。
1.1.2.Checkbox示例的第一列是checkbox。
因为这列不需要参照bean的属性,alias属性用来唯一地标识这列。
你可以使用property属性,但是alias属性使这列如何使用更清楚。
alias属性还被用来当同样的属性被多列使用时唯一地标识一列。
1.1.3.CustomCell您也许想知道定制的cell是如何通过名称selectedPresident被参照的(cell="selectedPresident")。
这是一个对eXtremeTable的preferences特性更强的使用。
所有要做的就是在extremecomponents.properties文件中添加一个属性。
请参考Preferences来了解更多的信息column.cell.selectedPresident=org.extremesite.cell.SelectedPresidentCellcolumn.cell.selectedPresident就是你定义的用来参照这个cell的名称。
当然你也可以使用这个Cell的全名来进行参照。
<ec:
column
alias="checkbox"
title=""
width="5px"
filterable="false"
sortable="false"
viewsAllowed="compact"
cell="org.extremesite.cell.SelectedPresidentCell"
/>在属性文件中定义参照更方便,它可以被任何JSP文件引用。
如果类名或包名改变的话你只需要对一个地方进行修改。
1.1.4.JavaScriptJavaScript的setPresidentState()方法被定制cell用来设置每个checkbox元素的是否被选中。
设置一个隐藏元素的原因是为了获得浏览器的动作而不提交没有选中的checkbox。
通过这个Controller将一直知道一个元素是否别选中。
1.2.Cell定制的cell被用来生成checkbox,另外它也创建一个隐藏元素用来表示这个checkbox元素是否被选中。
当用户进行排序、过滤、分页时,被选中的数据集合将被放到session里。
getExportDisplay()方法没有返回值,因为治理只需要Html显示。
publicclassSelectedPresidentCellimplementsCell{
publicStringgetExportDisplay(TableModelmodel,Columncolumn){
returnnull;
}publicStringgetHtmlDisplay(TableModelmodel,Columncolumn){
HtmlBuilderhtml=newHtmlBuilder();
CellBuilder.tdStart(html,column);
try{
Objectbean=model.getCurrentRowBean();
StringpresidentId=BeanUtils.getProperty(bean,"presidentId");
CollectionselectedPresidentsIds=(Collection)model.getContext().getSessionAttribute(SelectedPresidentsConstants.SELECTED_PRESIDENTS);
if(selectedPresidentsIds!
=null&&selectedPresidentsIds.contains(presidentId)){
html.input("hidden").name("chkbx_"+presidentId).value(SelectedPresidentsConstants.SELECTED).xclose();
html.input("checkbox").name(BeanUtils.getProperty(bean,"presidentId"));
html.onclick("setPresidentState(this)");
html.checked();
html.xclose();
}else{
html.input("hidden").name("chkbx_"+presidentId).value(SelectedPresidentsConstants.UNSELECTED).xclose();
html.input("checkbox").name(BeanUtils.getProperty(bean,"presidentId"));
html.onclick("setPresidentState(this)");
html.xclose();
}
}catch(Exceptione){}
CellBuilder.tdEnd(html);
returnhtml.toString();
}
}1.3.Controller提示:
Spring框架的Controller和Struts框架的Action非常相像。
当在另外的form中使用eXtremeTable时,你可能有1个或2个controllers。
当form被提交时,你需要一个controller来处理用户的输入并重新定向到另外的JSP页面。
当排序、过滤、分页时,你可能有另外的controller来得到表使用的数据集合并重定向会本页。
或者你可以在同一个controller中分别处理。
checkbox示例里我使用一个controller来关联表标签的action属性。
我也使用另外一个controller来关联form元素的动作。
1.3.1.表标签动作Controller这个controller负责调用SelectedPresidentsUtils来保存被选中的presidentIds到session里并回到同一页。
SelectedPresidentsUtils.saveSelectedPresidentsIDs(request);
Collectionpresidents=presidentsService.getPresidents();
request.setAttribute("presidents",presidents);1.3.2.Form动作Controller这个controller负责通过presidentIds得到数据集并重定向到下一个Jsp页面CollectionselectedPresidentsIds=SelectedPresidentsUtils.saveSelectedPresidentsIDs(request);
CollectionselectedPresidents=SelectedPresidentsUtils.getSelectedPresidents(presidentsService.getPresidents(),selectedPresidentsIds);
request.setAttribute("selected",selectedPresidents);
request.getSession().removeAttribute(SelectedPresidentsConstants.SELECTED_PRESIDENTS);1.3.3.重新得到Checkbox的值我将列出保存presidentIds到session的代码。
我经常被问到如何重新得到eXtremeTable中form元素的值。
它的原理是设置form输入元素名字属性值前面加上一些东西来唯一标识元素本示例中我关心的是以chkbx开头参数的元素。
chkbx后面是唯一的关联到checkbox的presidentId。
它被用来判断这个checkbox是否别选中。
publicstaticCollectionsaveSelectedPresidentsIDs(HttpServletRequestrequest){
Collectionpresidents=(Collection)request.getSession().getAttribute(SelectedPresidentsConstants.SELECTED_PRESIDENTS);
if(presidents==null){
presidents=newArrayList();
request.getSession().setAttribute(SelectedPresidentsConstants.SELECTED_PRESIDENTS,presidents);
}EnumerationparameterNames=request.getParameterNames();
while(parameterNames.hasMoreElements()){
StringparameterName=(String)parameterNames.nextElement();
if(parameterName.startsWith("chkbx_")){
StringpresidentId=StringUtils.substringAfter(parameterName,"chkbx_");
StringparameterValue=request.getParameter(parameterName);
if(parameterValue.equals(SelectedPresidentsConstants.SELECTED)){
if(!
presidents.contains(presidentId)){
presidents.add(presidentId);
}
}else{
presidents.remove(presidentId);
}
}
}returnpresidents;
}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ExtremeTable使用指南Form指南 appdemo ItEye技术网站 ExtremeTable 使用指南 Form 指南 ItEye 技术 网站