本站不再更新，欢迎光临 java开发技术网
随笔-230  评论-230  文章-8  trackbacks-0
DWR+struts实现类无刷新更的类似于CS下的表格

<%@ page contentType="text/html;charset=gbk"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<html:base/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>表格测试</title>
<script type='text/javascript' src='/kk/dwr/engine.js'></script>
<script type='text/javascript' src='/kk/dwr/util.js'></script>
<script type='text/javascript' src='/kk/dwr/interface/DynaTable.js'></script>
<style type="text/css">
   Body{
     color:#555555 ;font-size:12px;line-height:150%
   }
   .tabletd{font-size:12px;color:26548b;line-height:150%}
   #controlbar
   {
  border:1px solid #ccc;
  padding:3px;
   }

   .text{
      border : 1px solid #c2c2c2;
   }
  tr.trover{
    background-color:#ddf7ff;
   }
  tr.trout{
    background-color:#ffffff;
   }
   .td{
     color:#555555;font-size:12px;
   }
   .fixedHeaderTr { position:relative; top:expression(this.offsetParent.scrollTop);}
</style>
<script language="javascript">
   var tds=false;
   var current_tr=false;
   var str_return="";
   function tronclick(obj){
      document.all("input1").readOnly=true;
      document.all("input2").readOnly=true;
      document.all("input3").readOnly=true;
      document.all("input4").readOnly=true;
      document.all("input5").readOnly=true;
      document.all("input6").readOnly=true;
     
      obj.cells[0].children[0].checked=true;
      document.all("input1").value=obj.cells[0].children[1].innerText;
      document.all("input2").value=obj.cells[1].children[0].innerText;
      document.all("input3").value=obj.cells[2].children[0].innerText;
      document.all("input4").value=obj.cells[3].children[0].innerText;
      document.all("input5").value=obj.cells[4].children[0].innerText;
      document.all("input6").value=obj.cells[5].children[0].innerText;
      if(tds!=false){
      obj.style.backgroundColor="#c0dde2";
   tds.style.backgroundColor="";
   }
   obj.style.backgroundColor="#c0dde2";
   tds=obj;
   current_tr=obj;
   }
   function add(){
      document.all("input1").value="";
      document.all("input1").readOnly=false;
      document.all("input2").value="";
      document.all("input2").readOnly=false;
      document.all("input3").value="";
      document.all("input3").readOnly=false;
      document.all("input4").value="";
      document.all("input4").readOnly=false;
      document.all("input5").value="";
      document.all("input5").readOnly=false;
      document.all("input6").value="";
      document.all("input6").readOnly=false;
      document.all("hid1").value="add"
   }
   function edit(){
      document.all("input1").readOnly=true;
      document.all("input2").readOnly=false;
      document.all("input3").readOnly=false;
      document.all("input4").readOnly=false;
      document.all("input5").readOnly=false;
      document.all("input6").readOnly=false;
      document.all("hid1").value="edit";
   }

   function save(){
      action=document.all("hid1").value;
      alert(action);
      if(action=="add"){
        trd=document.all.tabA.insertRow();
    var newtr=document.all("tabA").rows;
    
    newtr[newtr.length-1].onclick=function(){
       var trobj = event.srcElement.parentElement;
       if(trobj.tagName != "TR"){
          trobj = trobj.parentElement;
       }
        tronclick(trobj);
     };
    newtr[newtr.length-1].onmouseover=function(){
       //trmover(newtr[newtr.length-1]);
     var trobj = event.srcElement.parentElement;
           if(trobj.tagName != "TR"){//取得行的对象
              trobj = trobj.parentElement;
           }
           trmover(trobj);
    };
    newtr[newtr.length-1].onmouseout=function(){
       //trmout(newtr[newtr.length-1]);
       var trobj = event.srcElement.parentElement;
          if(trobj.tagName != "TR"){//取得行的对象
             trobj = trobj.parentElement;
          }
          trmout(trobj);
    };

       v1=document.all("input1").value;
       v2=document.all("input2").value;
       v3=document.all("input3").value;
       v4=document.all("input4").value;
       v5=document.all("input5").value;
       v6=document.all("input6").value;

       trd.insertCell().innerHTML="<td nowrap class='tabletd' height=21 nowrap onclic='tronclick(this)' onmouseover='trmover(this)' onmouseout='trmout(this)'><input type='radio' name='select' value='"+v1+"'"+"><SPAN>"+v1+"</SPAN></td>";
       trd.insertCell().innerHTML="<td><SPAN>"+v2+"</SPAN></td>";
       trd.insertCell().innerHTML="<td><SPAN>"+v3+"</SPAN></td>";
       trd.insertCell().innerHTML="<td><SPAN>"+v4+"</SPAN></td>";
       trd.insertCell().innerHTML="<td><SPAN>"+v5+"</SPAN></td>";
       trd.insertCell().innerHTML="<td><SPAN>"+v6+"</SPAN></td>";
       
       
       document.all("input1").value="";
       document.all("input2").value="";
       document.all("input3").value="";
       document.all("input4").value="";
       document.all("input5").value="";
       document.all("input6").value="";
       document.all("input1").readOnly=false;
       document.all("input2").readOnly=false;
       document.all("input3").readOnly=false;
       document.all("input4").readOnly=false;
       document.all("input5").readOnly=false;
       document.all("input6").readOnly=false;
       DynaTable.addSaveRecord("'"+v1+"'","'"+v2+"'","'"+v3+"'","'"+v4+"'","'"+v5+"'","'"+v6+"'","'"+action+"'",addreturn);
      }else if(action=="edit"){
       current_tr.cells[1].children[0].innerText=document.all("input2").value;
       current_tr.cells[2].children[0].innerText=document.all("input3").value;
       current_tr.cells[3].children[0].innerText=document.all("input4").value;
       current_tr.cells[4].children[0].innerText=document.all("input5").value;
       current_tr.cells[5].children[0].innerText=document.all("input6").value;
       
       document.all("input2").readOnly=true;
       document.all("input3").readOnly=true;
       document.all("input4").readOnly=true;
       document.all("input5").readOnly=true;
       document.all("input6").readOnly=true;
       
       v1=document.all("input1").value;
       v2=document.all("input2").value;
       v3=document.all("input3").value;
       v4=document.all("input4").value;
       v5=document.all("input5").value;
       v6=document.all("input6").value;
       
       DynaTable.editSaveRecord("'"+v1+"'","'"+v2+"'","'"+v3+"'","'"+v4+"'","'"+v5+"'","'"+v6+"'","'"+action+"'",editreturn);
      }
   }
   //回调函数
   function addreturn(data){
     alert(data);
   }
   function editreturn(data){
     alert(data);
   }
   function deletereturn(data){
     alert(data);
   }
   //TR的鼠标有关函数
   function trmover(obj){
     obj.className="trover";
   }
   function trmout(obj){
     obj.className="trout";
   }
  
   function deletea(){
      if(current_tr==false){
         alert("请选择要删除的记录!");
      }
      var id=current_tr.cells[0].children[1].innerText;
      if(id!=null){
        DynaTable.deleteRecord("'"+id+"'",deletereturn);
        current_tr.removeNode(true);
        document.all("input1").value="";
        document.all("input2").value="";
        document.all("input3").value="";
        document.all("input4").value="";
        document.all("input5").value="";
        document.all("input6").value="";
      }
   }
   function fastpost(){
       window.showModalDialog("fastpos.html",window,"dialogHeight=145Px;dialogWidth=385Px");
   }
