`

jquery ajax json 模态对话框（转载）

AjaxjQueryjsonCSSJavaScript 
阅读更多

service层代码代码

 

public JSONArray findPrettyRuleByName(String prettyRuleName,
			String wllx,
			ServletContext ctx) throws Exception {
		RootDaoInterface dao = DataSourceHelper.getDaoInterfae(ctx);
		String sql = "select id,zdxf,zxsc,ychf,name from tb_entity_lianghaoleixing where name like '%" + prettyRuleName + "%' and wllx = ?";
		JSONArray jSONArray = new   JSONArray();
			List list = dao.preparedQuery(sql, new Object[]{wllx});
			for (Iterator it = list.iterator(); it.hasNext();) {
				Hashtable ht = new Hashtable();
				ht = (Hashtable) it.next();
				JSONObject jSONObject =new JSONObject();
				jSONObject.put("id", ht.get("id").toString());
				jSONObject.put("zdxf",ht.get("zdxf").toString());
				jSONObject.put("zxsc", ht.get("zxsc").toString());
				jSONObject.put("name", ht.get("name").toString());
				jSONObject.put("ychf", ht.get("ychf").toString());
				jSONArray.put(jSONObject);
			}
						
		return jSONArray;

	}
 

Action层代码代码

 

 

public ActionForward selectPrettyRule(ActionMapping mapping,
			ActionForm form, HttpServletRequest request,
			HttpServletResponse response) {

		try {

			String prettyRuleName = request.getParameter("pName");
			String wllx = request.getParameter("wllx");
			prettyRuleName = new String(prettyRuleName.getBytes("ISO-8859-1"),
					"UTF-8");

			PrintWriter out = response.getWriter();
			JSONArray jsonArray = null;
			try {
				jsonArray = prettyRuleManageService.findPrettyRuleByName(
						prettyRuleName, wllx, this.getServlet()
								.getServletContext());
			} catch (Exception e) {
				e.printStackTrace();
			}
			// JSONArray array = JSONArray.fromObject(list);
			out.print(jsonArray.toString());
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

 

模态对话框代码代码

 

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="/WEB-INF/tlds/frame-database.tld" prefix="database"%>
<%@ taglib uri="/WEB-INF/tlds/frame-beans.tld" prefix="beans"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%
// 语句准备
String path = request.getContextPath();
String wllx = request.getParameter("wllx");
String sql = "select id,zdxf,zxsc,ychf,name from tb_entity_lianghaoleixing where wllx = '" + wllx + "'";
%>
<head>
<title>查询靓号类型</title>
<script type="text/javascript" src="<%=path%>/js/jquery-1.4.2.js" charset="UTF-8"></script>
<link rel="stylesheet" href="<%=path%>/css/main.css" type="text/css">
<script type="text/javascript" language="javascript">
$(document).ready(function() { 
	
		 var tishi = $("#tishi");
		 var search = $("#search");
		 var tbdy = $("#tbdy");

	$("#search").click(function (){
		var proName=$("#proName").val();
		search.attr("disabled","disabled");
		
		if(proName == null || proName == ""){
			tishi.html("");
			$("#tbdy").empty();
			search.removeAttr("disabled");
			alert("请输入查询条件");
			return;
		}
		
		 tishi.css("color","red").css("font-size","13").html("正在查询请稍后！");
		
		$.getJSON("<%=path %>/prettyRule.do?action=selectPrettyRule",
		{pName:proName,wllx:'<%=wllx %>'},
		function (data){
			if(data.length == 0 ){
				tishi.css("color","red").css("font-size","13").html("查询结束！");
				tishi.html("");
				$("#tbdy").empty();
				search.removeAttr("disabled");
				alert("没有找到相关记录，请重新输入查询条件");
				return;
			}
			tishi.html("");
			tishi.css("color","red").css("font-size","13").html("查询结束！");
			search.removeAttr("disabled");
			tbdy.empty();
			
			tbdy.append("<tr><td width='100px;' height='25' align='center' bgcolor='#E7F0F7' class='textAnmedia'>序号</td><td width='400px;' align='center' bgcolor='#E7F0F7' class='textAnmedia'>靓号类型名称</td></tr>");
			for(var i=0;i<data.length;i++){
				var aa = data[i].id + "|" + data[i].name + "|"+ data[i].zdxf + "|"+ data[i].zxsc + "|"+ data[i].ychf;
				$("#tbdy").append('<tr><td td align="center" bgcolor="#ffffff" class="tdIndex" >'
				+ data[i].id
				+'</td><td align="left" bgcolor="#ffffff" class="tdValue" style="cursor: pointer;" onclick="returnAllVaule(\'' + aa + '\')">' + data[i].name  +'</td></tr>');
			}
			
		$(".tdValue").mouseover(function(){
			var trNode = $(this);
			trNode.css("background","#FFFFFF").css("cursor","pointer").css("font-weight","bold").css("color","red");
		});
	
		$(".tdValue").mouseout(function(){
			var trNode = $(this);
			trNode.css("background","#F0F5F7").css("font-weight","normal").css("color","#7F9DB9");
		});
			
		});
		
	});
	$(".tdValue").mouseover(function(){
		var trNode = $(this);
		trNode.css("background","#FFFFFF").css("cursor","pointer").css("font-weight","bold").css("color","red");
	});

	$(".tdValue").mouseout(function(){
		var trNode = $(this);
		trNode.css("background","#F0F5F7").css("font-weight","normal").css("color","#7F9DB9");
	});
});
function returnAllVaule(AllVaule) {
	window.returnValue = AllVaule;
	window.close();
}
</script>
<style type="text/css">

#input_select{
position:absolute;
left:130px;
top:100px;
}

#tableList{
position:absolute;
top:170px;
}

</style>
</head>
<body>
<table width="600px" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="73A2D6">
	<tr>
		<td colspan="4" align="center" height="25" background="<%=path%>/images/bg_gen_head.jpg" >靓号类型查询</td>
	</tr>
	<tr bgcolor="#FFFFFF">
		<td width="15%" height="25px;" align="right" bgcolor="#E7F0F7">靓号名称：</td>
		<td width="85%" align="left">
			<input type ="text" id="proName" style=width:150px;/>
			<input type="button"  value="  查询  " id="search"/><span id="tishi"></span>
		</td>
	</tr>
</table>

<br/>

<div id="listContent" align="center">
<table width="500px" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="73A2D6">
<tbody id="tbdy">
<tr>
	<td colspan="9" align="center" height="25" background="<%=path%>/images/bg_gen_head.jpg" >查询结果如下</td>
</tr>
	<tr bgcolor="#8EC0E6">
		<td width="100px;" height="25" align="center" bgcolor="#E7F0F7" class="textAnmedia">
			 编号
		</td>
		<td width="400px;"align="center" bgcolor="#E7F0F7" class="textAnmedia">
			靓号类型名称
		</td>
	</tr>
	<beans:tagHandle id="tagID">
		<database:prepareQuery id="<%=tagID%>" scope="page"> 
		<%=sql%>
		</database:prepareQuery>
		<database:rows id="db" query='<%=tagID%>' autoGrid="false">
		<tr>
			<td align="center" bgcolor="#ffffff" style="cursor: pointer;" class="tdIndex" ><%=db.get("id") %></td>
			<td align="left" bgcolor="#ffffff" style="cursor: pointer;" class="tdValue" onclick="returnAllVaule('<%=db.get("id") + "|" + db.get("name") + "|" + db.get("zdxf")  + "|" + db.get("zxsc")  + "|" + db.get("ychf") %>')"><%=db.get("name") %></td>
		</tr>
		</database:rows>
	<database:release query='<%=tagID%>' />
	</beans:tagHandle>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
 

 

点击按钮弹出模态对话框的js代码

 

$("#proid").click(function (){
		if($('#wllx').val() == '-1'){
			alert('请选择网络类型');
			return false;
		}
		var value = window.showModalDialog($('#path').val() + '/jsp/haoka/prettyRuleManage/prettyTypeQuery.jsp?wllx=' + $("#wllx").val(),'','');
		$("#prettyTypeId").val(value.split('|')[0]);
		$("#prettyType").val(value.split('|')[1]);
		$("#zdxf").val(value.split('|')[2]);
		$("#zxsc").val(value.split('|')[3]);
		$("#ychf").val(value.split('|')[4]);
	});

  点击按钮弹出模态对话框代码

<input type="text" id="prettyType" name="prettyType" readonly="readonly"&nbsp; style="width: 345px;"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<input type="button"&nbsp; value="点击查找靓号类型" id="proid"/>
 

 

 

 

 

 

 

 

 

 

 

 

分享到：
| 报表不同数据组合sql
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    完整的jquery-ui-json

    例如，当你看到"js"文件夹，很可能包含了一些处理JSON数据的脚本，这些脚本可能负责从服务器获取JSON数据，然后使用jQuery的`$.getJSON()`或`$.ajax()`方法解析并展示在页面上。 "index.html"是网页的入口文件，...

    Ajax和Jquery

    3. **模态框**：如jQuery UI Dialog或Bootbox.js，实现弹出对话框功能。 4. **分页**：如jQuery Pagination或jQuery UI Pager，帮助用户导航长内容列表。 5. **时间日期选择器**：如jQuery UI Datepicker或...

    jQuery模态窗口用户注册代码.rar

    在网页设计中，jQuery模态窗口常常用于提供一种非侵入性的用户体验，让用户可以在不离开当前页面的情况下进行交互，如填写表单、查看详细信息或进行其他操作。在这个"jQuery模态窗口用户注册代码"中，我们可以深入...

    jquery-ui-1.11.0-beta.1.zip

    - "ui.dialog.jquery.json"则是对话框组件，用于弹出模态窗口，显示警告、确认或输入信息。 最后，"ui.dialog.jquery.json"是对话框组件的配置文件，它可以创建具有可定制标题、按钮和大小的浮动窗口，广泛应用于...

    模态窗口含ajax和jquery例子

    本教程将探讨如何使用jQuery和Ajax技术实现一个简单的模态窗口，以展示如何在支付宝或淘宝等电子商务网站中实现类似的弹出窗口特效。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、...

    使用jQuery写了一个简单的窗口和异步刷新

    例如，使用`$(selector).show()`和`$(selector).hide()`可以显示和隐藏元素，`$(selector).modal()`可以创建一个模态对话框。此外，还可以使用CSS和JavaScript自定义弹窗的样式和行为。 3. **异步刷新（AJAX）**：...

    flexigrid+struts2+json+jquery实例

    JqModal则是一个jQuery插件，用于创建模态对话框，它可以优雅地展示信息，比如在用户选择编辑时打开一个包含表单的窗口。 列百分比的显示意味着表格的列宽可以根据浏览器窗口大小按比例调整，增强了响应式设计。这...

    写个一个简单的web项目,把前端技术:html、css、JavaScript、jQuery，ajax，bootstrop等都放在这个web项目上了。

    在本项目中，我们主要关注的是前端技术的运用，涵盖了HTML、CSS、JavaScript、jQuery、Ajax以及Bootstrap等关键组件。这些技术是构建现代Web应用程序的基础，让我们逐一详细探讨。 首先，HTML（HyperText Markup ...

    ajax 50个经典实例（包括常用特效）

    20. 模态对话框：通过Ajax触发模态对话框，加载所需内容，如确认框、详情查看等。 以上只是部分实例概述，具体实现涉及JavaScript、jQuery、XMLHttpRequest、JSON等多种技术和格式。这个压缩包提供了实践这些技术的...

    jQuery中文参考文档

    jQuery拥有庞大的插件生态，如表单验证插件jQuery Validation，轮播插件jQuery Carousel，模态对话框jQuery UI Dialog等，这些插件扩展了jQuery的功能，满足各种复杂需求。 **8. 组合操作** jQuery支持链式调用，如...

    JQuery技术

    3. **模态对话框（Modal Dialogs）**: 结合Bootstrap或其他库，使用jQuery弹出模态框进行用户确认、错误提示等。 4. **动态加载（Dynamic Loading）**: 当用户滚动页面时，通过Ajax请求加载更多数据，实现无限滚动...

    三大框架整合ajax

    6. **对话框交互**：通过Ajax打开模态对话框，进行增删改查等操作，完成后再局部刷新展示结果。 整合步骤大致如下： 1. **配置Struts2的Ajax插件**：如使用Struts2的Dojo或者JQuery插件，配置相应的拦截器和结果...

    基于jQuery+JavaScript 的实用随书实例

    2. 模态对话框：jQuery可以用来实现弹出式模态对话框，当用户点击按钮或其他触发器时，对话框显示，并在完成后关闭。 3. 表单验证：利用jQuery对表单元素的选取和事件处理能力，可以轻松实现表单验证，确保用户输入...

    jQuery实现的点击删除弹出对话框特效源码.zip

    2. **弹出对话框**：对话框效果通常是通过模拟一个模态窗口实现的，可以使用jQuery UI的`dialog()`插件或者自定义CSS和HTML结构来创建。对话框通常包含“确定”和“取消”按钮，以供用户确认或取消删除操作。 3. **...

    JQuery实战100列

    15. **模态对话框**: 创建弹出框或模态对话框，用于展示内容、提示信息或用户确认操作。 **jQuery实战100列可能包含的内容** 这个系列可能涵盖以上各个方面的实例和技巧，逐步讲解如何使用jQuery解决实际问题，...

    jquery-3.7.1.zip web组件

    5. **Ajax交互**：`.ajax()`函数是jQuery处理异步数据的核心，它可以发送XMLHttpRequest请求，处理JSON、XML等多种数据格式，简化了前后端交互。 描述中提到的其他组件库，如`bootstrap`、`font-awesome`和`...

    jquery客户管理界面

    7. 模态对话框：对于编辑或查看单个客户信息，通常会使用模态对话框。jQuery UI的`.dialog()`功能可以方便地创建这种弹出式窗口。 8. 行为绑定：使用`.click()`, `.change()`, `.blur()`等事件绑定函数，可以为按钮...

    jquery-2.1.0 jqueryUI1.10.4

    1. **Dialog（对话框）**：$.ui.dialog提供了一种创建模态或非模态对话框的方式，可以自定义标题、内容和按钮。 2. **Datepicker（日期选择器）**：方便用户输入或选择日期，可配置多种样式和选项。 3. **Accordion...

    Head First Jquery（中文版）

    例如，日期选择器、轮播图、模态对话框等插件，可以极大地提升网站的用户体验。 在.NET、C#和Windows开发环境中，jQuery扮演着不可或缺的角色。在ASP.NET项目中，jQuery可以方便地与服务器端的C#代码交互，实现动态...

    做网站必不可少的Jquery特效

    jQuery提供了多种创建弹出框的方法，例如使用`$.dialog()`或`$.modal()`等函数，可以快速创建模态对话框或者提示框。这些弹出框不仅可以包含文本，还可以嵌入HTML内容，如图片、表格等。弹出框的样式可自定义，能够...

Magicbox
Global site tag (gtag.js) - Google Analytics