BOS项目6:业务受理功能、快速录入工作单、{datagrid数据表格编辑功能使用}



1.    业务受理部分需求分析

整个BOS项目分为:基础设置、取派、中转、路由、报表。

受理功能为整个取派的一部分

受理环节,是物流业务的开始,作为服务前端,客户通过电话、网络等多种方式进行委托,业务受理员通过与客户交流,获取客户的服务需求和具体委托信息,将服务指令输入我司服务系统。

    业务通知单:客户通过打电话方式进行物流委托,物流公司业务人员将委托信息录入到bos系统中------业务通知单

    工单:业务人员将业务通知单信息录入到系统后,BOS系统会尝试根据客户的取件地址自动找到取派员,为取派员产生一个取货的任务-----工单

    工作单:取派员将货物从客户住处取回物流公司,将货物的相关信息(寄件人信息、收件人信息)录入到bos系统中------工作单

2.    根据pdm导出sql脚本文件


3.    业务受理功能实现

3.1   在crm系统中扩展方法---根据手机号查询客户信息

注意:需要将CustomerService接口中扩展的方法复制到bos接口中

3.2   在业务受理页面调整

业务受理页面:

目的:通过电话号码字段触发丢失焦点发送ajax查询此手机号的相关用户信息回显到当前表单

 

    为“来电号码”输入框绑定离焦事件

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. <td>来电号码:</td>  
  2. <td><input type="text" class="easyui-validatebox" name="telephone"  
  3.     required="true" />  
  4.     <script>  
  5.         $(function(){  
  6.             //为“来电号码”绑定离焦事件  
  7.             $("input[name=telephone]").blur(function(){  
  8.                 //发送ajax请求,请求Action,在action中调用代理对象,通过代理对象远程调用crm  
  9.                 var url = "${pageContext.request.contextPath}/noticebillAction_findCustomerByPhone.action";  
  10.                 $.post(url,{"telephone":this.value},function(data){  
  11.                     if(data != null){  
  12.                         //将客户信息回显到相应的输入框中  
  13.                         var id = data.id;  
  14.                         var name = data.name;  
  15.                         var address = data.address;  
  16.                         $("input[name=customerId]").val(id);  
  17.                         $("input[name=customerName]").val(name);  
  18.                         $("input[name=delegater]").val(name);  
  19.                         $("input[name=pickaddress]").val(address);  
  20.                     }else{  
  21.                         $("input[name=customerId]").val("");  
  22.                         $("input[name=customerName]").val("");  
  23.                         $("input[name=delegater]").val("");  
  24.                         $("input[name=pickaddress]").val("");  
  25.                     }  
  26.                 });  
  27.             });  
  28.         });  
  29.     </script>  

    创建一个NoticebillAction,注入Customerservice代理对象,提供方法findCustomerByPhone

[java]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. //注入代理对象,调用crm服务  
  2. @Resource  
  3. private CustomerService customerService;  
  4.   
  5. /** 
  6.  * 根据手机号查询客户信息 
  7.  */  
  8. public String findCustomerByPhone(){  
  9.     //调用crm服务  
  10.     Customer customer = customerService.findCustomerByPhone(model.getTelephone());  
  11.     this.writeObjectBean2Json(customer, new String[]{});  
  12.     return NONE;  
  13. }  

配置struts.xml

    提交表单

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. <script type="text/javascript">  
  2.     $(function(){  
  3.         $("body").css({visibility:"visible"});  
  4.           
  5.         // 对save按钮条件 点击事件  
  6.         $('#save').click(function(){  
  7.             // 对form 进行校验  
  8.             if($('#noticebillForm').form('validate')){  
  9.                 $('#noticebillForm').submit();  
  10.             }  
  11.         });  
  12.     });  
  13. </script>  

    在action中接受参数,保存业务通知单

保存业务通知单:通过判断用户所关联的定区id 来进行自动分单或手动分单