</script>
</head>

<body topmargin="0" leftmargin="0">
  <br>
  <table width="481" height="19" border="0" align="center" cellpadding="0" cellspacing="0" id="controlbar">
    <tr>
     <td>
      <button onclick="add()">添加 </button>&nbsp;<button onclick="save()">保存</button>&nbsp;<BUTTON onclick="deletea()">删除</BUTTON>&nbsp; <BUTTON onclick="edit();">修改</BUTTON>&nbsp;<BUTTON onclick="fastpost();">快速定位</BUTTON>
     </td>
    </tr>
  </table>
  <br>
  <div style="position:absolute; left:139px; width=300px; width: expression(tabA.offsetWeight+30);height:98px; overflow:scroll; border:1 solid; background-color:white; scrollbar-face-color:#D4D0C8; scrollbar-shadow-color:white; scrollbar-highlight-color:#F6F5F4; scrollbar-3dlight-color:white; scrollbar-darkshadow-color:#86837E; scrollbar-track-color:#F6F5F4; scrollbar-arrow-color:#86837E; width: 529px;">
  <table cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" width="521" align="center" bordercolorlight="0a426b" border="1" id="tabA" name="tabA" style="margin-top:-2px ">

     <tr height="24px" class="fixedHeaderTr">
      <td bgColor=#cad0e2 width="95" height="24px">
      <div style="font-size:12px; color:#26548b;line-height:150%" align="center"><font color="#000000">序号</font></div>
     </td>
   <td bgColor=#cad0e2 width="74" height="24px">
      <div style="font-size:12px; color:#26548b;line-height:150%" align="center"><font color="#000000">标志</font></div>
     </td>
   <td bgColor=#cad0e2 width="90" height="24px">
      <div style="font-size:12px; color:#26548b;line-height:150%" align="center"><font color="#000000">打印</font></div>
     </td>
   <td bgColor=#cad0e2 width="90" height="24px">
      <div style="font-size:12px; color:#26548b;line-height:150%" align="center"><font color="#000000">计划日期</font></div>
     </td>
   <td bgColor=#cad0e2 width="79" height="24px">
      <div style="font-size:12px; color:#26548b;line-height:150%" align="center"><font color="#000000">类别</font></div>
     </td>
   <td bgColor=#cad0e2 width="79" height="24px">
      <div style="font-size:12px; color:#26548b;line-height:150%" align="center"><font color="#000000">品名</font></div>
     </td>
   </tr>
   <tr  height=21 onclick="tronclick(this)" onMouseOver="this.className='trover'" onMouseOut="this.className='trout'" >
     <td nowrap class="tabletd" height=21 ><input type="radio" name="select"><SPAN>1</SPAN></td>
  <td nowrap><div>fdgfg</div></td>
  <td nowrap><div>fgfdsg</div></td>
  <td nowrap><div>fdsgfdgdsg</div></td>
  <td nowrap><div>fdsgfg</div></td>
  <td nowrap><div>fsg</div></td>
   </tr>
   <tr nowrap height=21 onclick="tronclick(this)"  onMouseOver="this.className='trover'" onMouseOut="this.className='trout'">
     <td nowrap class="tabletd" height=21 ><input type="radio" name="select" ><span>2</span></td>
  <td><div>gf</div></td>
  <td><div>&nbsp;</div></td>
  <td><div>fgsfg</div></td>
  <td><div>&nbsp;</div></td>
  <td><div>fgsfdg</div></td>
   </tr>
   <tr height=21  onclick="tronclick(this)"  onMouseOver="this.className='trover'" onMouseOut="this.className='trout'">
     <td nowrap class="tabletd" height=21 ><input type="radio" name="select" ><span>3</span></td>
  <td><div>gfdg</div></td>
  <td><div>fsgfdg</div></td>
  <td><div>dsg</div></td>
  <td><div>vcbsrdger</div></td>
  <td><div>fgetr</div></td>
   </tr>
  </table>
