BOS项目3：修复window控件BUG、添加/修改/作废取派员、datagrid使用、分页查询(DetachedCriteria离线)、formatter函数)

基础设置部分需求对应需求规格说明书的2.6章节

2.1   基础档案设置 

*本模块通常有个通俗的说法“数据字典”。

*作用:为其他模块提供数据

2.2   收派标准

2.3   班车设置

2.4   取派员设置

2.5   区域设置

区域是指由国家划分的行政区域。 

2.6   分区管理

区域是由国家划分的，往往范围很大，大小不规则。不便于直接进行物流分配，需要对区域进行细分----分区。

2.7   定区管理

定区是进行物流分配的基本单位。定区将客户信息、分区信息、取派员信息进行关联，为自动分单提供基础数据的。

2.8   收派时间管理

第一步：在staff.jsp页面扩展validatebox的校验规则，对手机号进行校验

[html]  view plain  copy

 

 

1. <script type="text/javascript">  
2.     $(function(){  
3.         var regex = /^1[3|4|5|7|8|][0-9]{9}$/;  
4.         //扩展对手机号进行校验规则  
5.         $.extend($.fn.validatebox.defaults.rules, {   
6.             phoneNumber: {   
7.                 validator: function(value,param){   
8.                     return regex.test(value);   
9.                 },   
10.                 message: '手机号输入有误！'   
11.       
12.                 }   
13.             });   
14.     });  
15. </script>  

第二步：为手机号输入框应用规则

 data-options="validType:'phoneNumber'"

[html]  view plain  copy

 

 

1. <tr>  
2.     <td>手机</td>  
3.     <td><input type="text"   
4.         data-options="validType:'phoneNumber'"   
5.         name="telephone" class="easyui-validatebox" required="true"/></td>  
6. </tr>  

第三步：为添加窗口中“保存”按钮绑定事件，进行表单校验，如果校验通过提交表单

[html]  view plain  copy

 

 

1. <a id="edit" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>  
2. <script type="text/javascript">  
3.     //为保存按钮绑定事件  
4.     $("#edit").click(function(){  
5.         //表单校验  
6.         var v = $("#editStaffForm").form("validate");  
7.         if(v){  
8.             //校验通过 ,提交表单  
9.             $("#editStaffForm").submit();  
10.         }  
11.     });  
12. </script>  

第四步：在服务器端创建Action、Service、Dao

Action:

[java]  view plain  copy

 

 