[java]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * 保存业务通知单 
  3.  */  
  4. public String add(){  
  5.     noticebillService.save(model);  
  6.     return "toAddUI";  
  7. }  

Service代码:

[java]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. @Service  
  2. @Transactional  
  3. public class NoticebillServiceImpl implements INoticebillService{  
  4.     @Resource  
  5.     private INoticebillDao noticebillDao;  
  6.     //注入代理对象  
  7.     @Resource  
  8.     private CustomerService customerService;  
  9.     @Resource  
  10.     private IDecidedzoneDao decidedzoneDao;  
  11.     @Resource  
  12.     private IWorkbillDao workbillDao;  
  13.       
  14.     public void save(Noticebill model) {  
  15.         User user = BOSContext.getLoginUser();  
  16.         model.setUser(user);//当前登录用户  
  17.         noticebillDao.save(model);//持久对象  
  18.           
  19.         //自动分单----为当前客户找到一个取派员,取件  
  20.         //取件地址  
  21.         String pickaddress = model.getPickaddress();  
  22.         //根据取件地址获取定区ID  
  23.         String decidedzoneId = customerService.findDecidedzoneidByPickAddress(pickaddress);  
  24.         if(decidedzoneId != null){  
  25.             model.setOrdertype("自动");  
  26.             //匹配成功,可以自动分单  
  27.             Decidedzone decidedzone = decidedzoneDao.findById(decidedzoneId);  
  28.             Staff staff = decidedzone.getStaff();//获得定区的负责人  
  29.               
  30.             model.setStaff(staff);//建立业务通知单和取派员关系  
  31.               
  32.             //为当前匹配到取派员产生一个工单  
  33.             Workbill workbill = new Workbill();  
  34.             workbill.setNoticebill(model);//关联业务通知单  
  35.             workbill.setStaff(staff);//关联取派员  
  36.             workbill.setType("新");//类型  
  37.             workbill.setPickstate("未取件");//取件状态  
  38.             workbill.setBuildtime(new Timestamp(System.currentTimeMillis()));//系统时间  
  39.             workbill.setAttachbilltimes(0);//追单次数  
  40.             workbill.setRemark(model.getRemark());//备注  
  41.             //保存工单  
  42.             workbillDao.save(workbill);  
  43.               
  44.             //调用短信接口向取派员发送短信  
  45.               
  46.         }else{  
  47.             //匹配失败,转入人工分单  
  48.             model.setOrdertype("人工");  
  49.         }  
  50.           
  51.     }  
  52. }  

4.    数据表格编辑功能使用

    使用datagrid的[列属性]开启编辑功能

editor      

属性值类型:string,object      

详情:

指明编辑类型。当字符串指明编辑类型的时候,对象包含2个属性:

type:字符串,该编辑类型可以使用的类型有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。

options:对象,object, 该编辑器属性对应于编辑类型。

    开始编辑和结束编辑[方法]

beginEdit       参数:index     开始编辑行。

endEdit           参数:index     结束编辑行。

    插入一行数据

insertRow       

详情:

插入一个新行,参数包括一下属性:

index:要插入的行索引,如果该索引值未定义,则追加新行。

row:行数据。

    获得行索引

getRowIndex  

参数row

返回指定行的索引号,该行的参数可以是一行记录或一个ID字段值。

 

    删除行

deleteRow      index      删除行。

 

    结束编辑状态时触发的[事件]

onAfterEdit    

参数:rowIndex,rowData, changes  

详情:

在用户完成编辑一行的时候触发,参数包括:

rowIndex:编辑行的索引,索引从0开始。

rowData:对应于完成编辑的行的记录。

changes:更改后的字段(键)/值对。

