JSP相关技术基础知识

来源：互联网发布：linux命令学习手册编辑：程序博客网时间：2024/05/19 12:24

1 概述

本文档是关于JSP开发指导性文档。包括：基本概念、Layout标签、代码实例、FAQ等。

本文档适合所有Java开发人员。

2 基本知识

2.1 <iframe>介绍

2.2 Html中的target的使用

例如：<a href="../khfw.html" target="_blank">

target由多个定义

_blank：表示将链接打开新窗口

_self:表示在目前窗口或框架里打开链接（默认的）

_parent:表示在父窗口或框架里打开链接

_top:表示在顶层框架里打开新链接

另外还可以直接把框架名称指定给target，表示在某个框架也中打开链接，像csdn这样点击左面的目录树，在右边打开新链接就是这种！

2.3 SPAN 和 DIV 的区别

．html中的 <div>标签的含义

<DIV>称为区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在 DIV 中，它可称作为"DIV block"，或"DIV element"或"CSS-layer"，或干脆叫"layer"。而中文我们把它称作"层次"。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。 <DIV>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class ; Style ; title ; ID 等属性，将会于【Style Sheet】一节才作详述，这处只介绍一个属性设定。以 <DIV align="center"> 为例： align="center" 可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 <DIV align="center"> 的作用和居中标记 <CENTER>一样，前者是由 HTML3.0 开始的标准，后者是通用己久的标示法。

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

例如： <span class="required">*</span> 在message.css中是这样定义的：

span.required {

color: red;

font-size: 9pt;

padding: 4px;

}

3 实例代码

3.1 在layout中，显示时间的标签

<layout:collectionItem width="15%" title="提交时间" property="commitDate" sortable="true" type="date"/>

3.2 Id属性的使用

3.2.1 方法一：采用checkbox的方式

3.2.2 方法二：采用radio的方式

UpdateCfgQuotaRule.jsp

<td class="FORM">是否重新累帐:</td>

<html:radio styleId="noReExpenseId" property="reExpense" value="0"> 不重新累账 </html:radio>

<html:radio styleId="reExpenseId" property="reExpense" value="1"> <span id="textReExpenseIdDisplay">重新累账</span></html:radio>

<span class="required">*</span>

重新累账是比较耗时的过程，只有在限费条件发生变化的情况下，才需要进行此操作。

<td>

</tr>

function onAddClicked(form) {

form.reqCode.value = "gotoAdd";

form.quotaRuleId.value = '<bean:write name="cfgQuotaRuleForm" property="quotaRuleId" />';

form.submit();

}

