前端页面和pojo类如下： staff.jsp
<div region="center" style="overflow:auto;padding:5px;" border="false"> <form id="addStaffForm" action="${pageContext.request.contextPath }/staffAction_add.action" method="post"> <table class="table-edit" width="80%" align="center"> <tr class="title"> <td colspan="2">收派员信息</td> </tr> <!-- TODO 这里完善收派员添加 table --> <!-- <tr> <td>取派员编号</td> <td><input type="text" name="id" class="easyui-validatebox" required="true"/></td> </tr> --> <tr> <td>姓名</td> <td><input type="text" name="name" class="easyui-validatebox" required="true"/></td> </tr> <tr> <td>手机</td> <td><input type="text" name="telephone" class="easyui-validatebox" required="true" data-options="validType:'phonenumber'"/></td> </tr> <tr> <td>单位</td> <td><input type="text" name="station" class="easyui-validatebox" required="true"/></td> </tr> <tr> <td colspan="2"> <input type="checkbox" name="haspda" value="1" /> 是否有PDA</td> </tr> <tr> <td>取派标准</td> <td> <input type="text" name="standard" class="easyui-validatebox" required="true"/> </td> </tr> </table> </form> </div> </div> <!-- 修改窗口 --> <div class="easyui-window" title="对收派员进行添加或者修改" id="editStaffWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px"> <div region="north" style="height:31px;overflow:hidden;" split="false" border="false" > <div class="datagrid-toolbar"> <a id="edit" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a> <script type="text/javascript"> $(function(){ //绑定事件 $("#edit").click(function(){ //校验表单输入项 var v = $("#editStaffForm").form("validate"); if(v){ //校验通过，提交表单 $("#editStaffForm").submit(); } }); }); </script> </div> </div>pojo类：Staff
package com.crm.bos.domain; import java.util.HashSet; import java.util.Set; /** * 取派员实体 * */ public class Staff implements java.io.Serializable { // Fields private String id; private String name; private String telephone; private String haspda = "0";//是否有PDA 1：有 0：无 private String deltag = "0";//删除标识位 1：已删除 0：未删除 private String station; private String standard; private Set decidedzones = new HashSet(0); // Constructors /** default constructor */ public Staff() { } /** minimal constructor */ public Staff(String id) { this.id = id; } /** full constructor */ public Staff(String id, String name, String telephone, String haspda, String deltag, String station, String standard, Set decidedzones) { this.id = id; this.name = name; this.telephone = telephone; this.haspda = haspda; this.deltag = deltag; this.station = station; this.standard = standard; this.decidedzones = decidedzones; } // Property accessors public String getId() { return this.id; } public void setId(String id) { this.id = id; } public String getName() { return this.name; } public void setName(String name) { this.name = name; } public String getTelephone() { return this.telephone; } public void setTelephone(String telephone) { this.telephone = telephone; } public String getHaspda() { return this.haspda; } public void setHaspda(String haspda) { this.haspda = haspda; } public String getDeltag() { return this.deltag; } public void setDeltag(String deltag) { this.deltag = deltag; } public String getStation() { return this.station; } public void setStation(String station) { this.station = station; } public String getStandard() { return this.standard; } public void setStandard(String standard) { this.standard = standard; } public Set getDecidedzones() { return this.decidedzones; } public void setDecidedzones(Set decidedzones) { this.decidedzones = decidedzones; } }对应的Hibernate映射文件如下：
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN" "http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd"> <hibernate-mapping> <class name="com.crm.bos.domain.Staff" table="bc_staff" catalog="bos19"> <id name="id" type="java.lang.String"> <column name="id" length="32" /> <generator class="uuid" /> </id> <property name="name" type="java.lang.String"> <column name="name" length="20" /> </property> <property name="telephone" type="java.lang.String"> <column name="telephone" length="20" /> </property> <property name="haspda" type="java.lang.String"> <column name="haspda" length="1" /> </property> <property name="deltag" type="java.lang.String"> <column name="deltag" length="1" /> </property> <property name="station" type="java.lang.String"> <column name="station" length="40" /> </property> <property name="standard" type="java.lang.String"> <column name="standard" length="100" /> </property> <set name="decidedzones" inverse="true"> <key> <column name="staff_id" length="32" /> </key> <one-to-many class="com.crm.bos.domain.Decidedzone" /> </set> </class> <query name="staff.delete"> UPDATE Staff SET deltag = '1' WHERE id = ? </query> <query name="staff.restore"> UPDATE Staff SET deltag = '0' WHERE id = ? </query> </hibernate-mapping>第一步：扩展校验规则，对手机号进行校验
//扩展校验规则 $(function(){ var reg = /^1[3|4|5|7|8|9][0-9]{9}$/; $.extend($.fn.validatebox.defaults.rules, { phonenumber: { validator: function(value, param){ return reg.test(value); }, message: '手机号输入有误！' } }); });第二步：对应手机号输入框应用上面的规则
<td><input type="text" name="telephone" class="easyui-validatebox" required="true" data-options="validType:'phonenumber'"/></td>第三步：为添加窗口中的保存按钮绑定事件
<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a> <script type="text/javascript"> $(function(){ //绑定事件 $("#save").click(function(){ //校验表单输入项 var v = $("#addStaffForm").form("validate"); if(v){ //校验通过，提交表单 $("#addStaffForm").submit(); } }); }); </script>第四步：创建StaffAction，提供add方法，处理取派员添加
@Controller @Scope("prototype") public class StaffAction extends BaseAction<Staff>{ //注入Service @Autowired private IStaffService staffService; /** * 添加取派员 */ public String add(){ staffService.save(model); return "list"; } }第五步：配置struts.xml
<!-- 用户管理action --> <!-- class="userAction"是从spring工厂中获取的 --> <action name="userAction_*" class="userAction" method="{1}"> <result name="home">/index.jsp</result> <result name="list">/WEB-INF/pages/admin/userlist.jsp</result> </action>这里采用struts的通配符方式来实现动态action。关于更多struts2的动态action使用请参考这里。点我
这里基于EasyUI的datagrid实现取派员分页查询。关于EasyUI的datagrid的使用介绍请参考相关技术文档。 第一步：前端页面逻辑
// 取派员信息表格 $('#grid').datagrid( { iconCls : 'icon-forward', fit : true, border : false, rownumbers : true, striped : true, pageList: [30,50,100], pagination : true, toolbar : toolbar, url : "${pageContext.request.contextPath }/staffAction_pageQuery.action", idField : 'id', columns : columns, onDblClickRow : doDblClickRow//双击实现编辑 });第二步：创建一个PageBean类，封装分页信息
public class PageBean { private int currentPage;//当前页码 private int pageSize;//每页显示记录数 private int total;//总记录数 private DetachedCriteria detachedCriteria;//离线条件查询对象，包装查询条件 private List rows;//当前页需要展示的数据集合 public int getCurrentPage() { return currentPage; } public void setCurrentPage(int currentPage) { this.currentPage = currentPage; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } public DetachedCriteria getDetachedCriteria() { return detachedCriteria; } public void setDetachedCriteria(DetachedCriteria detachedCriteria) { this.detachedCriteria = detachedCriteria; } public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; } }第三步：在StaffAction中提供pageQuery方法，提供两个setPage和setRows方法，接收页面提交参数
private int page;//页码 private int rows;//每页显示的记录数 public void setRows(int rows) { this.rows = rows; } public void setPage(int page) { this.page = page; } /** * 分页查询方法 * @throws IOException */ public String pageQuery() throws IOException{ PageBean pageBean = new PageBean(); pageBean.setCurrentPage(page); pageBean.setPageSize(rows); DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Staff.class); pageBean.setDetachedCriteria(detachedCriteria); staffService.pageQuery(pageBean); //将PageBean对象转为json返回 JSONObject jsonObject = JSONObject.fromObject(pageBean); String json = jsonObject.toString(); ServletActionContext.getResponse().setContentType("text/json;charset=UTF-8"); ServletActionContext.getResponse().getWriter().print(json); return NONE; }第四步：在BaseDao中提供通用分页查询方法
/** * 通用分页查询方法 */ public void pageQuery(PageBean pageBean) { int currentPage = pageBean.getCurrentPage(); int pageSize = pageBean.getPageSize(); DetachedCriteria detachedCriteria = pageBean.getDetachedCriteria(); //总数据量----select count(*) from bc_staff //改变Hibernate框架发出的sql形式 detachedCriteria.setProjection(Projections.rowCount());//select count(*) from bc_staff List<Long> list = this.getHibernateTemplate().findByCriteria(detachedCriteria); Long total = list.get(0); pageBean.setTotal(total.intValue());//设置总数据量 detachedCriteria.setProjection(null);//修改sql的形式为select * from .... //重置表和类的映射关系 detachedCriteria.setResultTransformer(DetachedCriteria.ROOT_ENTITY); //当前页展示的数据集合 int firstResult = (currentPage - 1) * pageSize; int maxResults = pageSize; List rows = this.getHibernateTemplate().findByCriteria(detachedCriteria, firstResult, maxResults); pageBean.setRows(rows); }逻辑删除取派员，将取派员的deltag改为“1”。 第一步：为“作废”按钮绑定事件
//批量删除取派员 function doDelete(){ //获得选中的行 var rows = $("#grid").datagrid("getSelections"); if(rows.length == 0){ //没有选中，提示 $.messager.alert("提示信息","请选择需要删除的记录！","warning"); }else{ var array = new Array(); //选中了记录,获取选中行的id for(var i=0;i<rows.length;i++){ var id = rows[i].id; array.push(id); } var ids = array.join(",");//1,2,3,4 //发送请求，传递ids参数 window.location.href = '${pageContext.request.contextPath}/staffAction_delete.action?ids='+ids; } }第二步：在StaffAction中提供ids属性和set方法，delete方法批量删除
//接收ids参数 private String ids; public void setIds(String ids) { this.ids = ids; } /** * 批量删除功能（逻辑删除） * @return */ public String delete(){ staffService.deleteBatch(ids); return "list"; }第三步：在Service中提供批量删除方法
/** * 批量删除 */ public void deleteBatch(String ids) { String[] staffIds = ids.split(","); for (String id : staffIds) { staffDao.executeUpdate("staff.delete", id); } }第四步：在Staff.hbm.xml中定义更新语句
<query name="staff.delete"> UPDATE Staff SET deltag = '1' WHERE id = ? </query>恢复逻辑与删除逻辑刚好相反。 第一步：为“还原”按钮绑定事件
function doRestore(){ //判断是否选择了内容 var rows = $("#grid").datagrid("getSelections"); if(rows.length==0){ //未选中内容 $.messager.alert("提示信息","请选择需要还原的取派员","warning"); }else{ //获得选中的取派员id,拼接字符串 var array = new Array(); for(var i=0;i<rows.length;i++){ var id=rows[i].id; array.push(id); } var ids = array.join(",");//将数组中的数据分割 //发送请求 window.location.href="${pageContext.request.contextPath }/staffAction_restore.action?ids="+ids; } }第二步：StaffAction提供方法
// 批量还原 public String restore() { staffService.restoreBatch(ids); return "list"; }第三步：在Service中提供批量还原方法
public void restoreBatch(String ids) { String[] sids = ids.split(","); for (String id : sids) { staffDao.executeUpdate("staff.restore", id); } }第四步：在Staff.hbm.xml中定义更新语句
<query name="staff.restore"> UPDATE Staff SET deltag = '0' WHERE id = ? </query>这里采用双击事件来触发修改事件。 第一步：前端页面逻辑：
<!-- 修改窗口 --> <div class="easyui-window" title="对收派员进行添加或者修改" id="editStaffWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px"> <div region="north" style="height:31px;overflow:hidden;" split="false" border="false" > <div class="datagrid-toolbar"> <a id="edit" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a> <script type="text/javascript"> $(function(){ //绑定事件 $("#edit").click(function(){ //校验表单输入项 var v = $("#editStaffForm").form("validate"); if(v){ //校验通过，提交表单 $("#editStaffForm").submit(); } }); }); </script> </div> </div> <div region="center" style="overflow:auto;padding:5px;" border="false"> <form id="editStaffForm" action="${pageContext.request.contextPath }/staffAction_edit.action" method="post"> <table class="table-edit" width="80%" align="center"> <tr class="title"> <td colspan="2">收派员信息</td> </tr> <!-- TODO 这里完善收派员添加 table --> <tr> <td>取派员编号</td> <td><input type="text" readonly="readonly" name="id" class="easyui-validatebox" required="true"/></td> </tr> <tr> <td>姓名</td> <td><input type="text" name="name" class="easyui-validatebox" required="true"/></td> </tr> <tr> <td>手机</td> <td><input type="text" name="telephone" class="easyui-validatebox" required="true" data-options="validType:'phonenumber'"/></td> </tr> <tr> <td>单位</td> <td><input type="text" name="station" class="easyui-validatebox" required="true"/></td> </tr> <tr> <td colspan="2"> <input type="checkbox" name="haspda" value="1" /> 是否有PDA</td> </tr> <tr> <td>取派标准</td> <td> <input type="text" name="standard" class="easyui-validatebox" required="true"/> </td> </tr> </table> </form> </div>第二步：修改datagrid的双击行事件的处理函数
function doDblClickRow(rowIndex, rowData){ //rowIndex是选中的行号索引（从0开始），rowData是当前行的数据，json格式 //弹出修改窗口 $('#editStaffWindow').window("open"); $("#editStaffForm").form("load",rowData);//载入原有的表单数据 }第三步：在StaffAction中提供edit方法，修改取派员信息
/** * 修改取派员信息 */ public String edit(){ //显查询数据库中原始数据 Staff staff = staffService.findById(model.getId()); //再按照页面提交的参数进行覆盖 staff.setName(model.getName()); staff.setTelephone(model.getTelephone()); staff.setStation(model.getStation()); staff.setHaspda(model.getHaspda()); staff.setStandard(model.getStandard()); staffService.update(staff); return "list"; }