<%@ 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> <button onclick="save()">保存</button> <BUTTON onclick="deletea()">刪除</BUTTON> <BUTTON onclick="edit();">修改</BUTTON> <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> </div></td>
??<td><div>fgsfg</div></td>
??<td><div> </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> </p>
? <p> </p>
? <p> </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> </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"> 序號 </td>
????? <td width="306" bgcolor="#ffffff"> <input type="text" name="id"></td>
??? </tr>
??? <tr>
????? <td height="24" bgcolor="#f5f5f5"> 品名</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()">
????????? <input type="button" name="Submit" value="關 閉" onclick="winclose()">
??????? </div></td>
??? </tr>
? </table>
? </body>
</html>
posted on 2006-02-22 12:04
有貓相伴的日子 閱讀(2049)
評論(2) 編輯 收藏 所屬分類:
javascript