通过点击前台双击录入域,弹出模态框,展示数据,并且展示固定数量的数据,实现分页功能。
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方法