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

来源：互联网发布：销售数据分析图表编辑：程序博客网时间：2024/05/05 22:18

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

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" ondblclick="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方法

0 0