BlogJava-Studying Java......-随笔分类-其它http://www.blogjava.net/dechon/category/5206.htmlzh-cnFri, 02 Mar 2007 05:57:23 GMTFri, 02 Mar 2007 05:57:23 GMT60不刷新页面,切换表格的编辑状态http://www.blogjava.net/dechon/archive/2005/12/08/22957.htmlTerenceTerenceThu, 08 Dec 2005 03:46:00 GMThttp://www.blogjava.net/dechon/archive/2005/12/08/22957.htmlhttp://www.blogjava.net/dechon/comments/22957.htmlhttp://www.blogjava.net/dechon/archive/2005/12/08/22957.html#Feedback1http://www.blogjava.net/dechon/comments/commentRss/22957.htmlhttp://www.blogjava.net/dechon/services/trackbacks/22957.html      前段时间做了一个简单的维护界面,包括添加,变更与删除的功能.变更界面是在页面中显示一个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>



Terence 2005-12-08 11:46 发表评论
]]>终于贴出了第一篇文章http://www.blogjava.net/dechon/archive/2005/11/24/21234.htmlTerenceTerenceThu, 24 Nov 2005 02:29:00 GMThttp://www.blogjava.net/dechon/archive/2005/11/24/21234.htmlhttp://www.blogjava.net/dechon/comments/21234.htmlhttp://www.blogjava.net/dechon/archive/2005/11/24/21234.html#Feedback1http://www.blogjava.net/dechon/comments/commentRss/21234.htmlhttp://www.blogjava.net/dechon/services/trackbacks/21234.html       如果有遇到同样问题的朋友,请把文章转贴到"随笔"栏目中就可以了!

Terence 2005-11-24 10:29 发表评论
]]>