前段時間做了一個簡單的維護界面,包括添加,變更與刪除的功能.變更界面是在頁面中顯示一個TABLE(第一列為RadioButton),選中一行后該行變成可編輯狀態,切換到其它行后再恢復成文本顯示.最初做的時候是點擊單選項按鈕后提交到后臺刷新頁面來實現的,后來要求改成在客戶端切換編輯狀態.
1.首先需要解決的是由文本顯示狀態與TEXT框轉換的問題.由文本顯示到編輯框這個可以通過修改對應對象的innerHTML來解決,由編輯框切換到文本顯示開始用的是outerHTML來修改的(后來發現有問題).
2.行切換的問題:當選擇的行做了變換時,如果數據做了更改且未提交的話仍顯示未修改前的值.這個在頁面中加入了一個隱藏域,保存選中行的數據.這部分數據只是用來臨時保存數據的,不需要提交到后臺,未包含在FORM中,只是給了一個ID進行區分;
3.選中的行并不是所有字段都更改為可編輯狀態,只有部分字段需要更改.這里在修改innerHTML的時候進行了判斷;
4.如何與FORM中的屬性匹配的問題:可以在修改innerHTML的時候指定name就可以了;
5.后來在接下來的測試中,如果字段中存在HTML字符,通過outerHTML來賦值,瀏覽器會對它進行解析,并不是想要顯示的信息.開始查JS函數的時候發現了escape與 unescape,以為會進行自動轉換的,后來發現并非如此.在經過幾番修改之后,發現修改outerText屬性則不會對賦的值進行解析.
6.由于一些驗證是定義在后臺的,只有提交到服務器后才會進行校驗.如果檢驗不通過還返回當前頁面,要保留提交前的狀態;這里是給RadioButton一個ID(后臺數據表中的主鍵值).找到對應的行,再把把它置成選中狀態,同時相應的列改為編輯框;
7.應該說到這里基本已經完成了,但在提交到服務器校驗出錯后,返回的頁面中顯示的仍然是編輯前的值,由于頁面做了刷新,隱藏域的值已經被重置.如果再切換到其它行,顯示的仍然是用戶修改后的數據,這部分數據并未成功更新到后臺,應該顯示成修改前的數據.這里通過Request傳回到頁面中,在觸發對應的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>
在實際處理的頁面中,往往在一個頁面中有多個觸發的動作,而Struts的ActionForm中只能指定一個Action,是一種粗粒度的實現(JSF中有更好的解決方案),computeURL( )可以提供一種變通的解決方法.
computeURL( )是在
org.apache.struts.util.RequestUtils(Struts Ver1.1)與org.apache.struts.taglib.TagUtils(Struts Ver1.2)類中的一個函數,用來解析基于Forward,Action,鏈接,頁面參數的URL可以用來動態改變頁面中Form對應的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) 參數說明如下:
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(
下面介紹一下詳細的使用方法:
1.在JSP頁面中導入對應的包:
<%@ page import= "org.apache.struts.util.RequestUtils"%>
或
<%@ page import= "org.apache.struts.taglib.TagUtils"%>
2.創建一個JAVASCRIPT函數:
<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頁面中給對應的表單指定ID以便上面的函數進行確定提交的是哪個FORM(如果一個頁面在存在多個FORM的話):
<html:form styleId="form1" action="/aotherSearch">
.........
</html:form>
4.在需要觸發提交動作的地方,調用2中的JAVASCRIPT函數:
<html:button property="searchInfo" value="檢索" onclick="search()" style="width:100px" />
對應的ACTION與FORM在配置文件中定義.這樣,就可以動態更改FORM的ACTION實現一個FORM對應多個ACTION了.
頁面中經常用到下拉列表,下面是個人對于STRUTS中標簽使用的一點總結:
STRUTS中的下拉選擇列表標簽必須嵌套在<html:form>標簽中,包括:
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中對應的一個屬性.
1.<html:option>
<html:option value="value">displayName</html:option>
其中value為實際使用的值(賦值到ActionForm對應的屬性中) 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" />
補充一點:如果要從 數據庫去取數據，一般是在 action 里調用 DAO ，把結果存入一個ArrayList作為 request 的一個屬性傳到頁面上； 這時一般用 <html:options .../> 標簽.另外，如果數據不從數據庫去取，而是代碼固定的，則一般把這種放到 ActionForm 里，作為屬性在頁面上取，這時一般用 <html:optionsCollection ... /> .