通用双击文本域

最新推荐文章于 2022-05-27 17:24:58 发布

超级小猪_哦耶

最新推荐文章于 2022-05-27 17:24:58 发布

阅读量843

点赞数

本文链接：https://blog.csdn.net/chaojixiaozhu/article/details/78931347

版权

我们开发时经常会遇到双击文本域，然后去后台查询数据库得到一些需要的值。下面我就写一个通用的双击文本域的代码，大家可以参考一下，给点意见.....

我写的这个双击文本域是基于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" οnlοad="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="确定"
        οnclick='setFieldValue()'></td>
      <td width=50% align="center"><input name="CancelIt" class="button" type="button" value="取消"
        οnclick='cancelFieldValue()'></td>
    </tr>
    <tr>
      <td colspan=2 align="center">
      <select id="codeselect" name=codeselect class="one" size=20 style="width:100%" οndblclick="setFieldValue()">
      </select>
      </td>
    </tr>
      <tr>
      <td colspan="2" align="center">
      总条数<input type="text" style="width:20px;backgroundColor:#E8E8E8" id='count' readonly="readonly"/>&nbsp;&nbsp;每页<input type="text" id='resultCount' style="width:20px"/>条
      </td>
      </tr>
    <tr>
      <td colspan="2" align="center">
     <a οnclick="fistPage();">首页</a>&nbsp;<a οnclick="upPage();">上页</a>&nbsp;<a οnclick="nextPage();">下页</a>&nbsp;<a οnclick="lastPage()">末页</a>&nbsp;&nbsp;到<input type="text" id='somePage' style="width:20px"/>页
      <input type="button" value="go" οnclick="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的分页写的太复杂了，后期我会写个比较好的分页功能模块给大家。

超级小猪_哦耶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
通用双击文本域

我们开发时经常会遇到双击文本域，然后去后台查询数据库得到一些需要的值。下面我就写一个通用的双击文本域的代码，大家可以参考一下，给点意见..... 我写的这个双击文本域是基于ssh框架写的，大家只要能考到我的思想就够了。首先我们的双击肯定要js事件支持。而且一般双击事件都会改变两个文本框里面的值。我先写一个简单的jsp页面用户Id：用户姓名：看上面的jsp页面可以知道我
复制链接

扫一扫