zoukankan      html  css  js  c++  java
  • jsp中实现一个页面调用另外一个页面所返回的处理结果。

    介绍:List页面:带有搜索条件的页面。
    SelectList页面:实际显示的由List所设的搜索条件所产生的数据结果。
    由于我们的数据列表显示采用2个部分,1:搜索页面部分List页面。2:数据页面部分SelectList页面。
    从逆向思维的角度去列出该功能的实现过程:
    1:在数据页面(SelectList页面)中的每一条记录去添加一个隐藏域数据,为其在选择后,读取该隐藏域中的值。
    例:

    代码
    <input type="checkbox" name="key"  id="<c:out value="${vo.checkMissionId}" />" value="<c:out value="${vo.checkMissionId}" />" onClick="setCheckValue('<c:out value="${vo.checkMissionId}" />','<c:out value="${vo.checkMissionId}" />')">
    <input type="hidden" id="td_<c:out value="${vo.checkMissionId}"/>" value="<c:out value="${vo.checkMissionId}"/>">

    2:在数据页面(SelectList页面)中添加“获得这些被选择的数据”的方法。

    代码
    function getResultInfo(){
        
    var flag=false;
        
    var values="";
        
    var results="";
        
    var name='td_';
        
    var checkboxs=document.getElementsByName("key");
        
    for(var i=0;i<checkboxs.length;i++){
            
    if(checkboxs[i].checked){
                flag
    =true;
                name
    =name+checkboxs[i].value;
                name
    =jtrim(name);
                values
    =document.getElementById(name).value;
                
    if (i>0)
                {
                    results
    =results+','+values;
                }
    else {results=values;}
                
                name
    ="td_";
              }
        }
        
    if(flag)
            
    return results;
        
    else
            
    return false;
    }

    3:在List页面中添加调用获取数据,并返回调用页面的方法:

    function addSelectedMission()
    {
        
    var Results=result.window.getResultInfo();
        
    if(Results){
            parent.window.returnValue 
    = Results;
            parent.window.close();
            }
        
    else alert('请选择任务!');
    }

    解释:这里的result对象就是SelectList页面。result.window.getResultInfo();就是调用SelectList页面中的获取数据的方法。
    其中,这个SelectList是用Frame嵌入到List页面的。其代码如下:

    代码
      <tr>
        
    <td> <!-- UI Structure Begin "信息列表滚动区" -->
          
    <div class="contentDiv">
            
    <!-- UI Structure Begin "信息列表表格" -->
             
    <iframe name="result" id="result" scrolling="yes"  width="100%" height="100%" src='/techtask/missionInfo-result.do?method=missionInfoSelectList&vo.workType=<bean:write name="missionInfoForm" property="vo.workType"/>'  frameborder=0></iframe>
            
    <!-- UI Structure End "信息列表表格" -->
          
    </div>
          
    <!-- UI Structure End "信息列表滚动区" --> </td>
      
    </tr>

      4:在List页面中添加个按钮去触发这个addSelectedMission()的方法。

      <td class="btnMain" onClick="addSelectedMission()">添加选中的企业</td>

      5:在调用的页面添加方法,去调用这个List页面。并对返回的结果进行处理

    代码
      function selectMission(){
          
    var url,ops; 
          url 
    = "/techtask/missionInfo-result.do?method=missionInfoList&SelectType=1"
          ops 
    = "dialogHeight:600px;dialogWidth:800px;center:yes;resizable:yes;status:yes;";
        
    var a = window.showModalDialog(url,"",ops); 
        document.getElementById(
    "vo.checkMissionIds").value=a;//对返回的结果进行处理。
    }

    6:在调用的页面中添加按钮去触发这个事件:

    <td class="btnMain" onClick="selectMission()" >选择行政任务</td>
  • 相关阅读:
    angular-ui-bootstrap-modal必须要说的几个点(转)
    [MySQL]
    [FORWARD]ODBC 各种数据库连接串
    从零开始学习前端JAVASCRIPT — 12、JavaScript面向对象编程
    从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
    从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况
    从零开始学习前端JAVASCRIPT — 10、JavaScript基础ES6(ECMAScript6.0)
    Demo—cookie电商购物车
    从零开始学习前端JAVASCRIPT — 9、JavaScript基础RegExp(正则表达式)
    Demo—标题左右两侧的对等横线
  • 原文地址:https://www.cnblogs.com/kfarvid/p/1620478.html
Copyright © 2011-2022 走看看