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。
    执行之后数据就写入数据库了，而且页面也同时更新了。
    欢迎交流，希望对使用者有用。

评论

1 楼 liudeen1122 2014-07-28  

请问jeditable中有保存原始值的吗？就是说如果发现用户输入的不合法就保持原值不变。