bos 第3天(easyui弹窗边界问题取派员的添加修改和批量删除)

Posted 2020-09-20 无极尊

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="#" 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 = ‘${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"; }