基于Struts2的SingleEdit插件的使用。
前些日子看到网友wbfsa发布了SingleEdit插件，基于JQuery的表单信息修改工具。颇具特色。项目中我使用Struts2，已经整合了Uploadify和JqGrid两个组件，基本可实现操作的异步处理，效果更佳绚丽。
这次使用SingleEdit，在页面中也就实现了最原始的数据修改效果，因为在使用JqGrid时，是基于一条记录进行的。而SingleEdit可以针对一个字段修改，非常实用。在看过wbfsa提供的帮助文档后，我把它集成到Struts2中。代码如下：
页面：想了解更多可以参考wbfsa的博客。
<table class="default" width="100%">
<col width="20%" align="center">
<col width="30%" align="center">
<col width="20%" align="center">
<col width="30%" align="center">
<tr class="title">
<td align="center" colspan="4">个人信息</td>
</tr>
<tr class="strong">
<td colspan="4">您可以修改除用户名以外的信息</td>
</tr>
<tr>
<td>用户名</td><td>${loginUser.USERNAME}</td>
<td>真实名</td><td><div class="edit" id="realname"></div></td>
</tr>
<tr>
<td>性别</td><td><div class="edit" id="sex">${pInfo.SEX}</div></td>
<td>身份证号</td><td><div class="edit" id="idcard">${pInfo.IDCARD?default("(点击填写)")}</div></td>
</tr>
<tr>
<td>生日</td><td><div class="edit" id="birthday">${pInfo.BIRTHDAY?default("(点击填写)")}</div></td>
<td>E-mail</td><td><div class="edit" id="email">${pInfo.EMAIL?default("(点击填写)")}</div></td>
</tr>
</table>这里应用了一些自定义的CSS样式，您可以对应修改
页面都很简单，不做介绍了
SingleEdit的Js和css可以参照wbfsa的文章
<script type="text/javascript">
$(function() {
$(".edit").singleEdit({
zID: "${loginUser.USERID}",
url:"user!editInfo.action?time="+new Date().getTime(),
ajaxenable: true,
ajaxType: "GET",
acceptID: "1",
refreshID: "2",
selection:[
{ id: "usex", item: [{ zID: "男", zname: "男" }, { zID: "女", zname: "女" }]}
],
data: {
realname: "${loginUser.REALNAME}"
},
main: [
{ id: "realname", field:"realname", type: "textbox" },
{ id: "sex", itemid:"usex", field:"sex", type: "radio", radiosettings:2 },
{ id: "idcard", field:"idcard", type: "textbox" },
{ id: "birthday", field:"birthday", type: "date" },
{ id: "email", field:"email", type: "textbox"}
]
});
});
</script>重点解释Ajax段JS代码，其他的参考wbfsa的帮助文档，那更详细。
zID是更新的依据，就是该记录的主键，注意大小写
url是请求处理的地址，这里是Struts2的，就不多说了
ajaxType当前还只能是GET，可能是源文件这里有BUG，我这POST不好用，获取不到参数
后面的代码就是数据处理了。只要这段代码写在ftl文件里面，那么freemarker就可以直接填充数据，在js段也可以使用${}获取值。很方便。
后台处理代码如下：
/**
* SingleEdit插件更新数据的方法
*/
public String editInfo() {
getServMgr().getUserService().editUserInfo(field, value, zID);
Map dbUser = getServMgr().getUserService().getUserByUserName(getLoginUserName());
getSession().put(Constants.LOGIN_USER, dbUser);
return null;
}该方法不需要返回值，异步更新只是执行以下方法。这里的参数field，value和zID就是页面传入的参数了。在该java文件里面需要有相应的set方法。
getLoginUserName()是写在自定义基类的一个方法，就是获取当前登录用户的用户名，不要页面传入这个参数，从session中拿，安全性很高。
后面就是把更新好的数据再次放入session，时时更新。
Service中的方法：
public void editUserInfo(String field, String value, String userId) {
StringBuffer editSQL = new StringBuffer("update users set ");
editSQL.append(field + "=? ").append("where userId=" + userId);
jt.update(editSQL.toString(), new Object[] { value });
}我是通过StringBuffer拼接SQL语句的，当然也可以直接拼接，这样就可以达到SQL语句的动态化，字段和值都是自适应的。数据持久层使用SpringJdbcTemplate。
本人才疏学浅，还望各位高手指教。
效果可以参考原作者的演示，很详细。