示例

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. <script type="text/javascript">  
  2.     $(function() {  
  3.         var index = -1;  
  4.         $("#grid").datagrid({  
  5.             columns : [ [ {  
  6.                 field : 'id',  
  7.                 checkbox : true,  
  8.             }, {  
  9.                 field : 'name',  
  10.                 title : '姓名',  
  11.                 width : 120,  
  12.                 align : 'center',  
  13.                 editor : {  
  14.                     type : 'validatebox',  
  15.                     options : {  
  16.                         required : true  
  17.                     }  
  18.                 }  
  19.             }, {  
  20.                 field : 'telephone',  
  21.                 title : '手机号',  
  22.                 width : 120,  
  23.                 align : 'center',  
  24.                 editor : {  
  25.                     type : 'validatebox',  
  26.                     options : {  
  27.                         required : true  
  28.                     }  
  29.                 }  
  30.             } ] ],  
  31.             //事件:结束编辑状态时触发  
  32.             onAfterEdit:function(rowIndex, rowData, changes){  
  33.                 //发送ajax请求,将数据提交到服务端修改数据库  
  34.             },  
  35.             url : '${pageContext.request.contextPath}/json/staff.json',  
  36.                 toolbar : [ {  
  37.                                 id : 'button-add',  
  38.                                 text : '增加一行',  
  39.                                 iconCls : 'icon-add',  
  40.                                 handler : function(){  
  41.                                     $("#grid").datagrid("insertRow",{//插入一行  
  42.                                         index:0,//在第一行插入  
  43.                                         row:{}//空行  
  44.                                     });  
  45.                                     index = 0;  
  46.                                     //开启第一行的编辑状态  
  47.                                     $("#grid").datagrid("beginEdit",index);//开启第一行编辑状态  
  48.                                 }  
  49.                             }, //按钮  
  50.                             {  
  51.                                 id : 'button-save',  
  52.                                 text : '保存',  
  53.                                 iconCls : 'icon-save',  
  54.                                 handler : function(){  
  55.                                     //结束编辑状态  
  56.                                     $("#grid").datagrid("endEdit",index);//开启第一行编辑状态  
  57.                                 }  
  58.                             },  
  59.                             {  
  60.                                 id : 'button-eidt',  
  61.                                 text : '编辑',  
  62.                                 iconCls : 'icon-save',  
  63.                                 handler : function(){  
  64.                                     var rows = $("#grid").datagrid("getSelections");  
  65.                                     if(rows.length == 1){  
  66.                                         //获得当前选中行的索引  
  67.                                         index = $("#grid").datagrid("getRowIndex",rows[0]);  
  68.                                         $("#grid").datagrid("beginEdit",index);  
  69.                                     }  
  70.                                 }  
  71.                             }  
  72.                         ]  
  73.         });  
  74.     });  
  75. </script>  
  76. </head>  
  77. <body>  
  78.     <table id="grid"></table>  
  79. </body>  

5.    实现工作单快速录入功能(基于datagrid编辑)

页面:


按钮

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. //行数全局变量  
  2. var editIndex ;  
  3. //添加按钮  
  4. function doAdd(){  
  5.     //当填完一行数据(一个工作单)后不点保存直接点击下增加一行  
  6.     if(editIndex != undefined){  
  7.         //根据全局变量完成上次的编辑  
  8.         $("#grid").datagrid('endEdit',editIndex);  
  9.     }  
  10.     //新增一行  
  11.     if(editIndex==undefined){  
  12.         //alert("快速添加电子单...");  
  13.         $("#grid").datagrid('insertRow',{  
  14.             index : 0,//第一行  
  15.             row : {}//添加一排空行  
  16.         });  
  17.         //开启新增行的编辑  
  18.         $("#grid").datagrid('beginEdit',0);  
  19.         editIndex = 0;  
  20.     }  
  21. }  
  22. //保存按钮  
  23. function doSave(){  
  24.     //结束编辑  
  25.     $("#grid").datagrid('endEdit',editIndex );  
  26. }  
  27.   
  28. function doCancel(){  
  29.     if(editIndex!=undefined){  
  30.         $("#grid").datagrid('cancelEdit',editIndex);  
  31.         if($('#grid').datagrid('getRows')[editIndex].id == undefined){  
  32.             $("#grid").datagrid('deleteRow',editIndex);  
  33.         }  
  34.         editIndex = undefined;  
  35.     }  
  36. }  

    修改datagrid的事件onAfterEdit

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. // 收派标准数据表格  
  2. $('#grid').datagrid( {  
  3.     iconCls : 'icon-forward',  
  4.     fit : true,  
  5.     border : true,  
  6.     rownumbers : true,  
  7.     striped : true,  
  8.     pageList: [30,50,100],  
  9.     pagination : true,  
  10.     toolbar : toolbar,  
  11.     url :  "",  
  12.     idField : 'id',  
  13.     columns : columns,  
  14.     onDblClickRow : doDblClickRow,  
  15.     onAfterEdit : function(rowIndex, rowData, changes){  
  16.         console.info(rowData);  
  17.         editIndex = undefined;  
  18.         //发送ajax请求保存工作单  
  19.         var url="${pageContext.request.contextPath}/workordermanageAction_quickAdd";  
  20.         $.post(url,rowData,function(data){  
  21.             //alert(data);  
  22.             if(data=='1'){  
  23.                 $.messager.alert("提示","添加成功","info");  
  24.             }else{  
  25.                 $.messager.alert("错误提示","添加失败","warning");  
  26.             }  
  27.         });  
  28.     }  
  29. });  

    创建WorkordermanageAction

[java]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * ajax 工作单快速添加 
  3.  * @return 
  4.  * @throws IOException  
  5.  */  
  6. public String quickAdd() throws IOException{  
  7.     // 添加更新时间  
  8.     this.getModel().setUpdatetime(new Date());  
  9.     String flag="0";  
  10.     try {  
  11.         workordermanageService.quickAdd(this.getModel());  
  12.     } catch (Exception e) {  
  13.         flag= "1";  
  14.         e.printStackTrace();  
  15.     }  
  16.     //相应通知  
  17.     ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");  
  18.     ServletActionContext.getResponse().getWriter().print(flag);  
  19.     return NONE;  
  20. }  

    配置struts.xml

1.    业务受理部分需求分析

整个BOS项目分为:基础设置、取派、中转、路由、报表。

受理功能为整个取派的一部分

受理环节,是物流业务的开始,作为服务前端,客户通过电话、网络等多种方式进行委托,业务受理员通过与客户交流,获取客户的服务需求和具体委托信息,将服务指令输入我司服务系统。

    业务通知单:客户通过打电话方式进行物流委托,物流公司业务人员将委托信息录入到bos系统中------业务通知单

    工单:业务人员将业务通知单信息录入到系统后,BOS系统会尝试根据客户的取件地址自动找到取派员,为取派员产生一个取货的任务-----工单

    工作单:取派员将货物从客户住处取回物流公司,将货物的相关信息(寄件人信息、收件人信息)录入到bos系统中------工作单

2.    根据pdm导出sql脚本文件


3.    业务受理功能实现

3.1   在crm系统中扩展方法---根据手机号查询客户信息

注意:需要将CustomerService接口中扩展的方法复制到bos接口中

3.2   在业务受理页面调整

业务受理页面:

目的:通过电话号码字段触发丢失焦点发送ajax查询此手机号的相关用户信息回显到当前表单

 

    为“来电号码”输入框绑定离焦事件

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. <td>来电号码:</td>  
  2. <td><input type="text" class="easyui-validatebox" name="telephone"  
  3.     required="true" />  
  4.     <script>  
  5.         $(function(){  
  6.             //为“来电号码”绑定离焦事件  
  7.             $("input[name=telephone]").blur(function(){  
  8.                 //发送ajax请求,请求Action,在action中调用代理对象,通过代理对象远程调用crm  
  9.                 var url = "${pageContext.request.contextPath}/noticebillAction_findCustomerByPhone.action";  
  10.                 $.post(url,{"telephone":this.value},function(data){  
  11.                     if(data != null){  
  12.                         //将客户信息回显到相应的输入框中  
  13.                         var id = data.id;  
  14.                         var name = data.name;  
  15.                         var address = data.address;  
  16.                         $("input[name=customerId]").val(id);  
  17.                         $("input[name=customerName]").val(name);  
  18.                         $("input[name=delegater]").val(name);  
  19.                         $("input[name=pickaddress]").val(address);  
  20.                     }else{  
  21.                         $("input[name=customerId]").val("");  
  22.                         $("input[name=customerName]").val("");  
  23.                         $("input[name=delegater]").val("");  
  24.                         $("input[name=pickaddress]").val("");  
  25.                     }  
  26.                 });  
  27.             });  
  28.         });  
  29.     </script>  

    创建一个NoticebillAction,注入Customerservice代理对象,提供方法findCustomerByPhone