</div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp; </p>
  <table width="539" height="71" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#c2c2c2">
    <tr>
      <input type="hidden" name="hid1" id="hid1" value="add">
      <td width="46" height="22" bgcolor="#f7f7f7"><div style="font-size:12px">序号</div></td>
      <td width="212" bgcolor="#ffffff"><input type="text" id="input1" name="input1" class="text" readonly="true"/></td>
      <td width="63" bgcolor="#f7f7f7"><div style="font-size:12px">标志</div></td>
      <td width="197" bgcolor="#ffffff"><input type="text" id="input2" name="input2" class="text"  readonly="true"/></td>
    </tr>
    <tr>
      <td height="22" bgcolor="#f7f7f7"><div style="font-size:12px">打印</div></td>
      <td bgcolor="#ffffff"><input type="text" id="input3" name="input3" class="text"  readonly="true"/></td>
      <td bgcolor="#f7f7f7"><div style="font-size:12px">计划日期</div></td>
      <td bgcolor="#ffffff"><input type="text" id="input4" name="input4" class="text"  readonly="true"/></td>
    </tr>
    <tr>
      <td height="21" bgcolor="#f7f7f7"><div style="font-size:12px">类别</div></td>
      <td height="20" bgcolor="#ffffff"><input type="text" id="input5" name="input5" class="text"  readonly="true"/></td>
      <td height="21" bgcolor="#f7f7f7"><div style="font-size:12px">品名</div></td>
      <td height="21" bgcolor="#ffffff"><input type="text" id="input6" name="input6" class="text"  readonly="true"/></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</body>
</html>

=========================================
该表格所需调用的java类如下：

package com.pdw.dwr;

import java.io.IOException;

import javax.servlet.ServletException;

import org.apache.commons.lang.*;

import uk.ltd.getahead.dwr.ExecutionContext;

import com.pdw.wschild.*;

public class DynaTable {
 public String addSaveRecord(String arg1,String arg2,String arg3,String arg4,String arg5,String arg6,String action) {
  arg1=StringUtils.remove(arg1,"'");
  arg2=StringUtils.remove(arg2,"'");
  arg3=StringUtils.remove(arg3,"'");
  arg4=StringUtils.remove(arg4,"'");
  arg5=StringUtils.remove(arg5,"'");
  arg6=StringUtils.remove(arg6,"'");
  action=StringUtils.remove(action,"'");
  if(action.equals("add")){
   System.out.println("你执行的是添加........");
  }
  System.out.println("action->"+action);
  System.out.println(arg1+"->"+arg2+"->"+arg3+"->"+arg4+"->"+arg5+"->"+arg6);
  return "添加成功";
 }
 
