基于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。

本人才疏学浅，还望各位高手指教。

效果可以参考原作者的演示，很详细。

基于Struts2的SingleEdit插件的使用。

相关推荐