[java]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. //注入代理对象,调用crm服务  
  2. @Resource  
  3. private CustomerService customerService;  
  4.   
  5. /** 
  6.  * 根据手机号查询客户信息 
  7.  */  
  8. public String findCustomerByPhone(){  
  9.     //调用crm服务  
  10.     Customer customer = customerService.findCustomerByPhone(model.getTelephone());  
  11.     this.writeObjectBean2Json(customer, new String[]{});  
  12.     return NONE;  
  13. }  

配置struts.xml

    提交表单

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. <script type="text/javascript">  
  2.     $(function(){  
  3.         $("body").css({visibility:"visible"});  
  4.           
  5.         // 对save按钮条件 点击事件  
  6.         $('#save').click(function(){  
  7.             // 对form 进行校验  
  8.             if($('#noticebillForm').form('validate')){  
  9.                 $('#noticebillForm').submit();  
  10.             }  
  11.         });  
  12.     });  
  13. </script>  

    在action中接受参数,保存业务通知单

保存业务通知单:通过判断用户所关联的定区id 来进行自动分单或手动分单

[java]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * 保存业务通知单 
  3.  */  
  4. public String add(){  
  5.     noticebillService.save(model);  
  6.     return "toAddUI";  
  7. }  

Service代码:

[java]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. @Service  
  2. @Transactional  
  3. public class NoticebillServiceImpl implements INoticebillService{  
  4.     @Resource  
  5.     private INoticebillDao noticebillDao;  
  6.     //注入代理对象  
  7.     @Resource  
  8.     private CustomerService customerService;  
  9.     @Resource  
  10.     private IDecidedzoneDao decidedzoneDao;  
  11.     @Resource  
  12.     private IWorkbillDao workbillDao;  
  13.       
  14.     public void save(Noticebill model) {  
  15.         User user = BOSContext.getLoginUser();  
  16.         model.setUser(user);//当前登录用户  
  17.         noticebillDao.save(model);//持久对象  
  18.           
  19.         //自动分单----为当前客户找到一个取派员,取件  
  20.         //取件地址  
  21.         String pickaddress = model.getPickaddress();  
  22.         //根据取件地址获取定区ID  
  23.         String decidedzoneId = customerService.findDecidedzoneidByPickAddress(pickaddress);  
  24.         if(decidedzoneId != null){  
  25.             model.setOrdertype("自动");  
  26.             //匹配成功,可以自动分单  
  27.             Decidedzone decidedzone = decidedzoneDao.findById(decidedzoneId);  
  28.             Staff staff = decidedzone.getStaff();//获得定区的负责人  
  29.               
  30.             model.setStaff(staff);//建立业务通知单和取派员关系  
  31.               
  32.             //为当前匹配到取派员产生一个工单  
  33.             Workbill workbill = new Workbill();  
  34.             workbill.setNoticebill(model);//关联业务通知单  
  35.             workbill.setStaff(staff);//关联取派员  
  36.             workbill.setType("新");//类型  
  37.             workbill.setPickstate("未取件");//取件状态  
  38.             workbill.setBuildtime(new Timestamp(System.currentTimeMillis()));//系统时间  
  39.             workbill.setAttachbilltimes(0);//追单次数  
  40.             workbill.setRemark(model.getRemark());//备注  
  41.             //保存工单  
  42.             workbillDao.save(workbill);  
  43.               
  44.             //调用短信接口向取派员发送短信  
  45.               
  46.         }else{  
  47.             //匹配失败,转入人工分单  
  48.             model.setOrdertype("人工");  
  49.         }  
  50.           
  51.     }  
  52. }  

