`
这些年
  • 浏览: 403666 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jeditable（转）

    博客分类：
  • js
 
阅读更多

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

Html代码 复制代码 收藏代码
  1. <script language="javascript" src="js/plugin/jquery_jeditable.js"></script>  
<script language="javascript" src="js/plugin/jquery_jeditable.js"></script>


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

    代码如下：

Html代码 复制代码 收藏代码
  1. <td class="item">姓名</td><td id="realName">Sarin</td>  
<td class="item">姓名</td><td id="realName">Sarin</td>


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

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. );  
	$("#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提供的方法我们可以看到它向后台发送了什么数据。可以使用如下代码：

Java代码 复制代码 收藏代码
  1. ActionContext.getContext().getParameters();  
ActionContext.getContext().getParameters();

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

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").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来进行数据库操作了。抽取如下：

Java代码 复制代码 收藏代码
  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. }  
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，非常简单，如下：

Xml代码 复制代码 收藏代码
  1.     <action name="edit" class="xx.xxxx.action.UserAction"  
  2.             method="edit">  
  3. </action>   
	<action name="edit" class="xx.xxxx.action.UserAction"
			method="edit">
</action>


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

Java代码 复制代码 收藏代码
  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. }  
	/**
	 * 个人信息修改(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的方法：

Java代码 复制代码 收藏代码
  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. }  
	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语句，为了是拼出如下格式的语句：

Sql代码 复制代码 收藏代码
  1. Update xx_users set ?=? where userId=?  
Update xx_users set ?=? where userId=?


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

  • 大小: 9.2 KB
  • 大小: 5.3 KB
分享到：
| JS完美实现对象克隆 (转)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics