前段時間做了一個簡單的維護界面,包括添加,變更與刪除的功能.變更界面是在頁面中顯示一個TABLE(第一列為RadioButton),選中一行后該行變成可編輯狀態(tài),切換到其它行后再恢復(fù)成文本顯示.最初做的時候是點擊單選項按鈕后提交到后臺刷新頁面來實現(xiàn)的,后來要求改成在客戶端切換編輯狀態(tài).
1.首先需要解決的是由文本顯示狀態(tài)與TEXT框轉(zhuǎn)換的問題.由文本顯示到編輯框這個可以通過修改對應(yīng)對象的innerHTML來解決,由編輯框切換到文本顯示開始用的是outerHTML來修改的(后來發(fā)現(xiàn)有問題).
2.行切換的問題:當(dāng)選擇的行做了變換時,如果數(shù)據(jù)做了更改且未提交的話仍顯示未修改前的值.這個在頁面中加入了一個隱藏域,保存選中行的數(shù)據(jù).這部分?jǐn)?shù)據(jù)只是用來臨時保存數(shù)據(jù)的,不需要提交到后臺,未包含在FORM中,只是給了一個ID進行區(qū)分;
3.選中的行并不是所有字段都更改為可編輯狀態(tài),只有部分字段需要更改.這里在修改innerHTML的時候進行了判斷;
4.如何與FORM中的屬性匹配的問題:可以在修改innerHTML的時候指定name就可以了;
5.后來在接下來的測試中,如果字段中存在HTML字符,通過outerHTML來賦值,瀏覽器會對它進行解析,并不是想要顯示的信息.開始查JS函數(shù)的時候發(fā)現(xiàn)了escape與 unescape,以為會進行自動轉(zhuǎn)換的,后來發(fā)現(xiàn)并非如此.在經(jīng)過幾番修改之后,發(fā)現(xiàn)修改outerText屬性則不會對賦的值進行解析.
6.由于一些驗證是定義在后臺的,只有提交到服務(wù)器后才會進行校驗.如果檢驗不通過還返回當(dāng)前頁面,要保留提交前的狀態(tài);這里是給RadioButton一個ID(后臺數(shù)據(jù)表中的主鍵值).找到對應(yīng)的行,再把把它置成選中狀態(tài),同時相應(yīng)的列改為編輯框;
7.應(yīng)該說到這里基本已經(jīng)完成了,但在提交到服務(wù)器校驗出錯后,返回的頁面中顯示的仍然是編輯前的值,由于頁面做了刷新,隱藏域的值已經(jīng)被重置.如果再切換到其它行,顯示的仍然是用戶修改后的數(shù)據(jù),這部分?jǐn)?shù)據(jù)并未成功更新到后臺,應(yīng)該顯示成修改前的數(shù)據(jù).這里通過Request傳回到頁面中,在觸發(fā)對應(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>
在實際處理的頁面中,往往在一個頁面中有多個觸發(fā)的動作,而Struts的ActionForm中只能指定一個Action,是一種粗粒度的實現(xiàn)(JSF中有更好的解決方案),computeURL( )可以提供一種變通的解決方法.
computeURL( )是在
org.apache.struts.util.RequestUtils(Struts Ver1.1)與org.apache.struts.taglib.TagUtils(Struts Ver1.2)類中的一個函數(shù),用來解析基于Forward,Action,鏈接,頁面參數(shù)的URL可以用來動態(tài)改變頁面中Form對應(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)
其中第一個是 Deprecated.第二個在新版本中得以保留,另外還提供了另外一種重載:
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)入對應(yīng)的包:
<%@ page import= "org.apache.struts.util.RequestUtils"%>
或
<%@ page import= "org.apache.struts.taglib.TagUtils"%>
2.創(chuàng)建一個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頁面中給對應(yīng)的表單指定ID以便上面的函數(shù)進行確定提交的是哪個FORM(如果一個頁面在存在多個FORM的話):
<html:form styleId="form1" action="/aotherSearch">
.........
</html:form>
4.在需要觸發(fā)提交動作的地方,調(diào)用2中的JAVASCRIPT函數(shù):
<html:button property="searchInfo" value="檢索" onclick="search()" style="width:100px" />
對應(yīng)的ACTION與FORM在配置文件中定義.這樣,就可以動態(tài)更改FORM的ACTION實現(xiàn)一個FORM對應(yīng)多個ACTION了.
說是貼的第一篇,其實并不完全準(zhǔn)確,文章前幾天就貼上了,但開始的時候放在了"文章"欄目下面而不是隨筆下面,首頁中顯示不出來,反復(fù)修改"選項"的設(shè)置也沒有搞定.在BLOGJAVA上面也沒有找到相關(guān)的使用說明,郁悶了好一段時間.有點想到其它地方申請個BLOG的想法了.早上的時候看別人的BLOG,發(fā)現(xiàn)都是隨筆,猜測可能是只有隨筆才會在自己BLOG的首頁中顯示出來.于是把必到"文章"欄目中的一篇文章搬到了隨筆下,果然顯示在首頁了!
如果有遇到同樣問題的朋友,請把文章轉(zhuǎn)貼到"隨筆"欄目中就可以了!
頁面中經(jīng)常用到下拉列表,下面是個人對于STRUTS中標(biāo)簽使用的一點總結(jié):
STRUTS中的下拉選擇列表標(biāo)簽必須嵌套在<html:form>標(biāo)簽中,包括:
1.<html:select>
2.<html:option>
3.<html:options>
4.<html:optionsCollection>
使用時嵌套如下:
<html:select property="ationForm.property">
<html:option>或<html:options>或<html:optionsCollection>
</html:select>
其中property為ActionForm中對應(yīng)的一個屬性.
1.<html:option>
<html:option value="value">displayName</html:option>
其中value為實際使用的值(賦值到ActionForm對應(yīng)的屬性中) displayName頁面中顯示的信息.
例:<html:option value=""></html:option>顯示一個空白選擇,值為"".
2..<html:options>
<html:options collection="collection" labelProperty="displayName" property="value"/>
其中collection為一個集合,一般是個ArrayList,displayName為前臺顯示的名稱,value為后臺實際使用的值.
例:<html:options collection="arrayList" labelProperty="name" property="id" />
3..<html:optionsCollection>
<html:optionsCollection property="actionForm.property" label="displayName" value="value"/>
其中property為ActionForm中的一個屬性,為一個集合.displayName為前臺顯示的名稱,value為后臺實際使用的值.
例:<html:optionsCollection property="listProperty" label="name" value="id" />
補充一點:如果要從 數(shù)據(jù)庫去取數(shù)據(jù)，一般是在 action 里調(diào)用 DAO ，把結(jié)果存入一個ArrayList作為 request 的一個屬性傳到頁面上； 這時一般用 <html:options .../> 標(biāo)簽.另外，如果數(shù)據(jù)不從數(shù)據(jù)庫去取，而是代碼固定的，則一般把這種放到 ActionForm 里，作為屬性在頁面上取，這時一般用 <html:optionsCollection ... /> .