`
sarin
  • 浏览: 1756949 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
E3b14d1f-4cc5-37dd-b820-b6af951740bc
Spring数据库访问系列...
浏览量:173664
C2083dc5-6474-39e2-993e-263652d27795
Android学习笔记
浏览量:368130
5f40a095-b33c-3e8e-8891-606fcf3b8d27
iBatis开发详解
浏览量:189265
B272a31d-e7bd-3eff-8cc4-c0624ee75fee
Objective-C学习...
浏览量:99838
社区版块
存档分类
最新评论

jQuery插件Jeditable的使用(Struts2处理)

阅读更多
    Jeditable - Edit In Place Plugin For jQuery,是一款JQuery就地编辑插件。也就是在页面直接点击需要编辑的内容,就会自动变成文本框进行编辑。它的官方网站是http://www.appelsiini.net/projects/jeditable,我们可以下载JS源码,查看示例。
    示例代码比较简单,但确是PHP编写的,也没有提供出来,所以我们要探索在Java环境下进行数据操作的方式。由于一直使用Struts2作为控制器,所以便探究了在Struts2下使用Jeditable的方法。
    首先在页面引入JS文件,只有一个。也不大。代码如下:
<script language="javascript" src="js/plugin/jquery_jeditable.js"></script>

    在页面中,我们有如下内容:

    代码如下:
<td class="item">姓名</td><td id="realName">Sarin</td>

    我们要编辑姓名,就在<td>标签上加注id属性,标识该单元。则在页面中添加如下JS代码,就可以得到编辑框的效果:
	$("#realName").editable("${base}/personal/edit.action?time="+new Date().getTime(), {
		indicator : "<img src='${base}/images/indicator.gif'>",
		submitdata: { _method: "post" },
		tooltip : "点击修改...",
		style : "inherit"
});

    因为是使用Struts2处理请求,那么请求地址就是.action的,这个没有什么多说的。下面简单来说说JS代码,这里用最简单的文本框来做演示,其他效果可以到官网去看例子,都很好使用。
    indicator是请求处理过程中的显示效果,这里用图片来代替,这个图片也是从官网找到的,或者写一些提示文字,比如”Saving…”。submitdata中我们指定了操作的提交方式,post很好理解了。tooltip中指的是当鼠标移动到编辑区域时的显示文字。style就是编辑时的样式了,这个不是要紧的东西,可以参考文档。这样配置就完成了。下面看看效果:

    点击时就变成可编辑的效果了,这样我们不用再自己去写JS代码,用Jeditable来帮助非常不错。要保存内容,输入完回车即可。
    下面的问题就是页面和后台通信,保存数据。使用Struts2提供的方法我们可以看到它向后台发送了什么数据。可以使用如下代码:
ActionContext.getContext().getParameters();
打印之后    我们可以看到有id和value两个属性传回,参考jeditable的文档发现id属性就是我们要修改内容的标识符,value属性是我们输入的更新内容。这两个参数名其实是可以修改的。在JS代码中这样写就可以了:
	$("#realName").editable("${base}/personal/edit.action?time="+new Date().getTime(), {
		indicator : "<img src='${base}/images/indicator.gif'>",
		submitdata: { _method: "post" },
		id :"realName",
		value : "param",
		tooltip : "点击修改...",
		style : "inherit"
});

    这样到后台的属性名就变成realName和param了但是二者的值不变,我们不做改变,还是使用id和value,那么已经确定value就是我们修改的内容,那么id的值是什么呢?就是我们在<td>中设置的id值,当然也可以在<td>中套用div,这个就是看个人设置的样式进行了。知道了这些,我们就可以向Struts提交请求进行处理了。
    在这里我们使用ActionContext.getContext().getParameters();获得属性是Map类型的,所以抽象出一个工具类来提供从Map中解析出String和Object[]数组的方法,就可以使用jdbcTemplate来进行数据库操作了。抽取如下:
package xx.xxxx.util;
import java.util.*;
public class MapUtil {
	/**
	 * 从Map中获取数据,能自动取得Object数组中第一项
	 */
	public static Object getObjectFromMap(Map map, String key) {
		Object value = map.get(key);
		if (value != null && (value instanceof Object[])) {
			Object[] array = (Object[]) value;
			if (array != null && array.length > 0) {
				value = array[0];
			}
		}
		return value;
	}
	/* 获取字符串 */
	public static String getStringFromMap(Map map, String key) {
		Object value = getObjectFromMap(map, key);
		if (value == null)
			return null;
		if (value instanceof String) {
			return (String) value;
		}
		return value.toString();
}
	/* 获取对象数组 */
	public static Object[] getObjectArrayFromMap(Map map, String key) {
		String[] keys = key.split(",");
		Object[] tmp = new Object[keys.length];
		for (int i = 0; i < keys.length; i++) {
			tmp[i] = getObjectFromMap(map, keys[i].trim());
		}
		return tmp;
	}
}

使用Struts2,先写个XML配置Action,非常简单,如下:
	<action name="edit" class="xx.xxxx.action.UserAction"
			method="edit">
</action>

在UserAction中我们使用edit()方法来处理,方法如下:
	/**
	 * 个人信息修改(Jeditable实现)
	 * @author Sarin
	 */
	public String edit() throws Exception {
		Map parameters = getParameters();
		getServMgr().getUserService().updateUser(parameters, getLoginUserId());
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		out.print(MapUtil.getStringFromMap(parameters, "value"));
		return null;
	}

    因为是异步操作的方法,不需要方法有什么返回,还在当前页面操作,返回值为null就行了。这里为什么用PrintWriter向客户端输出东西呢?很简单,我们在页面输入内容之后,如果没有返回内容,那么编辑区域就会显示默认内容”Click to edit…”,这样交互显然不合适,我们需要将输入的内容返回到页面,所以调用Action之后,必须将输入的值返回,则就需要用Servlet中最原始的方法进行,这样简单。代码很好理解就不多做解释,下面看看Service的方法:
	public void updateUser(Map parameters, Integer userId) {
		StringBuffer sql = new StringBuffer("update xx_users set ");
		Object[] params = MapUtil.getObjectArrayFromMap(parameters, "id,value");
	sql.append(params[0]).append("='").append(params[1]).append("'")
				.append(" where userId=").append(userId);
		jt.update(sql.toString());
}

    Service中我们用StringBuffer来构建SQL语句,为了是拼出如下格式的语句:
Update xx_users set ?=? where userId=?

    很显然,第一个?来自jeditable传入的id属性,第二个?是value属性,第三个?是从HttpSession中获取的用户ID。
    执行之后数据就写入数据库了,而且页面也同时更新了。
    欢迎交流,希望对使用者有用。
  • 大小: 9.2 KB
  • 大小: 5.3 KB
100
0
分享到:
评论
1 楼 liudeen1122 2014-07-28  
请问jeditable中有保存原始值的吗?就是说如果发现用户输入的不合法就保持原值不变。

相关推荐

    jquery.jeditable.js

    jquery.jeditable.js开发工具 最新版,2013 1 13 更新

    jquery.jeditable 分享

    `jQuery.jeditable` 是一个强大且灵活的 jQuery 插件,它允许用户在页面上直接编辑文本内容,实现所谓的“就地编辑”(Edit in Place)功能。这种功能在许多现代网页应用中非常常见,如博客评论、表格数据编辑、动态...

    struts2-jquery插件

    struts2-jquery插件源码。版本号3.0.1

    struts2 jquery 插件

    struts2的jquery插件, 可使用jquery标签库快速进行前端开发。

    jquery和struts2的整合

    (4) **使用jQuery与Struts2交互**:利用jQuery的Ajax方法,如`$.ajax()`,与Struts2 Action进行通信。Struts2 jQuery插件提供了方便的标签库,例如`sj:submit`,可以直接发送Ajax请求。 ```html action="your...

    struts2 jquery插件

    描述:"Struts2-15使用JQuery插件" 在探讨Struts2与jQuery插件的结合时,我们深入分析了如何在Struts2框架中集成并利用jQuery插件来增强Web应用程序的交互性和用户体验。Struts2作为一个流行的Java Web开发框架,...

    jquery 插件ajaxfileupload与struts2结合 实现异步上传图片

    在本文中,我们将深入探讨如何将jQuery插件AjaxFileUpload与Struts2框架结合,以实现异步图片上传的功能。这种技术在现代Web应用中非常常见,它提升了用户体验,允许用户在不刷新整个页面的情况下上传文件,特别是...

    jquery.validate 与 struts2的整合使用

    可以使用Struts2的拦截器来统一处理验证错误,并将错误消息返回到视图层,或者在JSON响应中包含错误信息,由前端展示。 通过以上步骤,我们可以实现jQuery Validate与Struts2的有效整合,达到前端和后端双重验证的...

    Struts2+Jquery+Ajax

    通过理解MVC模式、熟练掌握Struts2的配置和Action处理、灵活运用Jquery和Ajax,可以大大提高开发效率,提升用户使用体验。在实际开发过程中,还需要关注安全问题,如Struts2的安全漏洞,确保应用的稳定性和安全性。

    Jquery与struts2

    Struts2提供了一套完善的拦截器(Interceptor)机制,支持多种模板技术,以及强大的插件架构,使得开发者可以灵活地进行业务逻辑处理和视图展示。 ### jQuery与Struts2整合 #### 1. 数据提交 在jQuery中,我们...

    ( Struts2+JQuery插件的使用

    ### Struts2与jQuery插件的集成使用 #### 一、引言 随着Web应用程序的不断发展,前后端分离成为一种趋势,而Struts2作为Java Web领域中的老牌框架,其与jQuery的结合使得开发者能够更加方便地处理客户端的动态交互...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    Jquery+struts2上传图片,制作进度条,以及Jquery+Json+Struts交互等示例

    Jquery+struts2上传图片,制作进度条等示例,还有Jquery+Json+Struts实现Ajax技术,还有图形处理技术等,虽然很少,但都有重点突出,由于我也是学习,所以代码不是很简洁,对想学习交流的朋友非常合适

    jQuery json+struts2 jar包全集

    这些jar包的集成意味着我们可以利用jQuery在前端进行用户交互和数据展示,通过Ajax发送JSON格式的请求到后端的Struts2应用,Struts2接收请求,处理业务逻辑,并以JSON格式返回结果,最后jQuery再次解析这些数据并...

    jquery java struts2 实现分页 非常好看的分页

    总结来说,实现“jQuery Java Struts2 实现分页”涉及到前后端的协同工作:前端使用jQuery和其分页插件处理用户交互,样式通过CSS自定义;后端使用Java和Struts2框架处理分页逻辑,与数据库进行交互,返回所需数据。...

    jQuery+json+struts2 开发备忘录(一)

    总结来说,这个备忘录主要涵盖了如何使用jQuery处理前端交互,使用Struts2的JSON插件进行后端数据返回,以及如何在JavaScript中解析和应用JSON数据。这些技术结合使用,能帮助开发者构建出响应式、功能丰富的Web应用...

    使用struts2+JQuery实现的简单的ajax例子

    Struts2有一个插件叫做struts2-jquery-plugin,它可以简化Ajax请求的处理。例如,我们可以使用`sj:a`标签来替代手写jQuery代码,直接在JSP页面上发起Ajax请求。这个标签会自动处理请求和响应,使得页面与服务器之间...

    jquery+uploadify + struts2 + jsp 图片批量上传Demo

    在本文中,我们将深入探讨如何使用jQuery、Uploadify、Struts2和JSP技术实现一个图片批量上传的Demo。这个组合提供了高效、用户友好的文件上传解决方案,特别适合需要处理大量图片的Web应用。 首先,jQuery是一个轻...

    JQuery EasyUI 整合struts2 代码下载

    对于JSON数据,可以使用Struts2的JSON插件,使得Action可以直接返回JSON对象。 - 前端使用JQuery的AJAX方法(如`$.ajax`或`$.post`)发送请求,接收到服务器响应后更新EasyUI组件的状态。 4. **示例代码**:在...

    struts2+jquery 插件

    struts2+jquery 整合的jar包

Global site tag (gtag.js) - Google Analytics