zc985552943
- 浏览: 291587 次
- 性别:
- 来自: 北京
-
博客专栏
-
-
云计算--hadoop
浏览量：11915
-
-
redis解说
浏览量：27230
-
-
MongoDB读书笔记
浏览量：16055
-
-
Maven读书笔记
浏览量：27302
-
-
Java通信
浏览量：13719
文章分类
最新评论
-
sjzcmlt：
，一直读你的文章，写的真好
01_Redis非关系型数据库的安装 -
feng_zhi_zi510：
博主你好。我这有点问题始终没搞明白。关于继承的在父模块定义了依 ...
04_Maven核心_POM_聚合与继承 -
贝塔ZQ：
java实现excel的导入导出，也可是用插件进行实现的，Pa ...
java实现excel的导入导出（poi详解） -
TIMJAMES：
java实现excel的导入导出（poi详解） -
cheleiyan：
如何创建空的mave项目，用eclipse建的时候，选择哪个类 ...
04_Maven核心_POM_聚合与继承
我们开发时经常会遇到双击文本域，然后去后台查询数据库得到一些需要的值。下面我就写一个通用的双击文本域的代码，大家可以参考一下，给点意见.....
我写的这个双击文本域是基于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的分页写的太复杂了，后期我会写个比较好的分页功能模块给大家。
分享到：
发表评论
-
java操作html字符串
2014-04-10 10:47 5096业务描述：在我们系统中要这样一个需求，我们会将html当作字 ... -
03_socket编程（补）_Java多线程1
2014-03-25 16:05 906下一节将要聊一下ServerSocket。并且会创建多线程 ... -
03_socket编程_ServerSocket详解
2014-03-24 16:05 01.构造ServerSocket //ServerSoc ... -
02_socket编程_Socket详解
2014-03-24 15:12 9161.服务器与客户端是怎 ... -
01_socket编程_OSI介绍
2014-03-19 17:03 7531.物理层 物理层的任务就是为它的上一层提供物理连接，以及 ... -
将表中的数据导到Excel中方法公用抽象
2014-03-05 14:11 958一、现在业务需求如下： 因为需要导出做业务分析，所以要将 ... -
FTP传输和下载文件
2012-05-21 14:10 1198public class FTPUtils { ... -
java实现excel的导入导出（poi详解）
2012-04-20 16:04 128527经过两天的研究，现在对excel导出有点心得了。我们使用 ... -
java实现excel的导入导出
2011-12-31 14:42 2525最进接触到excel导入导出。可以使用poi.jar实现。下面 ...
相关推荐
JS控制文本域只读或可写属性的方法涉及javascript对页面元素属性的动态操作，本文将详细介绍相关的知识要点。 首先，文本域（Text Area）是HTML中的一个表单元素，它用于输入多行文本信息。在实际开发中，我们可能...
在Web开发中，有时候为了提升用户体验或保护网页内容不被非法复制，我们需要实现页面内容禁止选中的功能，但又希望某些元素如输入框(input)和文本域(textarea)能保持可选择性。本篇将介绍如何使用Vue框架结合CSS和...
复制代码代码如下: <... <HEAD> <TITLE>textarea宽度、高度自动适应... /*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时， 当我们双击
在IT领域，鼠标是人机交互的重要工具，而双击操作是日常计算机使用中的常见动作，例如打开文件夹、启动程序等。"鼠标双击测试软件"是针对鼠标双击功能进行检测和评估的工具，它能帮助用户确认鼠标是否正常工作，是否...
本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件，并获取双击的行以及选中的复选框状态。 首先，我们要了解GridPanel的基本结构。GridPanel由Store（数据存储）和ColumnModel（列模型）组成，它们定义了...
本文将深入探讨如何在FullCalendar中实现双击事件功能，包括源码修改和扩展方法，以兼容不同版本。 ### 1. 源码版双击事件 在源码版FullCalendar中添加双击事件功能，你需要直接修改FullCalendar的核心代码。首先...
本文将深入探讨一个针对鼠标双击和触摸屏双击事件检测的jQuery插件——jQuery-doubleTap。 **一、插件简介** jQuery-doubleTap是一款专门用于检测鼠标双击和移动设备触摸屏双击事件的插件。它通过优化"click"和...
本篇文章将详细探讨“MultiButton”库，这是一个针对ST平台以及其他平台设计的通用按键驱动，特别支持短按、长按和双击等多样化的操作模式。 首先，我们来理解“MultiButton”这个概念。MultiButton库是一种软件...
### 探寻C# Button双击事件 在C#编程中，`Button` 控件是非常常用的界面元素之一，用于响应用户的交互操作。然而，在.NET框架中，默认情况下并未提供`Button`控件的双击事件（`DoubleClick`）。这可能会让初学者...
JAVA 中的鼠标双击事件 在 Java 中，实现鼠标双击事件是 GUI 桌面开发中一个重要的功能。然而，Java 中并没有提供直接的鼠标双击事件。于是，我们需要通过其他方法来实现鼠标双击事件。 首先，我们可以通过事件源 ...
在C# WinForm开发中，用户界面交互是一个关键部分，其中单击（Click）和双击（DoubleClick）事件是常见的用户输入响应。然而，标题提到的一个常见问题是：在同一个控件上，C# WinForm不支持同时处理单击和双击事件。...
通过自定义样式表或者组策略解决IE11浏览网页双击放大的问题，禁用IE双击放大的功能，避免玩游戏时的烦恼。 其中自定义样式表方式有一键配置bat，用起来很简单，将DisableIEScaleOnDClick.bat复制到合适的用于保存...
本教程将深入讲解如何在MFC应用中处理Button控件的双击事件。 在Windows GUI编程中，事件是用户与应用程序交互的关键机制。例如，当用户点击或双击按钮时，会产生相应的消息。MFC使用消息映射机制来处理这些事件。...
然而，在处理用户输入事件时，尤其是在设计具有单击和双击功能的界面时，MFC库中存在一些固有缺陷，可能导致用户体验下降。本篇文章将深入探讨这些问题，并提供解决方案，帮助你优化你的MFC应用程序。 首先，让我们...
然而，当鼠标出现故障或设置不当时，原本应该执行单击操作的鼠标却出现了双击的现象，这会极大地影响工作效率。本文将针对“鼠标单击变双击测试”这一主题进行深入探讨，同时涉及与之相关的鼠标连点测试器和鼠标点击...
"js单击事件和双击事件并存绑定"这个主题涉及到如何让一个元素同时响应单击（click）和双击（dblclick）事件，而不互相冲突。这在实现某些交互功能时非常有用，比如，单击可能打开一个菜单，而双击则可能编辑内容。...
在Qt编程中，区分鼠标左键的单击和双击事件并不像键盘事件那样直接提供对应的信号和槽函数。在标准的Qt事件处理机制中，`QMouseEvent`类提供了鼠标按键按下、释放等事件，但并没有区分单击和双击。然而，开发者可以...
通过设置全局鼠标钩子，开发者可以捕获到系统中所有窗口的鼠标活动，包括单击、双击、移动等事件。这个项目"鼠标钩子 监测鼠标双击事件"是基于Visual Studio 2012开发的，可以直接运行，便于理解和学习。 1. **鼠标...
本资源主要关注ASP.NET中的GridView控件如何处理双击事件，以及与C#、SQL、DBA等相关技术的结合应用。 首先，GridView控件是ASP.NET Web Forms中用于显示数据表格的控件，通常用于展示从数据库查询出来的数据。它...