JSP编程问题

我想实现一个效果，一个页面分成2个部分，上面的页面负责查询，然后查询到的记录点击“添加”按钮以后，添加到下面的页面上，然后把所有的记录添加好了以后，一次性提交给另一个页面处理。举个例子，数据库有几百本书地记录，我通过查询，一本本地查询出我要的书，然后添加到下面的页面上显示出来，确认无误后就一次提交处理，这样怎么实现？

解决方案 »

  1.   

    这个应当交由ajax来完成，因为你要保证页面不能被刷新才能完成你想要的效果
      

  2.   

    可以用iframe方式实现局部刷新，然后用js将添加的数据放到另一部分里去，因为上面的一部分需要查询出数据另外，不少的js框架可以实现这样的效果，比如extjs + ajax
      

  3.   

    首先我要确定你所说的两个部分该怎么理解.是两个iframe吗?
      

  4.   

    <%@ page contentType="text/html;charset=UTF-8"%>
    <%@ include file="/commons/taglibs.jsp"%>
    <%@taglib uri="/WEB-INF/tag_support_vvise.tld" prefix="vvise"%>
    <html>
    <head>
    <title></title>
    <link href="${ctx}/styles/main.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="${ctx}/scripts/prototype.js"></script>
    <script language="JavaScript" src="${ctx}/scripts/waiting.js"></script>
    <script language="JavaScript" src="${ctx}/scripts/check_all.js"></script>
    <script language="JavaScript" src="${ctx}/scripts/set_select.js"></script>
    <script language="JavaScript" src="${ctx}/scripts/util.js"></script>
    <script language="javascript" src="${ctx}/widgets/WdatePicker/WdatePicker.js" ></script>
    <script language="javaScript">

    function doQuery()
    {   
    waiting();

    $("listFrame").style.height = "0px";
    document.forms[0].target = "listFrame";
    document.forms[0].action = "${ctx }/bs.equipmentDetectPlanT.do?method=list&flag=1";
    document.forms[0].submit();
    }

    function load(){
    $("listFrame").style.height = "0px";
    document.forms[0].target = "listFrame";
    document.forms[0].action = "${ctx }/bs.equipmentDetectPlanT.do?method=list&flag=1";
    document.forms[0].submit();
    }

    function isNowYear(){
    if($('nowDate').value <= '${nowYear}'){
    $('editButtion').disabled = "true";
    }else{
    $('editButtion').disabled = "false";
    }
    }

    function doDele(){
      var ecForm = $('listFrame').contentWindow.document.all.ec;
    if(check_obj(ecForm.plan_ids) <= 0) {
       alert("请选择要删除的记录！"); 
    return;   
            }  
       if (!confirm('确定要删除选择的记录吗？', ""))
      return; 
           var plan_id_ = '';
             
       if (ecForm.plan_ids.length)
       {
       
       for (i=0;i < ecForm.plan_ids.length;i++)
       {
        if (ecForm.plan_ids[i].checked)
        { 
       plan_id_ += ecForm.plan_ids[i].value;
       plan_id_ += ",";
        }
       }    
       }
       else
       {      
        plan_id_ = ecForm.plan_ids.value+",";
       }
       waiting();
       location = '${ctx}/bs.equipmentDetectPlanT.do?method=deleteAll&plan_id_='+plan_id_;
     }
     
     function doAdd(){
    waiting();  
    location = '${ctx}/bs.equipmentDetectPlanT.do?method=edit';
     }
     
     function doEdit(){ 
    var childForm = $('listFrame').contentWindow;
            var ecForm = childForm.document.all.ec;
    if(check_obj(ecForm.plan_ids) != 1){
    alert("请选择一条记录进行修改！"); 
    return;   
    }  
    var plan_id = get_checkbox_value(ecForm.plan_ids);
    waiting();
    location = '${ctx}/bs.equipmentDetectPlanT.do?method=edit&planId=' + plan_id;
    }
    </script>
    </head>
    <body class="mainBody" onload="load();">
    <form action="${ctx }/bs.equipmentDetectPlanT.do" method="post">
    <div class="mainDiv">
       <fieldset class="queryFieldSet">
         <legend><b>查询条件</b></legend>
         <table width="100%">
       <tr>
             
     <td align="right" width="17%">
    计划名称：
     </td>
     <td align="left" width="17%">
    <input type="text" name="plan_Name" id="plan_Name" style="ime-mode:Disabled" value="" class="input_line" />

    </td>

    <td align="right" width="17%">
    检定机构：
    </td>
    <td align="left" width="17%">
    <input type="text" name="detect_organ" id="detect_organ" style="ime-mode:Disabled" value="" class="input_line" />
    </td>
    <td align="right" width="17%">
    所属地区：
    </td>
    <td align="left" width="17%">
    <vvise:select name="areaCode" id="areaCode" default="false" sqlparam="${areaCode}" sqlname="getCodeAreas" />
    </td>

    </tr>
    <tr>
         <td align="right" width="17%">
    年份：
    </td>
    <td align="left" width="17%">
       
    <input type="text" size="17" id="planYear" name="planYear" readonly value="<fmt:formatDate pattern="yyyy" value="${nowYear}"  />" 
    onFocus="WdatePicker({dateFmt:'yyyy',isShowToday:false})" class="Wdate" class="Wdate" />

    </td>

             <td align="right" width="17%">

    </td>
    <td align="left" width="17%">

    </td>
    </tr>
              </table>
              </fieldset>
    </div> 
    <div class="buttonRightDiv">
    <input type="button" class="button" value="查 询" onclick="doQuery()" />
    <input type="button" class="button" value="新 增" onclick="doAdd()" />
    <input type="button" class="button" value="修 改" onclick="doEdit()" />
    <input type="button" class="button" value="删 除" onclick="doDele()" />
    </div>
    <div class="mainDiv">
    <iframe name="listFrame" id="listFrame" frameBorder="0" scrolling="no" class="listFrame"></iframe>
    </div>
    </form>
    </body>
    </html>这是我们做的项目的一个页面<iframe name="listFrame" id="listFrame" frameBorder="0" scrolling="no" class="listFrame"></iframe>就是这个调用了另外一个页面也就是下面这个页面当然其中有strusts的相关跳转 跳转到了 list页面如下：
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ include file="/commons/taglibs.jsp"%>
    <%@ include file="/widgets/ecside/ecside.jsp"%>
    <html>
      <head>
        <title></title> <script language="JavaScript" src="${ctx}/scripts/check_all.js"></script>
    <script type="text/javascript" src="${ctx}/scripts/FusionCharts.js"></script>
    <script type="text/javascript">
          function init()
         {
    parent.$("listFrame").style.height = document.body.scrollHeight + "px";
    parent.waiting_stop();
         }
          function edit(areaCode,dateStr)
          {
              var toLeft = (screen.width-500)/2-2;
      var toTop = (screen.height-350)/2;
      var temp = window.showModalDialog("${ctx}/bs.equipmentDetectPlanT.do?method=editTo&areaCode="+areaCode+"&dateStr="+encodeURIComponent(dateStr)+"&nowDate=${nowDate}","","dialogLeft:" + toLeft + ";dialogTop:"+toTop+";dialogheight: 350px;dialogwidth: 500px;location:no;status:no;help:no;");
      document.forms[0].action = "${ctx }/bs.equipmentDetectPlanT.do?method=list&nowDate=${nowDate}&areaCode=${areaCode}&nowYear=${nowYear}";
      document.forms[0].submit();
          }
          
          function edits(plan_id)
          {
     window.parent.location = '${ctx}/bs.equipmentDetectPlanT.do?method=edit&planId='+plan_id;

          }
        </script>
    </head>
      
      <body onload="init()">
        <ec:table items="BsEquipmentDetectPlanTs" var="bsEquipmentDetectPlanT" title="" width="100%"
    retrieveRowsCallback="process" filterRowsCallback="process" useAjax="false"
    maxRowsExported="1000" pageSizeList="15,30,50,all"
    rowsDisplayed="15" sortable="false" filterable="false"
    resizeColWidth="true" classic="true" minHeight="200"
    toolbarContent="extend status|pagejump|navigation|pagesize|refresh"
    action="${ctx}/bs.equipmentDetectPlanT.do" >
    <ec:row>
        <ec:column property="plan_ids" sortable="false" title="全选<input type='checkbox' name='checkAll' onclick=\"check_all(this.form,this.form.plan_ids)\">" style="text-align:center" ><input type='checkbox' value='${bsEquipmentDetectPlanT.plan_id}' name='plan_ids' id="plan_ids" onclick="check_item(this.form,this.form.plan_ids)" /></ec:column>     
    <ec:column property="plan_code" title="计划编号" ><a href="#" onclick="edits('${bsEquipmentDetectPlanT.plan_id}')">${bsEquipmentDetectPlanT.plan_code }</a></ec:column>
    <ec:column property="plan_name" title="计划名称"></ec:column>
    <ec:column property="organ_name" title="检定机构"></ec:column>
    <ec:column property="area_cade" title="所属地区"></ec:column>
    <ec:column property="plan_year" title="年份"><fmt:formatDate value="${bsEquipmentDetectPlanT.planYear}" pattern="yyyy" /> </ec:column>

    </ec:row>
    </ec:table>
      </body></html>