function onStatusChange(statusValue) {

if(statusValue == "<%=CfgQuotaRuleContants.Status.PAUSE%>") {

document.forms[0].noReExpenseId.style.display = "block";

document.forms[0].reExpenseId.style.display = "none";

document.forms[0].noReExpenseId.checked = "true";

document.all["textReExpenseIdDisplay"].innerHTML = "";

} else {

document.forms[0].noReExpenseId.style.display = "block";

document.forms[0].reExpenseId.style.display = "block";

document.all["textReExpenseIdDisplay"].innerHTML = "重新累账";

}

function onLoad(){

var status = document.forms[0].status;

var statusValue;

if(typeof status.length == 'undefined') {

statusValue = status.value;

} else {

for(var i=0; i< status.length; i++) {

if(status[i].checked){

statusValue = status[i].value;

break;

}

onStatusChange(statusValue);

}

3.2.3 方法三

<html>

function testFun(objInput)

{

var obj = objInput.form['nameCheckbox'];

obj.disabled = false;

if(objInput.value == "2"){

obj.disabled = true;

obj.checked = false;

}

</script>

<input type="radio" name="a" value="1" onclick="testFun(document.forms)">1

<input type="radio" name="a" value="2" onclick="testFun(this)">2

<input type="radio" name="a" value="3" onclick="testFun(this)">3

<br>

<input type="checkbox" name="nameCheckbox" value="1">dddd

</form>

</html>

3.3 logic:iterate

AddCfgDiscountRuleDetail.jsp

ppm, BestoneService.jsp

<logic:iterate id="BestoneService" name="BestoneServiceList" >

<tr>

<td width="250" height="16" align="left"><img src="../client/images/gif-0467.gif" width="9" height="9" /> <input

value="<bean:write name="BestoneService" property="id" />" name="bestoneServiceCheck" type="radio" /><bean:write name="BestoneService" property="serviceName" />     <bean:write name="BestoneService" property="servicePhone" /> </td>

</tr>

</table>

</logic:iterate>

AddCfgQuotaRule.jsp

<qframe:constants id="statusSet" repository="com.channelsoft.usboss.billing.po.support.CfgQuotaRuleContants"

className="Status" />

<logic:iterate id="status" name="statusSet" >

<html:radio idName="status" value="key" property="status" styleClass="inputnotnull" onclick="onStatusChange(this.value)">

<bean:write name="status" property="value" />

</html:radio>

</logic:iterate>

<span class="required">*</span>

</td>

3.4 qframe:button submit中嵌套参数的方式

<layout:collection id="cfgProdService" name="tempProdServiceList" sortAction="client" styleClass="COLLECTION" width="100%" >

<qframe:submit action="/service/cfgProdAddForAddProdServiceAction.do" method="gotoUpdateProdService" img="/images/edit.gif" alt="修改" caption="" styleClass="image">

<qframe:param paramName="serviceId" beanName="cfgProdService" property="cfgService.serviceId"/>

</qframe:submit>

serviceId 代表了传输的参数

cfgService.serviceId 为cfgProdService的属性，解析后，将变成serviceId参数的值。

<qframe:submit action="/service/cfgServiceAction.do" method="gotoDeploy" img="/images/issue.gif" alt="发布" styleClass="image">

<qframe:param paramName="serviceId" beanName="cfgService" property="serviceId"/>

</qframe:submit>

3.5 <qframe使用

1．内嵌多个参数。

<qframe:submit action="/users/subscriberAction.do" js="QFrameUtils.onDelete(2, '用户')" method="cancel" img="/images/delete.gif" alt="删除" styleClass="image">

<qframe:param paramName="subscriberId" beanName="CfgSubscriber" property="subscriberId"/>

<qframe:param paramName="cfgCustomer.custId" beanName="CfgSubscriber" property="cfgCustomer.custId"/>

</qframe:submit>

2．

3.6 验证radio是否被选中

// 验证“是否重新累帐”radio是否被选中

var flag = false;

for(var i = 0; i < form.reExpense.length; i++){

if(form.reExpense[i].checked){

flag = true;

break;

}

if(flag = false){

alert("是否重新累帐必须选择!");

}

3.7 取得radio或checkbox值方式

commonJSFunctions.js 中的getSelectedValue函数，可以预先做一些判断。如果是radio时，先要检查他的长度，然后进行输出相关参数。

addDiscountRuleDetail.jsp中，有对js好的办法。

UpdateCfgQuotaRule.jsp

<td class="FORM">是否重新累帐:</td>

<html:radio styleId="noReExpenseId" property="reExpense" value="0"> 不重新累账 </html:radio>

<html:radio styleId="reExpenseId" property="reExpense" value="1"> <span id="textReExpenseIdDisplay">重新累账</span></html:radio>

<span class="required">*</span>

重新累账是比较耗时的过程，只有在限费条件发生变化的情况下，才需要进行此操作。

<td>

</tr>

<qframe:constants id="statusSet" repository="com.channelsoft.usboss.billing.po.support.CfgQuotaRuleContants"

className="Status" />

<logic:iterate id="status" name="statusSet" >

<html:radio idName="status" value="key" property="status" styleClass="inputnotnull" onclick="onStatusChange(this.value)">

<bean:write name="status" property="value" />

</html:radio>

</logic:iterate>

<span class="required">*</span>

</td>

function onStatusChange(statusValue) {

if(statusValue == "<%=CfgQuotaRuleContants.Status.PAUSE%>") {

document.forms[0].noReExpenseId.style.display = "block";

document.forms[0].reExpenseId.style.display = "none";

document.forms[0].noReExpenseId.checked = "true";

document.all["textReExpenseIdDisplay"].innerHTML = "";

} else {

document.forms[0].noReExpenseId.style.display = "block";

document.forms[0].reExpenseId.style.display = "block";

document.all["textReExpenseIdDisplay"].innerHTML = "重新累账";

}

function onLoad(){

var status = document.forms[0].status;

var statusValue;

if(typeof status.length == 'undefined') {

statusValue = status.value;

} else {

for(var i=0; i< status.length; i++) {

if(status[i].checked){

statusValue = status[i].value;

break;

}

onStatusChange(statusValue);

}

3.8 设置每行的style

<layout:collectionItem width="7%" title="计费单元" property="billingUnit" style="text-align:right"/>

3.9 Light:tabs的使用

String url1= "/npportal/billing/sysProcessOnlineAction.do?reqCode=query&tab=ListSysProcess.Online";

String url2= "/npportal/billing/sysProcessExpiredAction.do?reqCode=query&tab=ListSysProcess.Expired";

<light:tabs styleClass="FORM" width="98%" selectedTabKeyName="tab">

<light:tab width="114" key="ListSysProcess.Online" page="<%=url1%>">

<%@include file="ListSysProcessOnline.jsp" %>

</light:tab>

<light:tab width="114" key="ListSysProcess.Expired" page="<%=url2%>">

<%@include file="ListSysProcessExpired.jsp" %>

</light:tab>

</light:tabs>

<%--

<light:tabs styleClass="FORM" width="98%" selectedTabKeyName="tab">

<light:tab width="114" key="ListSysProcess.Online" page="/jsp_npportal/billing/ListSysProcess.jsp?tab=ListSysProcess.Online">

<%@include file="ListSysProcessOnline.jsp" %>

</light:tab>

<light:tab width="114" key="ListSysProcess.Expired" page="/jsp_npportal/billing/ListSysProcess.jsp?tab=ListSysProcess.Expired">

<%@include file="ListSysProcessExpired.jsp" %>

</light:tab>

</light:tabs>

--%>

3.10 <qframe const的使用

同的实现方式。path="/jsp_npportal/billing/AddCfgDiscountRuleDetail.jsp"

path="/jsp_npportal/billing/AddCfgBillingRuleDetail.jsp"

<%--

<html:option value= "00">信息费</html:option>

<html:option value= "01">通信费</html:option>

</html:select>

</td>--%>

<%-- 现在系统中，只有一种费用类型：信息费

<qframe:constants id="feeRateSet" repository="com.qnuse.usboss.po.support.CfgFeeRateTypeConstants"

className="FeeRateType" />

其他： 显示一串可选框的方式：

<logic:iterate id="feeRateType" name="feeRateSet" >

<html:radio idName="feeRateType" value="key" property="feeRateType" >

<bean:write name="feeRateType" property="value" />

</html:radio>

</logic:iterate>

</td>

</tr>

其他：feeType是被定义在form中了

<%--

<html:option value= "00">信息费</html:option>

<html:option value= "01">通信费</html:option>

</html:select>

</td>--%>

<logic:iterate id="feeType" name="feeSet" >

<html:radio idName="feeType" value="key" property="feeType">

<bean:write name="feeType" property="value" />

</html:radio>

</logic:iterate>

3.11 在<layout:collectionItem <app:writeConstantDesc

引用对象中的的对象描述，在这个页面中有两个form很好的方式。

jsp_npportal/billing/UpdateCfgBillingRule.jsp

<layout:collectionItem width="5%" title="-*-" />

<layout:collectionItem width="5%" title="序号" property="comp_id.ruleSn" sortable="true" />

<%--

<layout:collectionItem width="15%" title="费用类型" property="feeTypeDesc" />

--%>

<layout:collectionItem width="30%" title="计费条件" property="cfgCondition.conditionDesc" />

<layout:collectionItem width="30%" title="计费曲线" property="cfgCurve.curveName" />

<layout:collectionItem width="8%" title="费率类型" sortable="true">

<app:writeConstantDesc repository="com.qnuse.usboss.po.support.CfgFeeRateTypeConstants"

className="FeeRateType" name="cfgBillingRule" property="cfgFeeRateType.feeRateType" />

</layout:collectionItem>

<layout:collectionItem width="8%" title="计费单元" property="billingUnit" style="text-align:right"/>

<layout:collectionItem width="8%" title="费率(分)" property="feeRate" style="text-align:right"/>

3.12 <logic:messagesPresent显示信息

<logic:messagesPresent m

展示相关的信息，在action中，saveSuccess(request, "增加黑名单成功！");它将在message.jsp文件中展示。它将使用messages.css，在layout-config目录下。

<jsp:include page="/message.jsp" />

<%-- Success Messages --%>

<logic:messagesPresent message="true">

<html:messages id="message" message="true">

<html:img pageKey="icon.information.img"

altKey="icon.information" styleClass="icon"/>

<bean:write name="message" filter="false"/><br/>

</html:messages>

</div>

</logic:messagesPresent>

3.13 img的使用

<img src="<%=request.getContextPath()%>/images/look.gif" style="height: 16px;width: 16px;" alt="查看发布历史" >

</a>

3.14 行中列中，增加一个弹出窗口

ListCfgService.jsp

style 是直接使用css样式。class是html的标准标签属性。 styleClass是layout的属性，最终也将翻译成html属性。

<a href="#" onclick="return openlookup('<%=request.getContextPath()%>/service/cfgServiceAction.do?reqCode=detailIntServicePublish&serviceId=<bean:write name='cfgService' property='serviceId'/>','服务发布历史信息','900','400')">

<img src="<%=request.getContextPath()%>/images/look.gif" style="height: 16px;width: 16px;" alt="查看发布历史" ></a>

3.15 行中增加一个链接

ListCfgOrderRelation.jsp

<layout:collectionItem width="4%" title="操作" page="/npportal/usmp/cfgOrderRelationAction.do?reqCode=cancelOneService" paramProperty="oid" paramId="oid" >

<logic:equal name="cfgOrderRelation" property="status" value="2">

退订

</logic:equal>

<logic:equal name="cfgOrderRelation" property="status" value="1">

退订

</logic:equal>

</layout:collectionItem>

<layout:collectionItem width="15%" title="操作" page="/npportal/usmp/cfgOrderRelationAction.do?reqCode=viewLog" paramProperty="oid" paramId="oid" >

<a href="#" onclick="return openlookup('<%=request.getContextPath()%>/npportal/usmp/cfgOrderRelationAction.do?reqCode=viewLog&oid=<bean:write name='cfgOrderRelation' property='oid'/>','显示历史信息','900','400')">历史</a>

</layout:collectionItem>

实际例子：批量操作。方法一、

1．（1）

<layout:collectionItem width="100" title="批次号" >

<bean:write name="CfgAreaPrefixList" property="batchId"/>

</a>

</layout:collectionItem>

（2）

function onBatchDetailClicked(batchId){

//url = '<html:rewrite page="/npportal/billing/cfgAcctTypePrefixAction.do?reqCode=getBatchOperationLog&batchId=" />' + batchId;

url = '<html:rewrite page="/npportal/log/cfgBatchOperationLogAction.do?reqCode=query&batchId=" />' + batchId;

openlookup(url,'显示批量操作详细信息','900','400');

}

方法二、

（1）<layout:collectionItem width="100" title="批次号" >

<bean:write name="cfgAcctTypePrefix" property="batchId"/>

</a>

</layout:collectionItem>

（2）function onOpenBatchDetail(batchId){

url = '<html:rewrite page="/npportal/billing/cfgAcctTypePrefixAction.do?reqCode=getBatchOperationLog&batchId=" />'

url += batchId;

window.open (url, 'newwindow', 'height=600, width=800, top=120, left=120, toolbar=no, menubar=no, scrollbars=1,resizable=no,location=no, status=no');

}

方法三、

（1）<layout:collectionItem width="15%" title="批次号" page="/npportal/log/cfgBatchOperationLogAction.do?reqCode=query" paramProperty="batchId" paramId="batchId" >

<a href="#" onclick="return openlookup('<%=request.getContextPath()%>/npportal/log/cfgBatchOperationLogAction.do?reqCode=query&batchId=' + '<bean:write name="CfgAreaPrefixList" property="batchId"/>','显示批量操作信息','900','400')">

<bean:write name="CfgAreaPrefixList" property="batchId"/>

</a>

</layout:collectionItem>

3.16 在action导向不同action的方法

* @struts.action-forward name="gotoUpdateCfgBlackRuleMaster" path="/npportal/billing/cfgBlackRuleMasterAction.do?reqCode=gotoUpdate"

3.17 Display 和visibility

function onPrint(){

PageSetup_Null();

print();

document.all.printId.style.display = "none";

document.all.rePrintId.style.display = "block";

}

<qframe:button action="/workbill/bizOpenAction.do" onclick="onPrint()" img="/images/ok.gif" caption="打印" privilege="true"/>

</div>

<qframe:button action="/workbill/bizOpenAction.do" onclick="onPrint()" img="/images/ok.gif" caption="重新打印" privilege="true"/>

</div>

style="visibility:visible"

3.18 在action类上，配置标签，在不同的action之间跳转

可以在

* @struts.action-forward name="gotoUpdateBillingRule"

* path="/npportal/billing/cfgBillingRuleAction.do?reqCode=gotoUpdate"

3.19 内嵌帧的使用

WfEntOrderCheck.jsp zj114boss

String url = request.getContextPath()+"/saportalzj114/sam/datDxmpInfoAction.do?reqCode=detail&sn="+request.getAttribute("sn");

3.20 Radio设置默认值的方式

<input type="radio" name="oprType" value="<%=WfEntOrderConstants.Operation.CUST_ADD%>" checked> 开户

<input type="radio" name="oprType" value="<%=WfEntOrderConstants.Operation.CUST_EDIT%>" > 变更

<input type="radio" name="oprType" value="<%=WfEntOrderConstants.Operation.CUST_CANCEL%>" > 销户

<%--

<qframe:constants id="operationSet" repository="com.qnuse.zj114boss.po.support.WfEntOrderConstants" className="Operation" />

<logic:iterate id="operationObj" name="operationSet" >

<html:radio idName="operationObj" property="oprType" value="key" onclick="javascript: onOperationChanged(this.form);">

<bean:write name="operationObj" property="value"/>

</html:radio>

</logic:iterate><span class="required">*</span>

--%>

</td>

</tr>

3.21 Focus的使用

if(form.smscontent.value == '' ) {

alert('短信内容必须填写');

form.smscontent.focus();

return false;

}

3.22 List页面时间显示方式

<layout:collectionItem title="退订时间" property="quitTime" type="date" sortable="true" />

3.23 不要忘了标签的导入

当使用常量类显示的时候。 Logic也是这样。

<%@ taglib uri="/WEB-INF/app.tld" prefix="qframe" %>

3.24 关闭父窗口的设计

不同的实现方法：

<input type="button" class="button" name="close" value="关闭窗口" onclick="parent.window.close()"> 如果是它是被嵌套在其他网页中，就可以用这种方式。

<layout:button styleClass="button" value="关闭" onclick="javascript: window.close();"/>

3.25 <html:rewrite:和其他字符组合使用

location='<html:rewrite page="/saportalzj114/sam/wfEntOrderAction.do?reqCode=queryFinished"/>&wfType=<%=request.getAttribute("wfType")%>';

3.26 window.confirm确认

function onCheckOutput(){

return window.confirm('确定要下载吗？');

}

3.27 <qframe:writeConstantDesc在list和updatejsp都可以用

参见：CfgSmsInfoList.jsp CfgSmsInfoUpdate.jsp

或者：通过脚本来实现。参见：DatCustomerServiceDetail.jsp

<td width="20%" class="FORM">客户业务角色:</td>

<qframe:writeConstantDesc repository="com.qnuse.preregister.utils.DatYyhbAccountConsts" className="CustomerBusinessStatus"

name="npportalzj114CfgSmsInfoForm" property="custBusinessRole" />

</td>

</tr>

3.28 <input type=”file” 只读

3.28.1 方法一

3.28.2 方法一

3.28.3 方法二

主要思路：采用CSS把FILE的输入框隐藏掉，新增加一个TEXT的输入框，把其属性设置为readonly，通过JS把从选择文件得到的值传递给text文本框，从而实现楼主要求的功能。

3.29 <logic:equal的使用

方式－：在action中，设置request.setAttribute("isSystemOrCenter",true);

在jsp中，

// 验证boolean类型

<logic:equal name="isSystemOrCenter" value="true" >

<qframe:lookup property="locationId,locationName" size="10,20"

styleClass="inputnotnull" backImage="/images/search.gif" clearImage="/images/clear.gif"

value="查询" width="700" height="500" action="/npportal/plmEpod/lookupLocationAction.do" reqCode="lookup"/>

</logic:equal>

<logic:equal name="isSystemOrCenter" value="false" >

<html:text readonly="true" styleClass="inputreadonly" property="locationId" />

</logic:equal>

方式二：

可以定义属性，然后在form中取值。

<logic:equal name="linkmanForm" property="isSearch" value="true">

3.30 Form值和ie链接上的参数传递

当在Ie上，传递参数时，如果参数名称，和另外一个form中的参数相同，这些值将会向对应的值，set到对应的参数上。例如：loginform -> ssologinform

3.31 isEmailValid验证邮件

参照DatCustomerServiceAdd.jsp

commonJSFunctions.js

function isEmailValid(field, msg)

{

var str = field.value;

if(str!=""){

if ((str == "") || (str.indexOf("@") == -1) || (str.indexOf(".") == -1)) {

alert(msg);

field.select();

field.focus();

return false;

}

return true;

}

3.32 <html:link>

request.getContextPath() 可以用<html:rewrite来替换。

Example: AddCfgBillingRuleFromDetail.jsp usboss40

<layout:collectionItem width="20%" title="操作" style="text-align:center" >

<img src="<%=request.getContextPath()%>/images/look.gif" alt="查看" border="0" align="absmiddle">

</a>

<logic:notEqual name="cfgBillingRuleDetail" property="comp_id.ruleSn" value="0">

<html:link action="/billing/cfgBillingRuleDetailAction.do?reqCode=moveUp" paramId="ruleSn" paramName="cfgBillingRuleDetail" paramProperty="comp_id.ruleSn">

<img src="<%=request.getContextPath()%>/images/up.gif" alt="上移" border="0" align="absmiddle">

</html:link>

</logic:notEqual>

<logic:notEqual name="cfgBillingRuleDetail" property="comp_id.ruleSn" value="<%=""+(listSize.intValue()-1)%>">

<html:link action="/billing/cfgBillingRuleDetailAction.do?reqCode=moveDown" paramId="ruleSn" paramName="cfgBillingRuleDetail" paramProperty="comp_id.ruleSn">

<img src="<%=request.getContextPath()%>/images/down.gif" alt="下移" border="0" align="absmiddle">

</html:link>

</logic:notEqual>

<html:link action="/billing/cfgBillingRuleDetailAction.do?reqCode=delete" paramId="ruleSn" paramName="cfgBillingRuleDetail" paramProperty="comp_id.ruleSn">

<img src="<%=request.getContextPath()%>/images/delete.gif" alt="删除" border="0" align="absmiddle">

</html:link>

</layout:collectionItem>

3.33 var check = /^[A-Za-z0-9_-]+$/;

AddCfgPricePackStepOne.jsp

if (!check.test(form.pricePackId.value))

{

alert("资费政策编码是非法的！");

return false;

3.34 <input 和 <html区别

<input type="hidden" name="reqCode" > // 这个是作为http url后面的参数。

<html:hidden property="transformUnit" /> // 这个字段必须在form中有这个变量。

3.35 在一行中设置字体的位置

<layout:collectionItem title="费率(元)" property="feeRate" style="text-align:right"/>

3.36 在一行中设置弹出框

<layout:collectionItem width="8%" title="查看发布历史" page="/service/cfgServiceAction.do?reqCode=detailIntServicePublish" paramProperty="serviceId" paramId="serviceId" >

</layout:collectionItem>

3.37 Iframe

Usboss4.1 main.jsp

3.38 <input type="hidden"和<html:hidden区别

当有两个不同的action时，需要用不同的<html:form。同时，<input type="hidden" name="reqCode" > 表示是输入数据，<html:hidden property="quotaValue" />表示从已有的form中取值。

3.39 Checkbox不能像<input type=’text’….这些有readOnly功能

Checkbox不能像<input type=’text’….这些有readOnly功能，但是现在只想让它可视不可选；

<input type="checkbox" onclick="return false;">，这样就可以了

3.40 Window.open

listCfgservice.jsp

window.open('<html:rewrite page="/service/cfgServiceAction.do"/>'+'?reqCode=gotoUpdate&serviceId='+id);

3.41 & 转换

* @struts.action-forward name="query" path="/workbill/myWorkBillAction.do?reqCode=query&queryBillStatus=unfinished"

/business/linkmanAction.do?reqCode=moveLinkmanToGroup&linkmanIds=varLinkmanIds";

3.42 <a href 中使用bean:write

<qframe:submit action="/service/cfgServiceAction.do" method="checkService" img="/images/look.gif" alt="查看产品" styleClass="image">

<qframe:param paramName="serviceId" beanName="cfgService" property="serviceId"/>

</qframe:submit> 

<img src="<%=request.getContextPath()%>/images/look.gif" style="height: 16px;width: 16px;" alt="查看发布历史" ></a>

另外一种实现方式：

<layout:collectionItem width="7%" title="操作" style="text-align:center" >

<logic:equal name="myWorkBillForm" property="queryBillStatus" value="unfinished">

<html:img page="/images/ok.gif" alt="处理工单"/></a> 

</logic:equal>

</layout:collectionItem>

3.43 获取页面对象的方法

元素：

<input type="text" id="discountInvalidDates<%=cfgAcctItemI%>" name="discountInvalidDates<%=cfgAcctItemI%>" maxlength="10" size="10" readonly="readonly" class="input">

<img style="CURSOR: hand" alt="点击这里选择时间" src="<%=contextPath %>/images/calendar.gif" align=absMiddle onClick="fPopUpCalendarDlg(discountInvalidDates<%=cfgAcctItemI%>);return false;" >

//var value = document.all["discountInvalidDates" + i].value;

//var temp = document.getElementById("discountInvalidDates" + i);

var temp = document.getElementsByName("discountInvalidDates" + i);

3.44 getSelectedValue

function getSelectedValue(field) {

var len;

if(field==null)

return null;

len=field.length;

if(len==null) {

if(field.checked) {

return field.value;

}

else {

//alert('请选择一条记录 ');

return null;

}

for (var i=0; i<len; i++)

{

if (field[i].checked)

{

return field[i].value;

}

//alert('请选择一条记录 ');

return null;

}

3.45 Document.all 和document.getElementBy()

1． IE 5及其后续版本都支持IE4 DOM, 其他浏览器也至少部分得兼容。新编写得javascript代码一般不需要为了IE 4得兼容性编写，因为现在几乎已经淘汰。

2．对于IE 4， Document对象和所有文档元素都有数组all[]，它表示了文档中所有得元素或元素中得所有元素。

3． document.all[0] // the first element of the document

4．使用名字比编号更友好，并容易维护。 var specialPara = document.all[“special”] 或者var specialPara =document.vall.special,其中specialPara可能是个数组。

3.46 Location的用法

function onBatchAddClicked(form) {

params = "&strLink=/npportal/billing/cfgAcctTypePrefixAction.do?reqCode=query&serviceName=cfgAcctTypePrefixService&fromatDesc=例如用户类型字冠的导入格式为：字冠，用户类型编码（注：用户类型编码必须存在于用户类型列表中）";

location='<html:rewrite page="/npportal/billing/cfgAcctTypePrefixAction.do?reqCode=gotoAddBatch" />' + params;

}

3.47 丰富的脚本实例

Usboss41 addcfgservice.jsp

3.48 在action拼写url然后重定向

ActionForward 有很多重载函数。

// 给定制的UserList页面提供接口

String userListUrl = theForm.getUserListUrl()+"&authRoleId="+authRoleId;

logger.debug("userListUrl: "+userListUrl);

if(StringUtils.isNotEmpty(userListUrl)) {

return new ActionForward(userListUrl);

}

3.49 BaseForm中action和form之间的转换

Zj114boss ListCfgSysUser.jsp

指定了这个cfgSysUserRoleAction后，对应的form也就切换到了cfgSysUserRoleForm了。然后form跳转到另外一个form了。而不是了原来的cfgSysUserform

form.action="<html:rewrite page="/npportalzj114/sam/cfgSysUserRoleAction.do"/>";

objForm.reqCode.value = "gotoAssignRoles";

objForm.userListUrl.value="/sys/cfgSysUserAction.do?reqCode=query";

objForm.userId.value = getSelectedValue(objForm.oid);

objForm.submit();

3.50 再js中使用html标签

Zj114boss ListCfgSysUser.jsp

function assignSubmit(objForm)

{

if(isOnlyOneSelected(objForm.oid))

{ // 下面的3行代码，必须是写在if判断的内部，否则会引起"添加"和"删除"两个按钮的失效 by zhanglelei

objForm.action="<html:rewrite page="/sys/cfgSysUserRoleAction.do"/>";

objForm.reqCode.value = "gotoAssignRoles";

objForm.userListUrl.value="/sys/cfgSysUserAction.do?reqCode=query";

objForm.userId.value = getSelectedValue(objForm.oid);

objForm.submit();

}

3.51 PPM Client用户联系人list页面脚本

// 处理下拉select菜单不同条目被选中后，所引起不同的变化

function onChangeForSelectDiv(){

var textObj = document.getElementsByName("condition");

var groupObj = document.getElementsByName("linkmanGroup");

if(document.linkmanForm.searchChoose.options[4].selected){

if(textObj[0] != "undefined" && groupObj[0] != "undefined"){

textObj[0].style.display = "none";

groupObj[0].style.display = "block";

}

}else{

if(textObj[0] != "undefined" && groupObj[0] != "undefined"){

textObj[0].style.display = "block";

groupObj[0].style.display = "none";

}

function onSearchClicked(){

document.linkmanForm.isSearch.value='true';

document.linkmanForm.reqCode.value='queryLinkmanFromClient';

document.linkmanForm.submit();

}

function onReturnClicked(){

document.linkmanForm.isSearch.value='false';

document.linkmanForm.reqCode.value='queryLinkmanFromClient';

document.linkmanForm.submit();

}

// 获得被选中的checkbox数量

function checkboxCount(form){

var checkedCount = 0;

if(typeof(form.linkmanCheck) == "undefined"){ // 当没有checkbox时

return;

}

if(form.linkmanCheck.length > 0){

for (var i=0; i<form.linkmanCheck.length; i++){

if(form.linkmanCheck[i].checked == 1){

checkedCount++;

}

}else{ // 当仅有一个checkbox

if(form.linkmanCheck.checked == 1){

checkedCount = 1;

} else {

checkedCount = 0;

}

return checkedCount;

}

// 获得被选中的linkmanIds字符串

function checkboxId(form){

var linkmanIds = "";

if(typeof(form.linkmanCheck) == "undefined"){ // 当没有checkbox时

return;

}

if(form.linkmanCheck.length > 0){ // 当多个checkbox被选中时

for (var i=0; i<form.linkmanCheck.length; i++){

if(form.linkmanCheck[i].checked == 1){

if(linkmanIds == "") {

linkmanIds = form.linkmanCheck[i].id;

} else {

linkmanIds = linkmanIds + "," + form.linkmanCheck[i].id;

}

}else{

if(form.linkmanCheck.checked == 1){ // 当仅有一个checkbox

linkmanIds = form.linkmanCheck[i].id;

}

return linkmanIds;

}

// 当在不同的群组切换时，清空原有群组中被选中成员

function onGroupDiv(groupId){

var linkmanListDiv = document.all(groupId);

// display对于div元素来说，此属性的默认值为block

linkmanListDiv.style.display = (linkmanListDiv.style.display =='none') ? '' : 'none';

if(typeof(linkmanListDiv.all.linkmanCheck) == "undefined"){

return;

}

if(linkmanListDiv.all.linkmanCheck.length > 0){

for (var i=0; i<linkmanListDiv.all.linkmanCheck.length; i++){

if(linkmanListDiv.all.linkmanCheck[i].checked == 1){

linkmanListDiv.all.linkmanCheck[i].checked = 0;

}

}else{

if(linkmanListDiv.all.linkmanCheck.checked == 1){

linkmanListDiv.all.linkmanCheck.checked = 0;

}

// 客户端将调用这个接口来设置右键菜单列表

function getContextualMenu(){

var checkedCount = checkboxCount(document.linkmanForm);

var linkmanIds = checkboxId(document.linkmanForm);

var callLinkManForRightMemuUrl = "/business/linkmanAction.do?reqCode=callLinkManForRightMemu&linkmanIds=varLinkmanIds";

var threePartyConfForRightMemuUrl = "/business/linkmanAction.do?reqCode=threePartyConfForRightMemu&linkmanIds=varLinkmanIds";

var editLinkmanForRightMemuUrl = "/business/linkmanAction.do?reqCode=gotoUpdate&linkmanIds=varLinkmanIds&isClientRightMenu=true";

var moveLinkmanToGroupUrl = "/business/linkmanAction.do?reqCode=moveLinkmanToGroup&linkmanIds=varLinkmanIds";

var removeLinkmanFromGroupUrl = "/business/linkmanAction.do?reqCode=removeLinkmanFromGroup&linkmanIds=varLinkmanIds";

var contextMenuStr;

// 根据被选中的数量展示不同的菜单项

if(checkedCount == 0) {

alert("请选择联系人！");

document.MainForm.contextstring ="";

return;

} else if(checkedCount == 1) {

contextMenuStr= '<context_menu>'+

'<item name="呼叫联系人" shortcut="C" is_available="1" is_new_window="1" ' +

' event="' + callLinkManForRightMemuUrl +'"/>'+

'<item name="三方通话" shortcut="S" is_available="0" is_new_window="1" ' +

' event="' + threePartyConfForRightMemuUrl +'"/>'+

'<item name="编辑联系人" shortcut="M" is_available="1" is_new_window="1" ' +

' event="' + editLinkmanForRightMemuUrl +'"/>'+

'<item name="将联系人转移到" shortcut="T" is_available="1" is_new_window="1" ' +

' event="' + moveLinkmanToGroupUrl +'">'+

' <%=subGroupMenuStr%> '+

'</item>' +

' <item name="删除联系人" shortcut="D" is_available="1" is_new_window="1" ' +

' event="' + removeLinkmanFromGroupUrl +'"/>'+

'</context_menu>';

} else if(checkedCount == 2) {

contextMenuStr= '<context_menu>'+

'<item name="呼叫联系人" shortcut="C" is_available="0" is_new_window="1" ' +

' event="' + callLinkManForRightMemuUrl +'"/>'+

'<item name="三方通话" shortcut="S" is_available="1" is_new_window="1" '+

' event="' + threePartyConfForRightMemuUrl + '"/>'+

'<item name="编辑联系人" shortcut="M" is_available="0" is_new_window="1" '+

' event="' + editLinkmanForRightMemuUrl +'"/>'+

'<item name="将联系人转移到" shortcut="T" is_available="1" is_new_window="1" '+

' event="' + moveLinkmanToGroupUrl +'">'+

' <%=subGroupMenuStr%> '+

'</item>'+

' <item name="删除联系人" shortcut="D" is_available="1" is_new_window="1" '+

' event="' + removeLinkmanFromGroupUrl +'"/>'+

'</context_menu>';

} else {

contextMenuStr= '<context_menu>'+

'<item name="呼叫联系人" shortcut="C" is_available="0" is_new_window="1" ' +

' event="' + callLinkManForRightMemuUrl +'"/>'+

'<item name="三方通话" shortcut="S" is_available="0" is_new_window="1" '+

' event="' + threePartyConfForRightMemuUrl +'"/>'+

'<item name="编辑联系人" shortcut="M" is_available="0" is_new_window="1" '+

' event="' + editLinkmanForRightMemuUrl +'"/>'+

'<item name="将联系人转移到" shortcut="T" is_available="1" is_new_window="1" '+

' event="' + moveLinkmanToGroupUrl +'">'+

' <%=subGroupMenuStr%> '+

'</item>' +

' <item name="删除联系人" shortcut="D" is_available="1" is_new_window="1" '+

' event="' + removeLinkmanFromGroupUrl +'"/>'+

'</context_menu>';

}

// 通过正值表达式来代替变量varLinkmanIds

document.MainForm.contextstring = contextMenuStr.replace(/varLinkmanIds/g, linkmanIds);

}

</script>

3.52 获得checkbox数量

// 获得被选中的checkbox数量

function checkboxCount(form){

var checkedCount = 0;

if(typeof(form.linkmanCheck) == "undefined"){ // 当没有checkbox时

return;

}

if(form.linkmanCheck.length > 0){

for (var i=0; i<form.linkmanCheck.length; i++){

if(form.linkmanCheck[i].checked == 1){

checkedCount++;

}

}else{ // 当仅有一个checkbox

if(form.linkmanCheck.checked == 1){

checkedCount = 1;

} else {

checkedCount = 0;

}

return checkedCount;

}

3.53 点击不同的radio展示不同的内容

参见：计费类型选择

3.54 跳转到新页面，预先设置checked值

AssignRole2User.jsp AssignMenus2Role.jsp

// 如果用户已经存在角色，设置checkbox为被选中

function loadSelectedMenuIds() {

var menuIdArrayString = '<bean:write name="npportalzj114CfgSystemRoleMenuForm" property="menuIdArrayString"/>';

var menuIdArraySelected = menuIdArrayString.split(',');

var menuIdArrayAll = document.getElementsByName("menuIdArray");

if(typeof(menuIdArrayAll) == "undefined"){ // 当没有checkbox时

return;

}

if(menuIdArrayAll.length > 0){ // 当多个checkbox被选中时，按照数组处理

for(var i = 0; i < menuIdArrayAll.length; i++){

//alert(menuIdArrayAll[i].checked);

//alert(menuIdArrayAll[i].value);

for(var j = 0; j < menuIdArraySelected.length; j++) {

if(menuIdArrayAll[i].value == menuIdArraySelected[j]){

menuIdArrayAll[i].checked = 1;

break;

}

}else { // 当仅有一个checkbox， menuIdArrayAll不是数组，仅是一个变量

for(var j = 0; j < menuIdArraySelected.length; j++) {

if(menuIdArrayAll.value == menuIdArraySelected[j]){

menuIdArrayAll.checked = 1;

break;

}

</script>

</head>

3.55 下拉框中不同的值的选择，展示不同的内容

3.56 Checkbox部分选择或全部选择

function onAssignMenusClicked(form){

//alert(form.menuIdArray.length);

if(form.menuIdArray.length > 0){

for (var i=0;i<form.menuIdArray.length;i++){

if(form.menuIdArray[i].checked){

break;

}

if(i==form.menuIdArray.length-1){

alert("请选择要分配的菜单!");

return;

}

form.reqCode.value = 'assignMenus';

form.submit();

}

function checkboxSelect(form){

if(form.menuIdArray.length > 0){

var checkedCount = 0;

for (var i=0;i<form.menuIdArray.length;i++){

if(form.menuIdArray[i].checked==1){

checkedCount++;

}else{

break;

}

if(checkedCount == form.menuIdArray.length){

form.checkAll.checked = 1;

}else{

form.checkAll.checked = 0;

}

}else{

if(form.menuIdArray.checked == 1){

form.checkAll.checked = 1;

}else{

form.checkAll.checked = 0;

}

function selectAll(form){

if(typeof(form.menuIdArray)=="undefined"){

return ;

}

if(form.menuIdArray.length > 0){

if(form.checkAll.checked){

for (var i=0;i<form.menuIdArray.length;i++)

form.menuIdArray[i].checked=1;

}else{

for (var i=0;i<form.menuIdArray.length;i++)

form.menuIdArray[i].checked=0;

}

}else{

if(form.checkAll.checked == 1){

form.menuIdArray.checked = 1;

}else{

form.menuIdArray.checked = 0;

}

function onCancelClicked(form) {

form.reqCode.value='cancelAssignMenus';

form.submit();

}

// 如果用户已经存在角色，设置checkbox为被选中

function loadSelectedMenuIds() {

var menuIdArrayString = '<bean:write name="npportalzj114CfgSystemRoleMenuForm" property="menuIdArrayString"/>';

var menuIdArraySelected = menuIdArrayString.split(',');

var menuIdArrayAll = document.getElementsByName("menuIdArray");

if(typeof(menuIdArrayAll) == "undefined"){ // 当没有checkbox时

return;

}

if(menuIdArrayAll.length > 0){ // 当多个checkbox被选中时，按照数组处理

for(var i = 0; i < menuIdArrayAll.length; i++){

//alert(menuIdArrayAll[i].checked);

//alert(menuIdArrayAll[i].value);

for(var j = 0; j < menuIdArraySelected.length; j++) {

if(menuIdArrayAll[i].value == menuIdArraySelected[j]){

menuIdArrayAll[i].checked = 1;

break;

}

}else { // 当仅有一个checkbox， menuIdArrayAll不是数组，仅是一个变量

for(var j = 0; j < menuIdArraySelected.length; j++) {

if(menuIdArrayAll.value == menuIdArraySelected[j]){

menuIdArrayAll.checked = 1;

break;

}

</script>

</head>

<layout:collectionItem width="4%" title="<input type='checkbox' name='checkAll' value='on' onclick='javascript:selectAll(this.form)' class='propertytitle'>">

<input name="menuIdArray" type="checkbox" value="<bean:write name="CfgSystemMenuId" property="menuId"/>" onclick="javascript:checkboxSelect(this.form);">

</layout:collectionItem>

在form预先定义对应的变量，是否可以在jsp中，直接的取数组那？

private String menuIdArrayString; // 把角色标识组装到字符串中，在jsp页面上使用

private Long[] menuIdArray; // 用户菜单标识数组列表

3.57 Openlookup回调函数使用

应用场景：调用lookup后，根据lookup页面中一行中，某一个元素参数值，决定进行展示本页面中某些元素的展示情况。

实例：

<html:text property="serviceId" size="20" maxlength="32"

readonly="true" styleClass="inputnotnull" />-<html:text

property="serviceName" size="25" maxlength="50" readonly="true"

styleClass="inputnotnull" />

<button

onClick="QFrameUtils.openLookup('/service/lookupCfgServiceAction.do', 'lookup', onCallBackJS_5822933816, '700', '500', '', onCallParamJS_5822933816, onCallPerJS_5822933816)"

class="image"><img src="/ecbm/images/lookup.gif" alt="查询"></button>

<button onClick="onCallClearJS_5822933816()" class="image"><img

src="/ecbm/images/lookupClear.gif" alt="清除"></button>

function onCallPerJS_5822933816(){

return true;

}

function onCallBackJS_5822933816(objValues){

$('serviceId').value=objValues[1];

$('serviceName').value=objValues[2];

$('priceType').value=trim(objValues[3]);

displayExtItme();

} </script>

3.58 屏蔽页面所有输入框

/***

**屏蔽页面所有的输入框，单选多选

**/

function noWriterAllInput(){

for(var i =0 ;i<document.wfCncForm.elements.length; i++){

if(document.wfCncForm.elements[i].type=="checkbox"){

document.wfCncForm.elements[i].disabled = true;

}

if(document.wfCncForm.elements[i].type=="text" ){

document.wfCncForm.elements[i].readOnly = true;

}

if(document.wfCncForm.elements[i].type=="textarea"){

document.wfCncForm.elements[i].readOnly = true;

}

if(document.wfCncForm.elements[i].type=="select-one"){

document.wfCncForm.elements[i].disabled = true;

}

4 HTML

1． table中的所有行的列，必须对齐，如果采用不同的列距，必须，引入多个table。

2．

5 菜单设计

5.1 Struts菜单数据设计

工程的，strutsMenuTree.jsp

<%@ taglib uri="http://struts-menu.sf.net/tag" prefix="menu" %>

<%@ taglib uri="http://struts-menu.sf.net/tag-el" prefix="menu-el" %>

6 Css

qframe_style.jsp中保存了全部的样式。

6.1 CSS Length Units

This section defines the supported length units for CSS attributes. Unless otherwise specified, the length units are supported as of Microsoft® Internet Explorer 3.0 or later. An asterisk (*) indicates the length unit is available as of Internet Explorer 4.0 or later.

Relative length units

em ^*

The height of the element's font.

ex ^*

The height of the letter "x".

Pixels.

Percentage.

Absolute length units

Inches (1 inch = 2.54 centimeters).

Centimeters.

Millimeters.

Points (1 point = 1/72 inches).

Picas (1 pica = 12 points).

Measurements and positions in cascading style sheets (CSS) properties are indicated in length units. Internet Explorer supports two types of length units: relative and absolute.

A relative length unit specifies a length in relation to another length property. Relative length units scale better from one output device to another, such as from a monitor to a printer.

An absolute length unit specifies an absolute measurement, such as inches or centimeters. Absolute length units are useful when the physical properties of the output device are known.

6.2 display

所有可视的文档对象都是块对象(block element)或者内联对象(inline element)。例如， div 是一个块对象。 span 是一个内联对象。块对象的特征是从新的一行开始且能包含其他块对象和内联对象。内联对象被呈递时不会从新行开始，能够包含其他内联对象和数据。改变此属性值对其周围内容布局的影响可能是：

在属性值设为 block 的对象后面添加新行。
从属性值设为 inline 的对象中删除一行。
隐藏属性值设为 none 的对象并释放其在文档中的物理空间

1. block对于div来讲，是默认值。

7 Javascript

7.1 下拉框select onChange()

<option value="">请选择

<option value="1">Item 1

<option value="2">Item 2

<option value="3">Item 3

</select>

function bao(s)

{

txt.value+=s;

//选择后,让第一项被选中,这样,就有Change啦.

document.all.sel.options[0].selected=true;

}

</script>

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/306.htm

JSP相关技术基础知识

1 概述

2 基本知识

2.1 <iframe>介绍

2.2 Html中的target的使用

2.3 SPAN 和 DIV 的区别

3 实例代码

3.1 在layout中，显示时间的标签

3.2 Id属性的使用

3.2.1 方法一：采用checkbox的方式

3.2.2 方法二：采用radio的方式

3.2.3 方法三

3.3 logic:iterate

3.4 qframe:button submit中嵌套参数的方式

3.5 <qframe使用

3.6 验证radio是否被选中

3.7 取得radio或checkbox值方式

3.8 设置每行的style

3.9 Light:tabs的使用

3.10 <qframe const的使用

3.11 在<layout:collectionItem <app:writeConstantDesc

3.12 <logic:messagesPresent显示信息

3.13 img的使用

3.14 行中列中，增加一个弹出窗口

3.15 行中增加一个链接

3.16 在action导向不同action的方法

3.17 Display 和visibility

3.18 在action类上，配置标签，在不同的action之间跳转

3.19 内嵌帧的使用

3.20 Radio设置默认值的方式

3.21 Focus的使用

3.22 List页面时间显示方式

3.23 不要忘了标签的导入

3.24 关闭父窗口的设计

3.25 <html:rewrite:和其他字符组合使用

3.26 window.confirm确认

3.27 <qframe:writeConstantDesc在list和updatejsp都可以用

3.28 <input type=”file” 只读

3.28.1 方法一

3.28.2 方法一

3.28.3 方法二

3.29 <logic:equal的使用

3.30 Form值和ie链接上的参数传递

3.31 isEmailValid验证邮件

3.32 <html:link>

3.33 var check = /^[A-Za-z0-9_-]+$/;

3.34 <input 和 <html区别

3.35 在一行中设置字体的位置

3.36 在一行中设置弹出框

3.37 Iframe

3.38 <input type="hidden"和<html:hidden区别

3.39 Checkbox不能像<input type=’text’….这些有readOnly功能

3.40 Window.open

3.41 & 转换

3.42 <a href 中使用bean:write

3.43 获取页面对象的方法

3.44 getSelectedValue

3.45 Document.all 和document.getElementBy()

3.46 Location的用法

3.47 丰富的脚本实例

3.48 在action拼写url然后重定向

3.49 BaseForm中action和form之间的转换

3.50 再js中使用html标签

3.51 PPM Client用户联系人list页面脚本

3.52 获得checkbox数量

3.53 点击不同的radio展示不同的内容

3.54 跳转到新页面，预先设置checked值

3.55 下拉框中不同的值的选择，展示不同的内容

3.56 Checkbox部分选择或全部选择

3.57 Openlookup回调函数使用

3.58 屏蔽页面所有输入框

4 HTML

5 菜单设计

5.1 Struts菜单数据设计

6 Css

6.1 CSS Length Units

6.2 display

7 Javascript

7.1 下拉框select onChange()

8 参考资料