本站不再更新,歡迎光臨 java開發(fā)技術(shù)網(wǎng)
          隨筆-230  評論-230  文章-8  trackbacks-0

          <%@ 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);
          ????? }
          ?? }
          ?? //回調(diào)函數(shù)
          ?? function addreturn(data){
          ???? alert(data);
          ?? }
          ?? function editreturn(data){
          ???? alert(data);
          ?? }
          ?? function deletereturn(data){
          ???? alert(data);
          ?? }
          ?? //TR的鼠標(biāo)有關(guān)函數(shù)
          ?? 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">標(biāo)志</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">計(jì)劃日期</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">標(biāo)志</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">計(jì)劃日期</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>

          =========================================
          該表格所需調(diào)用的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("你執(zhí)行的是添加........");
          ??}
          ??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;
          ?}
          ?
          ?? /**
          ??? * 調(diào)用WebServices返回匹配后返回的字符串?dāng)?shù)據(jù)
          ??? * @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="關(guān) 閉" onclick="winclose()">
          ??????? </div></td>
          ??? </tr>
          ? </table>
          ? </body>
          </html>

          posted on 2006-02-22 12:04 有貓相伴的日子 閱讀(2051) 評論(2)  編輯  收藏 所屬分類: javascript

          評論:
          # re: DWR+struts實(shí)現(xiàn)類無刷新更的類似于CS下的表格 2006-12-16 23:22 | Ken[匿名]
          好像沒看見struts的影子  回復(fù)  更多評論
            
          # re: DWR+struts實(shí)現(xiàn)類無刷新更的類似于CS下的表格 2007-01-29 13:01 | str
          哪有struts,請不要亂說!  回復(fù)  更多評論
            

          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           
          本站不再更新,歡迎光臨 java開發(fā)技術(shù)網(wǎng)
          主站蜘蛛池模板: 崇州市| 翁源县| 甘南县| 交口县| 定日县| 赤水市| 祁连县| 巴林右旗| 资源县| 南投市| 长汀县| 大安市| 进贤县| 鹰潭市| 奉贤区| 平凉市| 洛川县| 尼木县| 岐山县| 明水县| 平安县| 涡阳县| 亳州市| 哈巴河县| 华蓥市| 晋江市| 延长县| 泰宁县| 海口市| 塔河县| 色达县| 东丽区| 夹江县| 两当县| 西乌珠穆沁旗| 阿克陶县| 石家庄市| 惠安县| 桂林市| 临沭县| 宜章县|