1. /** 
2.  * 取派员操作Action 
3.  */  
4. @Controller  
5. @Scope("prototype")  
6. public class StaffAction extends BaseAction<Staff>{  
7.     @Resource  
8.     private IStaffService staffService;  
9.       
10.     /** 
11.      * 添加取派员 
12.      */  
13.     public String add(){  
14.         staffService.save(model);  
15.         return "list";  
16.     }  
17.     public void setPage(int page) {  
18.         this.page = page;  
19.     }  
20.   
21.     public void setRows(int rows) {  
22.         this.rows = rows;  
23.     }  

save 方法base中已存在 传递model进行添加即可

5.1   对应html代码渲染为datagrid样式

[html]  view plain  copy

 

 

1. <h2>方式一：将静态html代码渲染为datagrid</h2>  
2. <table class="easyui-datagrid">  
3.     <thead>  
4.         <tr>  
5.             <th data-options="field:'id'">编号</th>  
6.             <th data-options="field:'name'">姓名</th>  
7.             <th data-options="field:'age'">年龄</th>  
8.         </tr>  
9.     </thead>  
10.     <tbody>  
11.         <tr>  
12.             <td>1</td>  
13.             <td>xiaoming</td>  
14.             <td>88</td>  
15.         </tr>  
16.         <tr>  
17.             <td>2</td>  
18.             <td>laowang</td>  
19.             <td>3</td>  
20.         </tr>  
21.     </tbody>  
22. </table>  

5.2   发送ajax请求获取datagrid中的数据

json文件 

{

       "total":200,

       "rows":[

                     {"id":"1","name":"张三","age":"10"},

                     {"id":"2","name":"李四","age":"20"},

                     {"id":"3","name":"王五","age":"30"}

              ]

}

Datagrid中，如果指定了url，执行过程

1、  加载jsp页面

2、  发送ajax请求，获取json数据

3、  将json数据显示在表格中

[html]  view plain  copy

 

 

1. <h2>方式二：加载远程数据</h2>  
2. <table class="easyui-datagrid"  
3.  data-options="url:'${pageContext.request.contextPath }/json/data.json'">  
4.     <thead>  
5.         <tr>  
6.             <th data-options="field:'id'">编号</th>  
7.             <th data-options="field:'name'">姓名</th>  
8.             <th data-options="field:'age'">年龄</th>  
9.         </tr>  
10.     </thead>  
11. </table>  

5.3   通过js代码动态创建datagrid

[html]  view plain  copy

 

 

1. <h2>方式三：使用js代码创建datagrid</h2>  
2. <script type="text/javascript">  
3.     $(function(){  
4.         //将页面上的table元素展示为datagrid  
5.         $("#grid").datagrid({  
6.             //设置数据表格的属性  
7.             columns:[[  
8.                       {field:'id',title:'编号',checkbox:true},//每个json代表一列  
9.                       {field:'name',title:'姓名'},  
10.                       {field:'age',title:'年龄'}  
11.                       ]],  
12.              url:'${pageContext.request.contextPath }/json/data.json',  
13.              rownumbers:true,  
14.              singleSelect:true,  
15.              pagination:true,//显示分页条  
16.              toolbar:[  
17.                       {text:'添加',iconCls:'icon-add',handler:function(){  
18.                           alert("add");  
19.                       }}  
20.                       ]//工具栏  
21.         });  
22.     });  
23. </script>  
24. <table id="grid">  
25. </table>  

第一步：修改staff.jsp页面中datagrid的url属性，访问Action，进行分页查询

url : "staffAction_pageQuery"

[html]  view plain  copy

 

 

1. // 取派员信息表格  
2. $('#grid').datagrid( {  
3.     iconCls : 'icon-forward',  
4.     fit : true,  
5.     border : false,  
6.     rownumbers : true,  
7.     striped : true,  
8.     pageList: [30,50,100],//每页显示pageSize  
9.     pagination : true,//开启分页  
10.     toolbar : toolbar,//上工具栏  
11.     url : "staffAction_pageQuery",//ajax请求  
12.     idField : 'id',  
13.     columns : columns, //var columns变量  
14.     onDblClickRow : doDblClickRow//双击事件函数  
15. });  

页面一加载就会发送数据请求

第二步：在StaffAction中提供pageQuery方法进行分页查询，在StaffAction中提供两个属性，page和rows，对应的setter方法接收参数

[java]  view plain  copy

 

 

1. private int rows;//当前页码  
2. private int page;//pageSize 每页记录数  
3. public void setRows(int rows) {  
4.     this.rows = rows;  
5. }  
6. public void setPage(int page) {  
7.     this.page = page;  
8. }  

*Post参数的rows:当前页要展示多少条数据,是数字,对应limit 1,2 的2,pageSize每页显示数据数

*Json数据中的属性rows:要展示的数据,”rows”:[{},{},{}]

第三步：action提供page rows 接收数据 并且抽取PageBean类，封装分页信息

PageBean

[html]  view plain  copy

 

 

1. /**  
2.  * 封装分页信息  
3.  */  
4. public class PageBean {  
5.     private int currentPage;//当前页码  
6.     private int pageSize;//每页显示的记录数  
7.     private DetachedCriteria detachedCriteria;//查询条件  
8.       
9.     private int total;//总记录数  
10.     private List rows;//当前页展示的数据集合  

第四步：在BaseDao中提供通用分页查询方法

 投影Projections统计函数

[java]  view plain  copy

 

 

1. /** 
2.  * 通用分页查询方法 
3.  */  
4. public void pageQuery(PageBean pageBean) {  
5.     //查询条件  
6.     DetachedCriteria detachedCriteria = pageBean.getDetachedCriteria();  
7.     //指定由hibernate框架发出select count(id) from xxx....  
8.     detachedCriteria.setProjection(Projections.rowCount());  
9.     //查询总记录数  
10.     List<Long> countList = this.getHibernateTemplate().findByCriteria(detachedCriteria);  
11.     int total = countList.get(0).intValue();  
12.     pageBean.setTotal(total);  
13.     //指定由hibernate框架发出select * from xxx...   
14.     detachedCriteria.setProjection(null);  
15.     //改变hibernate的映射行为，从表中查询的数据对应包装成pojo对象  
16.     detachedCriteria.setResultTransformer(DetachedCriteria.ROOT_ENTITY);  
17.       
18.     int currentPage = pageBean.getCurrentPage();  
19.     int pageSize = pageBean.getPageSize();  
20.       
21.     int firstResult = (currentPage - 1 ) * pageSize;  
22.     int maxResults = pageSize;  
23.       
24.     List rows = this.getHibernateTemplate().findByCriteria(detachedCriteria, firstResult, maxResults);  
25.     pageBean.setRows(rows);  
26. }  

第五步：在StaffAction中调用service分页查询,响应json数据

[java]  view plain  copy

 

 

1. /** 
2.  * 分页查询方法 
3.  * @throws IOException  
4.  */  
5. public String pageQuery() throws IOException{  
6.     PageBean pageBean = new PageBean();  
7.     pageBean.setCurrentPage(page);//当前页码  
8.     pageBean.setPageSize(rows);//每页显示记录数  
9.     //离线条件查询对象，用于包装查询条件  
10.     DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Staff.class);  
11.     //按照取派员的id进行降序  
12.     detachedCriteria.addOrder(Order.desc("id"));  
13.     //detachedCriteria.add(Restrictions.like("name", "xiaowang"));  
14.     pageBean.setDetachedCriteria(detachedCriteria);  
15.     staffService.pageQuery(pageBean);  
16.       
17.     //使用jsonlib将PageBean对象序列化为json数据  
18.     JsonConfig jsonConfig = new JsonConfig();  
19.     jsonConfig.setExcludes(new String[]{"currentPage","pageSize","detachedCriteria","decidedzones"});  
20.     String json = JSONObject.fromObject(pageBean,jsonConfig).toString();  
21.       
22.     ServletActionContext.getResponse().setContentType("text/json;charset=UTF-8");  
23.     ServletActionContext.getResponse().getWriter().print(json);  
24.     return NONE;  
25. }  

响应的对应json数据

当数据库中存储的数据和页面中要展示的数据不一致时，可以使用formatter转换

如：数据库中存1，页面中展示“有”

[html]  view plain  copy

 

 

1. }, {  
2.     field : 'haspda',  
3.     title : '是否有PDA',  
4.     width : 120,  
5.     align : 'center',  
6.     formatter : function(data,row, index){  
7.         if(data=="1"){  
8.             return "有";  
9.         }else{  
10.             return "无";  
11.         }  
12.     } 

逻辑删除，将取派员deltag改为1

第一步：调整作废按钮的事件

getSelections   :     返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。

[html]  view plain  copy

 

 

1. function doDelete(){  
2.     //作废功能  
3.     //获得当前数据表格选中的行  
4.     var rows = $("#grid").datagrid("getSelections");  
5.     if(rows.length == 0){  
6.         //没有选中  
7.         $.messager.alert("提示信息","请选择要作废的记录！","warning");  
8.     }else{  
9.         //选中  
10.         //获得选中记录的id  
11.         $.messager.confirm("提示信息","你确定删除当前取派员吗？",function(r){  
12.             if(r){  
13.                 var array = new Array();  
14.                 for(var i=0;i<rows.length;i++){  
15.                     var id = rows[i].id;  
16.                     array.push(id);  
17.                 }  
18.                 var ids = array.join(",");  
19.                 window.location.href = "${pageContext.request.contextPath}/staffAction_delete.action?ids=" + ids;  
20.             }  
21.         });  
22.     }  
23. }  

第二步：在StaffAction中提供delete方法批量作废，提供属性ids接收提交的参数

[java]  view plain  copy

 

 

1. public void setIds(String ids) {  
2.     this.ids = ids;  
3. }  
4.   
5. //属性驱动  
6. private String ids;  
7.   
8. /** 
9.  * 批量作废功能 
10.  */  
11. public String delete(){  
12.     staffService.deleteBatch(ids);  
13.     return "list";  
14. }  

Service代码：

[java]  view plain  copy

 

 

1. public void deleteBatch(String ids) {  
2.     String[] sIds = ids.split(",");  
3.     for (String id : sIds) {  
4.         staffDao.executeUpdate("staff.delete", id);  
5.     }  
6. }  

第三步：在Staff.hbm.xml中配置命名查询语句

[html]  view plain  copy

 

 

1. <!-- 作废取派员 -->  
2. <query name="staff.delete">  
3.     update Staff set deltag = '1' where id = ?  
4. </query>  

第一步：提供一个修改取派员信息窗口（复制添加取派员窗口）

第二步：为datagrid绑定双击事件，在事件中打开修改窗口，回显数据

[html]  view plain  copy

 

 

1. // 取派员信息表格  
2. $('#grid').datagrid( {  
3.     iconCls : 'icon-forward',  
4.     fit : true,  
5.     border : false,  
6.     rownumbers : true,  
7.     striped : true,  
8.     pageList: [10,30,50,100],  
9.     pagination : true,  
10.     toolbar : toolbar,//工具栏  
11.     url : "${pageContext.request.contextPath}/staffAction_pageQuery.action",  
12.     idField : 'id',  
13.     columns : columns,  
14.     onDblClickRow : doDblClickRow//绑定双击事件  
15. });  

双击绑定事件

onDblClickRow   :  参数-rowIndex, rowData :

在用户双击一行的时候触发，参数包括：

rowIndex：点击的行的索引值，该索引值从0开始。

rowData：对应于点击行的记录(json对象)。

load装载数据回显

load :参数-data  :读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录。

[html]  view plain  copy

 

 

1. function doDblClickRow(rowIndex, rowData){  
2.     //打开修改取派员窗口  
3.     $('#editStaffWindow').window("open");  
4.     //将双击行数据显示到修改窗口的表单中  
5.     //$("input[name=name]").val(rowData.name);  
6.     $("#editStaffForm").form("load",rowData);  
7. } 

需要增加一个隐藏input 来提供id,以供查询修改

<input type="hidden" name="id">

第三步：在StaffAction中提供edit方法，Service中修改取派员信息

利用hibernate快照机制

[java]  view plain  copy

 

 

1. @Override  
2. public void editStaff(Staff model) {  
3.     //查询原始数据  
4.     String id=model.getId();  
5.     Staff findById = staffDao.findById(id);  
6.     //利用hibernate快照机制编辑修改相应数据  
7.     findById.setName(model.getName());  
8.     findById.setTelephone(model.getTelephone());  
9.     findById.setStandard(model.getStandard());  
10.     findById.setStation(model.getStation());  
11.     findById.setHaspda(model.getHaspda());        
12. }