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
分享到:
相关推荐
jquery.jeditable.js开发工具 最新版,2013 1 13 更新
`jQuery.jeditable` 是一个强大且灵活的 jQuery 插件,它允许用户在页面上直接编辑文本内容,实现所谓的“就地编辑”(Edit in Place)功能。这种功能在许多现代网页应用中非常常见,如博客评论、表格数据编辑、动态...
struts2-jquery插件源码。版本号3.0.1
struts2的jquery插件, 可使用jquery标签库快速进行前端开发。
(4) **使用jQuery与Struts2交互**:利用jQuery的Ajax方法,如`$.ajax()`,与Struts2 Action进行通信。Struts2 jQuery插件提供了方便的标签库,例如`sj:submit`,可以直接发送Ajax请求。 ```html action="your...
描述:"Struts2-15使用JQuery插件" 在探讨Struts2与jQuery插件的结合时,我们深入分析了如何在Struts2框架中集成并利用jQuery插件来增强Web应用程序的交互性和用户体验。Struts2作为一个流行的Java Web开发框架,...
在本文中,我们将深入探讨如何将jQuery插件AjaxFileUpload与Struts2框架结合,以实现异步图片上传的功能。这种技术在现代Web应用中非常常见,它提升了用户体验,允许用户在不刷新整个页面的情况下上传文件,特别是...
可以使用Struts2的拦截器来统一处理验证错误,并将错误消息返回到视图层,或者在JSON响应中包含错误信息,由前端展示。 通过以上步骤,我们可以实现jQuery Validate与Struts2的有效整合,达到前端和后端双重验证的...
通过理解MVC模式、熟练掌握Struts2的配置和Action处理、灵活运用Jquery和Ajax,可以大大提高开发效率,提升用户使用体验。在实际开发过程中,还需要关注安全问题,如Struts2的安全漏洞,确保应用的稳定性和安全性。
Struts2提供了一套完善的拦截器(Interceptor)机制,支持多种模板技术,以及强大的插件架构,使得开发者可以灵活地进行业务逻辑处理和视图展示。 ### jQuery与Struts2整合 #### 1. 数据提交 在jQuery中,我们...
Jquery+struts2上传图片,制作进度条等示例,还有Jquery+Json+Struts实现Ajax技术,还有图形处理技术等,虽然很少,但都有重点突出,由于我也是学习,所以代码不是很简洁,对想学习交流的朋友非常合适
这些jar包的集成意味着我们可以利用jQuery在前端进行用户交互和数据展示,通过Ajax发送JSON格式的请求到后端的Struts2应用,Struts2接收请求,处理业务逻辑,并以JSON格式返回结果,最后jQuery再次解析这些数据并...
总结来说,实现“jQuery Java Struts2 实现分页”涉及到前后端的协同工作:前端使用jQuery和其分页插件处理用户交互,样式通过CSS自定义;后端使用Java和Struts2框架处理分页逻辑,与数据库进行交互,返回所需数据。...
总结来说,这个备忘录主要涵盖了如何使用jQuery处理前端交互,使用Struts2的JSON插件进行后端数据返回,以及如何在JavaScript中解析和应用JSON数据。这些技术结合使用,能帮助开发者构建出响应式、功能丰富的Web应用...
Struts2有一个插件叫做struts2-jquery-plugin,它可以简化Ajax请求的处理。例如,我们可以使用`sj:a`标签来替代手写jQuery代码,直接在JSP页面上发起Ajax请求。这个标签会自动处理请求和响应,使得页面与服务器之间...
在本文中,我们将深入探讨如何使用jQuery、Uploadify、Struts2和JSP技术实现一个图片批量上传的Demo。这个组合提供了高效、用户友好的文件上传解决方案,特别适合需要处理大量图片的Web应用。 首先,jQuery是一个轻...
对于JSON数据,可以使用Struts2的JSON插件,使得Action可以直接返回JSON对象。 - 前端使用JQuery的AJAX方法(如`$.ajax`或`$.post`)发送请求,接收到服务器响应后更新EasyUI组件的状态。 4. **示例代码**:在...
struts2+jquery 整合的jar包
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....