 public String editSaveRecord(String arg1,String arg2,String arg3,String arg4,String arg5,String arg6,String action) {
  String result="修改成功";
  arg1=StringUtils.remove(arg1,"'");
  arg2=StringUtils.remove(arg2,"'");
  arg3=StringUtils.remove(arg3,"'");
  arg4=StringUtils.remove(arg4,"'");
  arg5=StringUtils.remove(arg5,"'");
  arg6=StringUtils.remove(arg6,"'");
  action=StringUtils.remove(action,"'");
  System.out.println("action->"+action);
  System.out.println(arg1+"->"+arg2+"->"+arg3+"->"+arg4+"->"+arg5+"->"+arg6);
  return result;
 }
 
 public String deleteRecord(String vid) {
  String id=StringUtils.remove(vid,"'");
  String result="删除成功";
  System.out.println("你要删除记录的id->"+id);
  return result;
 }
 
   /**
    * 调用WebServices返回匹配后返回的字符串数据
    * @param vaddress
    * @return
    */
 public String[] matchAddress(String vaddress) {
  String[] ary_return=null;
  try {
   String address=StringUtils.remove(vaddress,"'");
   WS_gzaddrService ws_gzaddrservice=new WS_gzaddrServiceLocator();
   WS_gzaddr_PortType client=ws_gzaddrservice.getWS_gzaddr();
   return client.address_butt(address);
  }catch(Exception e) {
   e.printStackTrace();
  }
  return ary_return;
 }
 
 public String getInclude() throws ServletException, IOException
 {
     return ExecutionContext.get().forwardToString("/f1.jsp");
 }

}
=================

AJAX使用的框架是：DWR
dwr.xml的配置文件如下：

<dwr>
   <allow>
    <create creator="new" javascript="JDate">
      <param name="class" value="java.util.Date"/>
    </create>
    <create creator="new" javascript="DwrHello">
       <param name="class"  value="com.pdw.dwr.DwrHello"/>
    </create>
    <create creator="new" javascript="DynaTable">
       <param name="class" value="com.pdw.dwr.DynaTable"/>
    </create>
  </allow>
 
</dwr>



=================fastpos.html=======

<html>
  <head>
    <title>快速定位</title>
   
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
 
 <style type="text/css">
   body{font-size:12px}
   td{font-size:12px}
 </style>
 <SCRIPT langague="javascript">
    var row_num=1;
    function winclose(){
      window.close();
    }

    function pos(){
       var parentWin=window.dialogArguments;
       //parentWin.document.all("input1").value="dfasfdsf";
       var ptable=parentWin.document.all("tabA");
       var tr=ptable.rows;
       for(var row_num=1;row_num<tr.length;row_num++){
          if((tr[row_num].cells[0].children[1].innerText==document.all("id").value)&&(tr[row_num].cells[5].children[0].innerText==document.all("procdure").value)){
              alert("找到了!");
              parentWin.tronclick(tr[row_num]);
              tr[row_num].scrollIntoView()
          }
       }
    }
 </SCRIPT>
  </head>
 
  <body topmargin="0" leftmargin="0" style="overflow-x:hidden;overflow-y:hidden">
  <table width="380" height="102" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
    <tr>
      <td height="24" align="center" bgcolor="#E1F0D2" colspan="6" style="font-size:12px">快速定位</td>
   </tr>
    <tr>
      <td width="71" height="23" bgcolor="#f5f5f5">&nbsp;&nbsp;序号 </td>
      <td width="306" bgcolor="#ffffff"> <input type="text" name="id"></td>
    </tr>
    <tr>
      <td height="24" bgcolor="#f5f5f5">&nbsp;&nbsp;品名</td>
      <td bgcolor="#ffffff"><input type="text" name="procdure"></td>
    </tr>
    <tr>
      <td colspan="2" >
        <div align="center">
          <input type="button" name="Submit" value="定 位" onclick="pos()">&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="button" name="Submit" value="关 闭" onclick="winclose()">
        </div></td>
    </tr>
  </table>
  </body>
</html>

posted on 2006-02-22 12:04 有猫相伴的日子 阅读(2034) 评论(2)  编辑  收藏 所属分类: javascript

评论:
# re: DWR+struts实现类无刷新更的类似于CS下的表格 2006-12-16 23:22 | Ken[匿名]
好像没看见struts的影子  回复  更多评论
  
# re: DWR+struts实现类无刷新更的类似于CS下的表格 2007-01-29 13:01 | str
哪有struts，请不要乱说！  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 有猫相伴的日子
本站不再更新，欢迎光临 java开发技术网