js--前台双击域获取数据实践

最新推荐文章于 2022-05-01 12:58:41 发布

weixin_40705360

最新推荐文章于 2022-05-01 12:58:41 发布

阅读量159

点赞数

分类专栏： JavaScript

原文链接：https://blog.csdn.net/gaopeng0071/article/details/21179619

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

通过点击前台双击录入域，弹出模态框，展示数据，并且展示固定数量的数据，实现分页功能。

1、首先在触发双击事件（ondblclick）后，需要弹出一个窗口。


  
  
    
    
     
     
    
    
    
    
     
     
      
      function ondbGuanLianADId(){
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      	adId = 
      
      window.showModalDialog(
      
      'getAdForMac.action', 
      
      null ,
      
      'dialogHeight=500px; dialogWidth=420px;');
     
     
    
    

    
    
     
     
    
    
    
    
     
     	
      
      var strs = adId;
     
     
    
    

    
    
     
     
    
    
    
    
     
     	
      
      if(adId != 
      
      undefined){
     
     
    
    

    
    
     
     
    
    
    
    
     
     		
      
      document.getElementById(
      
      "guanLianADId").value = strs.split(
      
      ":")[
      
      0];
     
     
    
    

    
    
     
     
    
    
    
    
     
     		
      
      document.getElementById(
      
      "guanLianADName").value = strs.split(
      
      ":")[
      
      1];
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      	}
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }

a、这里的窗口我采用的是showModalDialog方法

附几种弹出方式：

window.open()

打开一个普通窗口

window.showModalDialog()

打开一个模态对话框, 必须先关闭它, 才能关闭打开它的父窗口.

window.showModelessDialog()

打开一个非模态对话框, 它的存在依赖于打开它的父窗口, 如果父窗口关闭, 此窗口也被关闭.

（窗口弹出详见：http://www.cnblogs.com/codeyu/archive/2009/01/07/1370774.html）

b、注意第二行代码的adId，这个是接受返回值的变量，变量不需要加var定义，直接写就可以（原因未知，待查询）

c、通过此方法第一个参数URL跳转后台Action（我使用的是struts2），获取要展示在双击域内的数据。

2、弹出的模态对话框，代码实现如下：


  
  
    
    
     
     
    
    
    
    
     
     
      
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      <%@ page language="java" contentType="text/html; charset=UTF-8"
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      pageEncoding=
      
      "UTF-8"%>
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      <%@ taglib uri="/struts-tags" prefix="s"%> 
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      <html>
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      <jsp:include page="/commonJS/jsp/common.jsp">
      
      </jsp:include>
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      <script type="text/javascript">
      
      
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      function test(){
     
     
    
    

    
    
     
     
    
    
    
    
     
     	
      
      window.returnValue = 
      
      document.getElementById(
      
      "name1").value;
     
     
    
    

    
    
     
     
    
    
    
    
     
     	
      
      window.close();
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      </script>
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      <head>
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      <base target="_self">
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      </head>
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      <body>
     
     
    
    

    
    
     
     
    
    
    
    
     
     	
      
      <div align="center">
     
     
    
    

    
    
     
     
    
    
    
    
     
     	    
      
      <s:select name="name1" list="dblClickList" listKey="advName" listValue="advName" 
     
     
    
    

    
    
     
     
    
    
    
    
     
     			  
      
      style=
      
      "width:380px;height:400px" 
      
      multiple=
      
      "true" 
      
      id=
      
      "name1" ο
      
      ndblclick=
      
      "test();"/>
     
     
    
    

    
    
     
     
    
    
    
    
     
     		
      
      <!-- 分页 -->
     
     
    
    

    
    
     
     
    
    
    
    
     
     		
      
      <jsp:include page="/commonUtil/dblClickUtil/page.jsp"/>	
     
     
    
    

    
    
     
     
    
    
    
    
     
     	
      
      </div>
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      </body>
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      </html>

a、详见第18、19两行，使用struts2标签来展示后台返回的数据。

b、当点击select域触犯双击事件后，调用js方法test()，使用window.returnValue返回数据到父页面。

（子页面与父页面取值详见：http://www.111cn.net/wy/js-ajax/46975.htm）

注意：

开发完后需要注意不同浏览器之间的兼容性。

详见开发后的结果图：

这里的窗口我采用的是showModalDialog方法

weixin_40705360

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js--前台双击域获取数据实践

通过点击前台双击录入域，弹出模态框，展示数据，并且展示固定数量的数据，实现分页功能。1、首先在触发双击事件（ondblclick）后，需要弹出一个窗口。function ondbGuanLianADId(){ adId = window.showModalDialog('getAdForMac.action', null ,'dialogHeight=500px; dialogWidth=...
复制链接

扫一扫

专栏目录