我们开发时经常会遇到双击文本域，然后去后台查询数据库得到一些需要的值。下面我就写一个通用的双击文本域的代码，大家可以参考一下，给点意见.....
我写的这个双击文本域是基于ssh框架写的，大家只要能考到我的思想就够了。首先我们的双击肯定要js事件支持。而且一般双击事件都会改变两个文本框里面的值。我先写一个简单的jsp页面
看上面的jsp页面可以知道我们要写queryAll这个js函数。这个函数传递了四个参数：
selfId-->表示双击选点某个值后需要改变的主要文本框，在上面的例子中改变的就是用户Id
relationId-->表示连带需要改变的文本框的值，在上面的例子中改变的用户的姓名
methodType-->在后台将要执行哪个方法，相当一个标志，因为要写通用的，所以针对不同的需求肯定是会执行不同的方法，所以在这里写一个标志位。
params-->表示在后台执行方法的时候你想传递的参数可以自己约定。
了解完参数，再看看这个方法的具体实现
通过上面的showModalDialog打开一对话框QueryAll.jsp。你可以在这个页面加载完后立刻执行MethodTye对应的后台方法。下面是QueryAll.jsp页面的样例：
有了上面的QueryAll.jsp基本上这个通用双击文本域基本完成了一大半。剩下的就是你要去写自己的methodType了，因为每一个文本域调用的都是queryAll.do所以你要在queryAll中通过methodType来判断将要执行那个方法。我简单写两个这样的方法
这样一个双击文本域就成功了。上面的那个queryAll.jsp的分页写的太复杂了，后期我会写个比较好的分页功能模块给大家。
我写的这个双击文本域是基于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的分页写的太复杂了，后期我会写个比较好的分页功能模块给大家。
扫一扫
1572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