4.    数据表格编辑功能使用

    使用datagrid的[列属性]开启编辑功能

editor      

属性值类型:string,object      

详情:

指明编辑类型。当字符串指明编辑类型的时候,对象包含2个属性:

type:字符串,该编辑类型可以使用的类型有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。

options:对象,object, 该编辑器属性对应于编辑类型。

    开始编辑和结束编辑[方法]

beginEdit       参数:index     开始编辑行。

endEdit           参数:index     结束编辑行。

    插入一行数据

insertRow       

详情:

插入一个新行,参数包括一下属性:

index:要插入的行索引,如果该索引值未定义,则追加新行。

row:行数据。

    获得行索引

getRowIndex  

参数row

返回指定行的索引号,该行的参数可以是一行记录或一个ID字段值。

 

    删除行

deleteRow      index      删除行。

 

    结束编辑状态时触发的[事件]

onAfterEdit    

参数:rowIndex,rowData, changes  

详情:

在用户完成编辑一行的时候触发,参数包括:

rowIndex:编辑行的索引,索引从0开始。

rowData:对应于完成编辑的行的记录。

changes:更改后的字段(键)/值对。

示例

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. <script type="text/javascript">  
  2.     $(function() {  
  3.         var index = -1;  
  4.         $("#grid").datagrid({  
  5.             columns : [ [ {  
  6.                 field : 'id',  
  7.                 checkbox : true,  
  8.             }, {  
  9.                 field : 'name',  
  10.                 title : '姓名',  
  11.                 width : 120,  
  12.                 align : 'center',  
  13.                 editor : {  
  14.                     type : 'validatebox',  
  15.                     options : {  
  16.                         required : true  
  17.                     }  
  18.                 }  
  19.             }, {  
  20.                 field : 'telephone',  
  21.                 title : '手机号',  
  22.                 width : 120,  
  23.                 align : 'center',  
  24.                 editor : {  
  25.                     type : 'validatebox',  
  26.                     options : {  
  27.                         required : true  
  28.                     }  
  29.                 }  
  30.             } ] ],  
  31.             //事件:结束编辑状态时触发  
  32.             onAfterEdit:function(rowIndex, rowData, changes){  
  33.                 //发送ajax请求,将数据提交到服务端修改数据库  
  34.             },  
  35.             url : '${pageContext.request.contextPath}/json/staff.json',  
  36.                 toolbar : [ {  
  37.                                 id : 'button-add',  
  38.                                 text : '增加一行',  
  39.                                 iconCls : 'icon-add',  
  40.                                 handler : function(){  
  41.                                     $("#grid").datagrid("insertRow",{//插入一行  
  42.                                         index:0,//在第一行插入  
  43.                                         row:{}//空行  
  44.                                     });  
  45.                                     index = 0;  
  46.                                     //开启第一行的编辑状态  
  47.                                     $("#grid").datagrid("beginEdit",index);//开启第一行编辑状态  
  48.                                 }  
  49.                             }, //按钮  
  50.                             {  
  51.                                 id : 'button-save',  
  52.                                 text : '保存',  
  53.                                 iconCls : 'icon-save',  
  54.                                 handler : function(){  
  55.                                     //结束编辑状态  
  56.                                     $("#grid").datagrid("endEdit",index);//开启第一行编辑状态  
  57.                                 }  
  58.                             },  
  59.                             {  
  60.                                 id : 'button-eidt',  
  61.                                 text : '编辑',  
  62.                                 iconCls : 'icon-save',  
  63.                                 handler : function(){  
  64.                                     var rows = $("#grid").datagrid("getSelections");  
  65.                                     if(rows.length == 1){  
  66.                                         //获得当前选中行的索引  
  67.                                         index = $("#grid").datagrid("getRowIndex",rows[0]);  
  68.                                         $("#grid").datagrid("beginEdit",index);  
  69.                                     }  
  70.                                 }  
  71.                             }  
  72.                         ]  
  73.         });  
  74.     });  
  75. </script>  
  76. </head>  
  77. <body>  
  78.     <table id="grid"></table>  
  79. </body>  

