前段时间做了一个简单的维护界面,包括添加,变更与删除的功能.变更界面是在页面中显示一个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>