首页 > 代码库 > bos 第3天(easyui弹窗边界问题、取派员的添加、修改和批量删除)
bos 第3天(easyui弹窗边界问题、取派员的添加、修改和批量删除)
BOS项目笔记 第3天
今天内容安排:
1、解决window窗口bug
2、bos项目整体需求分析(基础设置、取派、中转、路由、报表)
3、取派员添加功能
4、jQuery easyUI控件datagrid使用方式
5、基于datagrid实现取派员分页查询
6、取派员批量删除和修改
1. 修复window控件bug
将上面的js文件引入jsp页面中
2. 基础设置部分需求分析
整个基础设置部分对应需求文档2.6章节。
2.1 基础档案设置
在其他的系统中通常称为“数据字典”。提供基础数据,供其他模块使用。
2.2 收派标准
2.3 班车设置
2.4 取派员设置
2.5 区域设置
区域为国家划分的行政区域。
2.6 分区设置
区域范围很大,不规则,不便于直接进行人员分配,需要对区域进行细分----分区。
2.7 定区管理
定区是物流分配的基本单位。定区可以将分区、取派员、客户信息进行关联,为自动分单提供数据支持。hessian
2.8 时间管理
3. 取派员添加
页面:/WEB-INF/pages/base/staff.jsp
第一步:扩展校验规则,对手机号进行校验
//扩展校验规则 $(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: ‘手机号输入有误!‘ } }); }); |
第二步:对应手机号输入框应用上面的规则
第三步:为添加窗口中的保存按钮绑定事件
<a id="save" icon="icon-save" href=http://www.mamicode.com/"#" 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
4. jQuery easyUI中datagrid数据表格使用
4.1 方式一:将HTML代码渲染为datagrid样式
<h3>方式一:将静态的HTML代码渲染为datagrid样式</h3> <table class="easyui-datagrid"> <thead> <tr> <th data-options="field:‘id‘">编号</th> <th data-options="field:‘name‘">姓名</th> <th data-options="field:‘age‘">年龄</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>张三</td> <td>20</td> </tr> <tr> <td>002</td> <td>李四</td> <td>30</td> </tr> </tbody> </table> |
4.2 方式二:发送ajax请求获取json数据
<h3>方式二:发送ajax请求获取json数据</h3> <table class="easyui-datagrid" data-options="url:‘/bos19/json/data.json‘"> <thead> <tr> <th data-options="field:‘id‘">编号</th> <th data-options="field:‘name‘">姓名</th> <th data-options="field:‘age‘">年龄</th> </tr> </thead> </table> |
提供json文件:
4.3 方式三:使用插件提供的API动态创建datagrid
<h3>方式三:通过js代码动态创建datagrid</h3> <table id="grid"> </table> <script type="text/javascript"> $(function(){ $("#grid").datagrid({ columns:[[ {field:‘id‘,title:‘编号‘,checkbox:true}, {field:‘name‘,title:‘姓名‘}, {field:‘age‘,title:‘年龄‘} ]], url:‘/bos19/json/data.json‘, toolbar:[ {text:‘添加‘,iconCls:‘icon-add‘}, {text:‘删除‘,iconCls:‘icon-remove‘, handler:function(){ //获得选中的行 var rows = $("#grid").datagrid("getSelections"); for(var i=0;i<rows.length;i++){ var id = rows[i].id; alert(id); } }}, {text:‘修改‘,iconCls:‘icon-edit‘} ], singleSelect:true, pagination:true,//分页条 pageList:[3,5,7] }); }); </script> |
要求服务端返回的json数据满足:
5. 基于datagrid实现取派员分页查询
第一步:修改页面中datagrid的URL地址,访问action
第二步:创建一个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); } |
6. 批量删除取派员
逻辑删除取派员,将取派员的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 = http://www.mamicode.com/‘${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中定义更新语句
7. 取派员信息修改功能
第一步:复制添加取派员窗口,获得修改的窗口
第二步:修改datagrid的双击行事件的处理函数
第三步:提交修改的表单
第四步:在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"; } |
bos 第3天(easyui弹窗边界问题、取派员的添加、修改和批量删除)