前段時間做了一個簡單的維護界面,包括添加,變更與刪除的功能.變更界面是在頁面中顯示一個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>