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

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

1. <script language="javascript" src="js/plugin/jquery_jeditable.js"></script>

在页面中，我们有如下内容： 
 
    代码如下：

1. <td class="item">姓名</td><td id="realName">Sarin</td>

我们要编辑姓名，就在<td>标签上加注id属性，标识该单元。则在页面中添加如下JS代码，就可以得到编辑框的效果：

1. $("#realName").editable("${base}/personal/edit.action?time="+new Date().getTime(), {
2. indicator : "<img src='${base}/images/indicator.gif'>",
3. submitdata: { _method: "post" },
4. tooltip : "点击修改...",
5. style : "inherit"
6. );

因为是使用Struts2处理请求，那么请求地址就是.action的，这个没有什么多说的。下面简单来说说JS代码，这里用最简单的文本框来做演示，其他效果可以到官网去看例子，都很好使用。 
    indicator是请求处理过程中的显示效果，这里用图片来代替，这个图片也是从官网找到的，或者写一些提示文字，比如”Saving…”。submitdata中我们指定了操作的提交方式，post很好理解了。tooltip中指的是当鼠标移动到编辑区域时的显示文字。style就是编辑时的样式了，这个不是要紧的东西，可以参考文档。这样配置就完成了。下面看看效果： 
 
    点击时就变成可编辑的效果了，这样我们不用再自己去写JS代码，用Jeditable来帮助非常不错。要保存内容，输入完回车即可。 
    下面的问题就是页面和后台通信，保存数据。使用Struts2提供的方法我们可以看到它向后台发送了什么数据。可以使用如下代码：

1. ActionContext.getContext().getParameters();

打印之后    我们可以看到有id和value两个属性传回，参考jeditable的文档发现id属性就是我们要修改内容的标识符，value属性是我们输入的更新内容。这两个参数名其实是可以修改的。在JS代码中这样写就可以了：

1. $("#realName").editable("${base}/personal/edit.action?time="+new Date().getTime(), {
2. indicator : "<img src='${base}/images/indicator.gif'>",
3. submitdata: { _method: "post" },
4. id ："realName",
5. value : "param",
6. tooltip : "点击修改...",
7. style : "inherit"
8. );

这样到后台的属性名就变成realName和param了但是二者的值不变，我们不做改变，还是使用id和value，那么已经确定value就是我们修改的内容，那么id的值是什么呢？就是我们在<td>中设置的id值，当然也可以在<td>中套用div，这个就是看个人设置的样式进行了。知道了这些，我们就可以向Struts提交请求进行处理了。 
    在这里我们使用ActionContext.getContext().getParameters();获得属性是Map类型的，所以抽象出一个工具类来提供从Map中解析出String和Object[]数组的方法，就可以使用jdbcTemplate来进行数据库操作了。抽取如下：

1. package xx.xxxx.util;
2. import java.util.*;
3. public class MapUtil {
4. /**
5. * 从Map中获取数据，能自动取得Object数组中第一项
6. */
7. public static Object getObjectFromMap(Map map, String key) {
8. Object value = map.get(key);
9. if (value != null && (value instanceof Object[])) {
10. Object[] array = (Object[]) value;
11. if (array != null && array.length > 0) {
12. value = array[0];
13. }
14. }
15. return value;
16. }
17. /* 获取字符串 */
18. public static String getStringFromMap(Map map, String key) {
19. Object value = getObjectFromMap(map, key);
20. if (value == null)
21. return null;
22. if (value instanceof String) {
23. return (String) value;
24. }
25. return value.toString();
26. }
27. /* 获取对象数组 */
28. public static Object[] getObjectArrayFromMap(Map map, String key) {
29. String[] keys = key.split(",");
30. Object[] tmp = new Object[keys.length];
31. for (int i = 0; i < keys.length; i++) {
32. tmp[i] = getObjectFromMap(map, keys[i].trim());
33. }
34. return tmp;
35. }
36. }

使用Struts2，先写个XML配置Action，非常简单，如下：

1. <action name="edit" class="xx.xxxx.action.UserAction"
2. method="edit">
3. </action>

在UserAction中我们使用edit()方法来处理，方法如下：

1. /**
2. * 个人信息修改(Jeditable实现)
3. * @author Sarin
4. */
5. public String edit() throws Exception {
6. Map parameters = getParameters();
7. getServMgr().getUserService().updateUser(parameters, getLoginUserId());
8. HttpServletResponse response = ServletActionContext.getResponse();
9. response.setCharacterEncoding("UTF-8");
10. PrintWriter out = response.getWriter();
11. out.print(MapUtil.getStringFromMap(parameters, "value"));
12. return null;
13. }

因为是异步操作的方法，不需要方法有什么返回，还在当前页面操作，返回值为null就行了。这里为什么用PrintWriter向客户端输出东西呢？很简单，我们在页面输入内容之后，如果没有返回内容，那么编辑区域就会显示默认内容”Click to edit…”，这样交互显然不合适，我们需要将输入的内容返回到页面，所以调用Action之后，必须将输入的值返回，则就需要用Servlet中最原始的方法进行，这样简单。代码很好理解就不多做解释，下面看看Service的方法：

1. public void updateUser(Map parameters, Integer userId) {
2. StringBuffer sql = new StringBuffer("update xx_users set ");
3. Object[] params = MapUtil.getObjectArrayFromMap(parameters, "id,value");
4. sql.append(params[0]).append("='").append(params[1]).append("'")
5. .append(" where userId=").append(userId);
6. jt.update(sql.toString());
7. }

Service中我们用StringBuffer来构建SQL语句，为了是拼出如下格式的语句：

1. Update xx_users set ?=? where userId=?

很显然，第一个?来自jeditable传入的id属性，第二个?是value属性，第三个?是从HttpSession中获取的用户ID。 
    执行之后数据就写入数据库了，而且页面也同时更新了。 
    欢迎交流，希望对使用者有用。

• 查看图片附件