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

dpn525 · 发表于 2013-2-7 22:37:03

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.id + "|" + data.name + "|"+ data.zdxf + "|"+ data.zxsc + "|"+ data.ychf;$("#tbdy").append('<tr><td td align="center" bgcolor="#ffffff" class="tdIndex" >'+ data.id+'</td><td align="left" bgcolor="#ffffff" class="tdValue" style="cursor: pointer;" >' + data.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" 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"/>

		自动登录	找回密码
密码			立即注册