前段時(shí)間做了一個(gè)簡(jiǎn)單的維護(hù)界面,包括添加,變更與刪除的功能.變更界面是在頁面中顯示一個(gè)TABLE(第一列為RadioButton),選中一行后該行變成可編輯狀態(tài),切換到其它行后再恢復(fù)成文本顯示.最初做的時(shí)候是點(diǎn)擊單選項(xiàng)按鈕后提交到后臺(tái)刷新頁面來實(shí)現(xiàn)的,后來要求改成在客戶端切換編輯狀態(tài).
1.首先需要解決的是由文本顯示狀態(tài)與TEXT框轉(zhuǎn)換的問題.由文本顯示到編輯框這個(gè)可以通過修改對(duì)應(yīng)對(duì)象的innerHTML來解決,由編輯框切換到文本顯示開始用的是outerHTML來修改的(后來發(fā)現(xiàn)有問題).
2.行切換的問題:當(dāng)選擇的行做了變換時(shí),如果數(shù)據(jù)做了更改且未提交的話仍顯示未修改前的值.這個(gè)在頁面中加入了一個(gè)隱藏域,保存選中行的數(shù)據(jù).這部分?jǐn)?shù)據(jù)只是用來臨時(shí)保存數(shù)據(jù)的,不需要提交到后臺(tái),未包含在FORM中,只是給了一個(gè)ID進(jìn)行區(qū)分;
3.選中的行并不是所有字段都更改為可編輯狀態(tài),只有部分字段需要更改.這里在修改innerHTML的時(shí)候進(jìn)行了判斷;
4.如何與FORM中的屬性匹配的問題:可以在修改innerHTML的時(shí)候指定name就可以了;
5.后來在接下來的測(cè)試中,如果字段中存在HTML字符,通過outerHTML來賦值,瀏覽器會(huì)對(duì)它進(jìn)行解析,并不是想要顯示的信息.開始查JS函數(shù)的時(shí)候發(fā)現(xiàn)了escape與 unescape,以為會(huì)進(jìn)行自動(dòng)轉(zhuǎn)換的,后來發(fā)現(xiàn)并非如此.在經(jīng)過幾番修改之后,發(fā)現(xiàn)修改outerText屬性則不會(huì)對(duì)賦的值進(jìn)行解析.
6.由于一些驗(yàn)證是定義在后臺(tái)的,只有提交到服務(wù)器后才會(huì)進(jìn)行校驗(yàn).如果檢驗(yàn)不通過還返回當(dāng)前頁面,要保留提交前的狀態(tài);這里是給RadioButton一個(gè)ID(后臺(tái)數(shù)據(jù)表中的主鍵值).找到對(duì)應(yīng)的行,再把把它置成選中狀態(tài),同時(shí)相應(yīng)的列改為編輯框;
7.應(yīng)該說到這里基本已經(jīng)完成了,但在提交到服務(wù)器校驗(yàn)出錯(cuò)后,返回的頁面中顯示的仍然是編輯前的值,由于頁面做了刷新,隱藏域的值已經(jīng)被重置.如果再切換到其它行,顯示的仍然是用戶修改后的數(shù)據(jù),這部分?jǐn)?shù)據(jù)并未成功更新到后臺(tái),應(yīng)該顯示成修改前的數(shù)據(jù).這里通過Request傳回到頁面中,在觸發(fā)對(duì)應(yīng)的RadioButton后再把值賦到隱藏域中.
部分代碼如下:
<script language="JavaScript" type="text/javascript">
//Get parent node.
window.SearchByTagName = function(e, TAG) {
while(e!=null && e.tagName){
if(e.tagName==TAG.toUpperCase()) {
return(e);
}
e = e.parentNode;
}
return null;
}
var selectedRow = -1; //global
function selectChanged(e) {
var td = SearchByTagName(e, "TD");
var tr = td.parentNode;
var tab = SearchByTagName(tr, "TABLE");
var cellValue = "";
//Reset the cell's value.
if(selectedRow>=0) {
for(var i=td.cellIndex+1; i<tab.rows[selectedRow].cells.length; i++) {
var a = tab.rows[selectedRow].cells[i].getElementsByTagName("INPUT");
for(var k=0; k<a.length; k++) {
if(a[k].type=="text") {
//Valid only in IE.
a[k].outerText = document.getElementById(a[k].name).value;
}
}
}
}
selectedRow = tr.rowIndex;
//Change the cell into text,and save the value into hidden field.
var hyoujijunCell = document.getElementById("hyoujijun" + selectedRow);
var ryakusyouCell = document.getElementById("ryakusyou" + selectedRow);
var nameCell = document.getElementById("name" + selectedRow);
document.getElementById("hyoujijun").value=rtrim(hyoujijunCell.innerText);
document.getElementById("hyoujijun" + selectedRow).innerHTML =
"<input type='text' name='hyoujijun' maxlength='3' style='width:80px' value='" +
rtrim(hyoujijunCell.innerHTML) +"'>";
document.getElementById("ryakusyou").value=rtrim(ryakusyouCell.innerText);
document.getElementById("ryakusyou" + selectedRow).innerHTML =
"<input type='text' name='ryakusyou' maxlength='4' style='width:60px' value='" +
rtrim(ryakusyouCell.innerHTML) +"'>";
document.getElementById("name").value= rtrim(nameCell.innerText);
document.getElementById("name" + selectedRow).innerHTML =
"<input name='name' maxlength='100' style='width:300px' value='" +
rtrim(nameCell.innerHTML) +"'>";
}
function validReturn() {
if ( <%=selectedMasterID%> > 0) {
//Get the selected row,and select it.
var radioSn = document.getElementById("masterid<%=selectedMasterID%>");
radioSn.click( );
//Save original value.If changed other row,restore data as before modified.
document.getElementById("hyoujijun").value = "<%=hyoujijunReturn%>";
document.getElementById("name").value = "<%=nameReturn%>";
document.getElementById("ryakusyou").value = "<%=ryakusyouReturn%>";
}
}
//Clear the last blank.
function rtrim(cellValue) {
if (cellValue.lastIndexOf(" ") >= 0) {
cellValue = cellValue.substr(0,cellValue.lastIndexOf(" "));
}
return cellValue;
}
</script>
<body class="gyomu" onload="validReturn()">
<table>
<logic:present name="masterList">
<logic:iterate id="element" indexId="index" name="masterList">
<tr>
<td class="meisai" style="width: 50px">
<logic:notEqual name="element" property="sakujyo" value="DELETE">
<input type="radio" name="masterid"
value="<bean:write name='element' property='masterid'/>"
onclick="selectChanged(this)" id="masterid<bean:write name='element' property='masterid'/>" />
<%rowCount++;%>
</logic:notEqual>
</td>
<td class="meisai" style="width: 80px" id="hyoujijun<%=index%>">
<bean:write name="element" property="hyoujijun" />
</td>
<td class="meisai" style="width: 60px" id="cd<%=index%>">
<bean:write name="element" property="cd" />
</td>
<td class="meisai" style="width: 300px" id="name<%=index%>">
<bean:write name="element" property="name" />
</td>
<logic:equal name="needShortName" value="true">
<td class="meisai" style="width: 60px" id="ryakusyou<%=index%>">
<bean:write name="element" property="ryakusyou" />
</td>
</logic:equal>
<td class="meisai" style="width: 70px" id="sakujyo<%=index%>">
<bean:write name="element" property="sakujyo" />
</td>
</tr>
</logic:iterate>
</logic:present>
</table>
</body>
在實(shí)際處理的頁面中,往往在一個(gè)頁面中有多個(gè)觸發(fā)的動(dòng)作,而Struts的ActionForm中只能指定一個(gè)Action,是一種粗粒度的實(shí)現(xiàn)(JSF中有更好的解決方案),computeURL( )可以提供一種變通的解決方法.
computeURL( )是在
org.apache.struts.util.RequestUtils(Struts Ver1.1)與org.apache.struts.taglib.TagUtils(Struts Ver1.2)類中的一個(gè)函數(shù),用來解析基于Forward,Action,鏈接,頁面參數(shù)的URL可以用來動(dòng)態(tài)改變頁面中Form對(duì)應(yīng)的Action.Ver1.1中有以下兩種:
1.
computeURL(javax.servlet.jsp.PageContext pageContext, java.lang.String forward, java.lang.String href, java.lang.String page, java.util.Map params, java.lang.String anchor, boolean redirect)
2.computeURL(javax.servlet.jsp.PageContext pageContext, java.lang.String forward, java.lang.String href, java.lang.String page, java.lang.String action, java.util.Map params, java.lang.String anchor, boolean redirect)
其中第一個(gè)是 Deprecated.第二個(gè)在新版本中得以保留,另外還提供了另外一種重載:
computeURL(javax.servlet.jsp.PageContext pageContext, java.lang.String forward, java.lang.String href, java.lang.String page, java.lang.String action, java.lang.String module, java.util.Map params, java.lang.String anchor, boolean redirect, boolean encodeSeparator) 參數(shù)說明如下:
Parameters:
pageContext - PageContext for the tag making this call
forward - Logical forward name for which to look up the context-relative URI (if specified)
href - URL to be utilized unmodified (if specified)
page - Module-relative page for which a URL should be created (if specified)
action - Logical action name for which to look up the context-relative URI (if specified)
params - Map of parameters to be dynamically included (if any)
anchor - Anchor to be dynamically included (if any)
redirect - Is this URL for a response.sendRedirect(
下面介紹一下詳細(xì)的使用方法:
1.在JSP頁面中導(dǎo)入對(duì)應(yīng)的包:
<%@ page import= "org.apache.struts.util.RequestUtils"%>
或
<%@ page import= "org.apache.struts.taglib.TagUtils"%>
2.創(chuàng)建一個(gè)JAVASCRIPT函數(shù):
<script language="JavaScript" type="text/javascript">
function search() {
<%String searchUrl = RequestUtils.computeURL(
pageContext,
null,
null,
"/Search.do",
null,
null,
null,
false);
%>
document.form1.action = "<%=searchUrl%>";
document.form1.submit();
}
</script>
3.在JSP頁面中給對(duì)應(yīng)的表單指定ID以便上面的函數(shù)進(jìn)行確定提交的是哪個(gè)FORM(如果一個(gè)頁面在存在多個(gè)FORM的話):
<html:form styleId="form1" action="/aotherSearch">
.........
</html:form>
4.在需要觸發(fā)提交動(dòng)作的地方,調(diào)用2中的JAVASCRIPT函數(shù):
<html:button property="searchInfo" value="檢索" onclick="search()" style="width:100px" />
對(duì)應(yīng)的ACTION與FORM在配置文件中定義.這樣,就可以動(dòng)態(tài)更改FORM的ACTION實(shí)現(xiàn)一個(gè)FORM對(duì)應(yīng)多個(gè)ACTION了.
頁面中經(jīng)常用到下拉列表,下面是個(gè)人對(duì)于STRUTS中標(biāo)簽使用的一點(diǎn)總結(jié):
STRUTS中的下拉選擇列表標(biāo)簽必須嵌套在<html:form>標(biāo)簽中,包括:
1.<html:select>
2.<html:option>
3.<html:options>
4.<html:optionsCollection>
使用時(shí)嵌套如下:
<html:select property="ationForm.property">
<html:option>或<html:options>或<html:optionsCollection>
</html:select>
其中property為ActionForm中對(duì)應(yīng)的一個(gè)屬性.
1.<html:option>
<html:option value="value">displayName</html:option>
其中value為實(shí)際使用的值(賦值到ActionForm對(duì)應(yīng)的屬性中) displayName頁面中顯示的信息.
例:<html:option value=""></html:option>顯示一個(gè)空白選擇,值為"".
2..<html:options>
<html:options collection="collection" labelProperty="displayName" property="value"/>
其中collection為一個(gè)集合,一般是個(gè)ArrayList,displayName為前臺(tái)顯示的名稱,value為后臺(tái)實(shí)際使用的值.
例:<html:options collection="arrayList" labelProperty="name" property="id" />
3..<html:optionsCollection>
<html:optionsCollection property="actionForm.property" label="displayName" value="value"/>
其中property為ActionForm中的一個(gè)屬性,為一個(gè)集合.displayName為前臺(tái)顯示的名稱,value為后臺(tái)實(shí)際使用的值.
例:<html:optionsCollection property="listProperty" label="name" value="id" />
補(bǔ)充一點(diǎn):如果要從 數(shù)據(jù)庫去取數(shù)據(jù)，一般是在 action 里調(diào)用 DAO ，把結(jié)果存入一個(gè)ArrayList作為 request 的一個(gè)屬性傳到頁面上； 這時(shí)一般用 <html:options .../> 標(biāo)簽.另外，如果數(shù)據(jù)不從數(shù)據(jù)庫去取，而是代碼固定的，則一般把這種放到 ActionForm 里，作為屬性在頁面上取，這時(shí)一般用 <html:optionsCollection ... /> .