我写的这个双击文本域是基于ssh框架写的,大家只要能考到我的思想就够了。首先我们的双击肯定要js事件支持。而且一般双击事件都会改变两个文本框里面的值。我先写一个简单的jsp页面
用户Id:<input type="text" id="selfId" name="selfId" ondblclick = "queryAll('selfId','relaionId','methodType','userCode:selfId')"/></br> 用户姓名:<input type="text" id="relationId" name="relationId"/>
看上面的jsp页面可以知道我们要写queryAll这个js函数。这个函数传递了四个参数:
selfId-->表示双击选点某个值后需要改变的主要文本框,在上面的例子中改变的就是用户Id
relationId-->表示连带需要改变的文本框的值,在上面的例子中改变的用户的姓名
methodType-->在后台将要执行哪个方法,相当一个标志,因为要写通用的,所以针对不同的需求肯定是会执行不同的方法,所以在这里写一个标志位。
params-->表示在后台执行方法的时候你想传递的参数可以自己约定。
了解完参数,再看看这个方法的具体实现
function queryCode(selfId,relationId,methodType,paramsByJSON){ var obj = new Object(); obj.selfId = selfId; obj.relationId = relationId; obj.methodType = methodType; //参数类型:A:a|B:b|C:c......其中A是参数的名字,a对应到页面某个文本域的value值,当然最好是隐藏文本域了。 if(paramsByJSON != null && paramsByJSON != ""){ var temp = paramsByJSON.substring(1,paramsByJSON.length); var params = ""; var arrayStr = paramsByJSON.split("|"); for(var i = 0 ; i < arrayStr.length ; i++){ var tempArray = arrayStr[i].split(":"); var value = $("#"+tempArray[1]).val(); params += tempArray[0]+":"+value+"|"; } obj.paramsByJSON = params.substring(0,params.length-1); }else{ obj.paramsByJSON = null; } //将文本值放在window.obj中 window.obj = obj; var url= "webapps/common/QueryAll.jsp"; var w=(screen.availWidth-300)/2; var h=(screen.availHeight-460)/2; //通过window.showModalDialog打开一个模态的对话框 window.showModalDialog(url,window,"dialogHide:yes;help:no;status:no;scroll:yes;dialogWidth:300px;dialogHeight:380px,dialogLeft:"+w+",dialogTop:"+h); }
通过上面的showModalDialog打开一对话框QueryAll.jsp。你可以在这个页面加载完后立刻执行MethodTye对应的后台方法。下面是QueryAll.jsp页面的样例:
<%@ page contentType="text/html; charset=GBK"%> <%@ include file="/common/taglibs.jsp" %> <%@ page import="java.util.*"%> <html> <head> <base target="_self"> <title>请选择</title> <link href="${ctx}/common/css/Standard.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="${ctx}/common/js/jquery-1.7.1.js"></script> <script language='javascript'> //页面加载时,自动查询 function loadPage(){ var url = "queryAll.do"; var parentWindow = window.dialogArguments; //获得从页面传递过来的参数 var obj = parentWindow.obj; //将父页面的值保存在子页面 $("#selfId").val(obj.selfId); $("#relationId").val(obj.relationId); $("#methodType").val(obj.methodType); $("#paramsByJSON").val(obj.paramsByJSON); //回调函数,构建一个select标签域 function callback(obj){ $("#codeselect").html(""); var optionStr = ""; for(var i = 0 ; i < obj.data.length ; i++){ optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>"; } $("#codeselect").html(optionStr); $("#count").val(obj.totalRecords); $("#pageSize").val(obj.recordsReturned); $("#pageNo").val(1); $("#resultCount").val(obj.recordsReturned); lastPageNum = Math.ceil(Number($("#count").val())/Number($("#resultCount").val())); } var params = { selfId : obj.selfId, relationId : obj.relationId, methodType : obj.methodType, params : obj.paramsByJSON }; jQuery.post(url,params,callback,'json'); } //设置文本框的值 function setFieldValue(){ var value = $("#codeselect option:selected").val(); var label = $("#codeselect option:selected").text(); var str = new String(label); var array = str.split('--'); var selfId = $("#selfId").val(); var relationId = $("#relationId").val(); var parentWindow = window.dialogArguments; parentWindow.document.getElementById(selfId).value = value; parentWindow.document.getElementById(relationId).value = array[1]; //为了后续想要执行父页面方法提出callback方法 window.close(); try { if(typeof(eval(parentWindow.sonCallbackFather))=="function"){ parentWindow.sonCallbackFather(selfId,relationId); } }catch(e){ } } //取消文本框的值 function cancelFieldValue(){ var selfId = $("#selfId").val(); var relationId = $("#relationId").val(); var parentWindow = window.dialogArguments; parentWindow.document.getElementById(selfId).value = ''; parentWindow.document.getElementById(relationId).value = ''; window.close(); } //首页 function fistPage(){ var url = "queryAll.do"; var params = { selfId :$("#selfId").val(), relationId : $("#relationId").val(), methodType : $("#methodType").val(), params : $("#paramsByJSON").val(), pageNo : 1, pageSize : $("#resultCount").val() }; function callback(obj){ $("#codeselect").html(""); var optionStr = ""; for(var i = 0 ; i < obj.data.length ; i++){ optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>"; } $("#codeselect").html(optionStr); $("#count").val(obj.totalRecords); $("#pageNo").val(1); $("#pageSize").val($("#resultCount").val()); } jQuery.post(url,params,callback,'json'); } //上一页 function upPage(){ var url = "queryAll.do"; var params = { selfId :$("#selfId").val(), relationId : $("#relationId").val(), methodType : $("#methodType").val(), params : $("#paramsByJSON").val(), pageNo : (Number($("#pageNo").val()) == 1) ? 1 : Number($("#pageNo").val())-1, pageSize : $("#resultCount").val() }; function callback(obj){ $("#codeselect").html(""); var optionStr = ""; for(var i = 0 ; i < obj.data.length ; i++){ optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>"; } $("#codeselect").html(optionStr); $("#count").val(obj.totalRecords); $("#pageNo").val((Number($("#pageNo").val()) == 1) ? 1 : Number($("#pageNo").val())-1); $("#pageSize").val($("#resultCount").val()); } jQuery.post(url,params,callback,'json'); } //下一页 function nextPage(){ var url = "queryAll.do"; var params = { selfId :$("#selfId").val(), relationId : $("#relationId").val(), methodType : $("#methodType").val(), params : $("#paramsByJSON").val(), pageNo : (Number($("#pageNo").val()) == lastPageNum ) ? lastPageNum : Number($("#pageNo").val())+1, pageSize : $("#resultCount").val() }; function callback(obj){ $("#codeselect").html(""); var optionStr = ""; for(var i = 0 ; i < obj.data.length ; i++){ optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>"; } $("#codeselect").html(optionStr); $("#count").val(obj.totalRecords); $("#pageNo").val((Number($("#pageNo").val()) == lastPageNum ) ? lastPageNum : Number($("#pageNo").val())+1); $("#pageSize").val($("#resultCount").val()); } if(Number($("#pageNo").val()) != Math.ceil(Number($("#count").val())/Number($("#resultCount").val())) ){ jQuery.post(url,params,callback,'json'); } } //末页 function lastPage(){ var url = "queryAll.do"; var params = { selfId :$("#selfId").val(), relationId : $("#relationId").val(), methodType : $("#methodType").val(), params : $("#paramsByJSON").val(), pageNo : Math.ceil(Number($("#count").val())/Number($("#resultCount").val())), pageSize : $("#resultCount").val() }; function callback(obj){ $("#codeselect").html(""); var optionStr = ""; for(var i = 0 ; i < obj.data.length ; i++){ optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>"; } $("#codeselect").html(optionStr); $("#count").val(obj.totalRecords); $("#pageNo").val(Math.ceil(Number($("#count").val())/Number($("#resultCount").val()))); $("#pageSize").val($("#resultCount").val()); } jQuery.post(url,params,callback,'json'); } //选择其中一页 function changePage(){ var url = "queryAll.do"; var params = { selfId :$("#selfId").val(), relationId : $("#relationId").val(), methodType : $("#methodType").val(), params : $("#paramsByJSON").val(), pageNo : $("#somePage").val(), pageSize : $("#resultCount").val() }; function callback(obj){ $("#codeselect").html(""); var optionStr = ""; for(var i = 0 ; i < obj.data.length ; i++){ optionStr += "<option value = '"+obj.data[i].codeValue+"'>"+obj.data[i].codeValue+"--"+obj.data[i].codeLabel+"</option>"; } $("#codeselect").html(optionStr); $("#count").val(obj.totalRecords); $("#pageNo").val($("#somePage").val()); $("#pageSize").val($("#resultCount").val()); } if($("#somePage").val() <= 0 || $("#somePage").val() > lastPageNum){ alert("您输入的页数有问题,请重新输入。"); }else{ jQuery.post(url,params,callback,'json'); } } </script> </head> <body class="interface" onload="loadPage();" style="BORDER: #3D72D7 1px solid"> <input type="hidden" id="selfId"/> <input type="hidden" id="relationId"/> <input type="hidden" id="methodType"/> <input type="hidden" id="paramsByJSON"/> <input type="hidden" id="pageNo"/> <input type="hidden" id="pageSize"/> <table class="common" cellpadding="2" cellspacing="0" align="center" style="display:" id="resultTab" > <tr> <td width=50% align="center"><input class="button" type="button" name="SelectIt" value="确定" onclick='setFieldValue()'></td> <td width=50% align="center"><input name="CancelIt" class="button" type="button" value="取消" onclick='cancelFieldValue()'></td> </tr> <tr> <td colspan=2 align="center"> <select id="codeselect" name=codeselect class="one" size=20 style="width:100%" ondblclick="setFieldValue()"> </select> </td> </tr> <tr> <td colspan="2" align="center"> 总条数<input type="text" style="width:20px;backgroundColor:#E8E8E8" id='count' readonly="readonly"/> 每页<input type="text" id='resultCount' style="width:20px"/>条 </td> </tr> <tr> <td colspan="2" align="center"> <a onclick="fistPage();">首页</a> <a onclick="upPage();">上页</a> <a onclick="nextPage();">下页</a> <a onclick="lastPage()">末页</a> 到<input type="text" id='somePage' style="width:20px"/>页 <input type="button" value="go" onclick="changePage();"> </td> </tr> </table> </body> </html>
有了上面的QueryAll.jsp基本上这个通用双击文本域基本完成了一大半。剩下的就是你要去写自己的methodType了,因为每一个文本域调用的都是queryAll.do所以你要在queryAll中通过methodType来判断将要执行那个方法。我简单写两个这样的方法
package com.test.action; import com.test.UserPowerService; import java.sql.Timestamp; import java.util.ArrayList; import java.util.Date; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import org.apache.commons.beanutils.PropertyUtils; import org.apache.commons.lang.StringUtils; /** * 所有双击域都进到这里 * @author Administrator * */ public class QueryCodeAllAction { private static final long serialVersionUID = 1L; //调用的方法类型 private String methodType; //参数 private String params; //各种service类 private UserPowerService userPowerService; public String getMethodType() { return methodType; } public void setMethodType(String methodType) { this.methodType = methodType; } public UserPowerService getUserPowerService() { return userPowerService; } public void setUserPowerService(UserPowerService userPowerService) { this.userPowerService = userPowerService; } public String getParams() { return params; } public void setParams(String params) { this.params = params; } // public String queryCode(){ if(methodType == null){ } else { //params的数据样式:{codeType:bussinessFlag|codeType:bussinessFlag} //将参数封装成map Map<String,Object> paramsMap = new HashMap<String, Object>(); //解析参数params,首先根据|分割,然后通过:分割,最后形成键值对 if(null != params && !"".equals(params.trim())){ String paramsTemp = params.replaceAll("_", "."); String[] fieldArray = StringUtils.split(paramsTemp, "|"); for(int i = 0 ; i < fieldArray.length ; i++){ String[] fieldArrayTemp = StringUtils.split(fieldArray[i],":"); String key = fieldArrayTemp[0].trim(); String value = fieldArrayTemp.length==1 ? "" : fieldArrayTemp[1].trim(); paramsMap.put(key, value); } } if (pageNo == 0) { pageNo = 1; } if (pageSize == 0) { pageSize = 20; } //查询用户 else if("methodType".equals(methodType)){ Page page = userPowerService.findByPage(pageNo,pageSize); //通过json对象将数据写到页面,这个方法我就不写了... } } return NONE; } }
这样一个双击文本域就成功了。上面的那个queryAll.jsp的分页写的太复杂了,后期我会写个比较好的分页功能模块给大家。