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

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

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方法

js--前台双击域获取数据实践,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。