5.    实现工作单快速录入功能(基于datagrid编辑)

页面:


按钮

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. //行数全局变量  
  2. var editIndex ;  
  3. //添加按钮  
  4. function doAdd(){  
  5.     //当填完一行数据(一个工作单)后不点保存直接点击下增加一行  
  6.     if(editIndex != undefined){  
  7.         //根据全局变量完成上次的编辑  
  8.         $("#grid").datagrid('endEdit',editIndex);  
  9.     }  
  10.     //新增一行  
  11.     if(editIndex==undefined){  
  12.         //alert("快速添加电子单...");  
  13.         $("#grid").datagrid('insertRow',{  
  14.             index : 0,//第一行  
  15.             row : {}//添加一排空行  
  16.         });  
  17.         //开启新增行的编辑  
  18.         $("#grid").datagrid('beginEdit',0);  
  19.         editIndex = 0;  
  20.     }  
  21. }  
  22. //保存按钮  
  23. function doSave(){  
  24.     //结束编辑  
  25.     $("#grid").datagrid('endEdit',editIndex );  
  26. }  
  27.   
  28. function doCancel(){  
  29.     if(editIndex!=undefined){  
  30.         $("#grid").datagrid('cancelEdit',editIndex);  
  31.         if($('#grid').datagrid('getRows')[editIndex].id == undefined){  
  32.             $("#grid").datagrid('deleteRow',editIndex);  
  33.         }  
  34.         editIndex = undefined;  
  35.     }  
  36. }  

    修改datagrid的事件onAfterEdit

[javascript]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. // 收派标准数据表格  
  2. $('#grid').datagrid( {  
  3.     iconCls : 'icon-forward',  
  4.     fit : true,  
  5.     border : true,  
  6.     rownumbers : true,  
  7.     striped : true,  
  8.     pageList: [30,50,100],  
  9.     pagination : true,  
  10.     toolbar : toolbar,  
  11.     url :  "",  
  12.     idField : 'id',  
  13.     columns : columns,  
  14.     onDblClickRow : doDblClickRow,  
  15.     onAfterEdit : function(rowIndex, rowData, changes){  
  16.         console.info(rowData);  
  17.         editIndex = undefined;  
  18.         //发送ajax请求保存工作单  
  19.         var url="${pageContext.request.contextPath}/workordermanageAction_quickAdd";  
  20.         $.post(url,rowData,function(data){  
  21.             //alert(data);  
  22.             if(data=='1'){  
  23.                 $.messager.alert("提示","添加成功","info");  
  24.             }else{  
  25.                 $.messager.alert("错误提示","添加失败","warning");  
  26.             }  
  27.         });  
  28.     }  
  29. });  

    创建WorkordermanageAction

[java]  view plain  copy
 
  在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * ajax 工作单快速添加 
  3.  * @return 
  4.  * @throws IOException  
  5.  */  
  6. public String quickAdd() throws IOException{  
  7.     // 添加更新时间  
  8.     this.getModel().setUpdatetime(new Date());  
  9.     String flag="0";  
  10.     try {  
  11.         workordermanageService.quickAdd(this.getModel());  
  12.     } catch (Exception e) {  
  13.         flag= "1";  
  14.         e.printStackTrace();  
  15.     }  
  16.     //相应通知  
  17.     ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");  
  18.     ServletActionContext.getResponse().getWriter().print(flag);  
  19.     return NONE;  
  20. }  

    配置struts.xml

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值