码迷，mamicode.com
首页 > 其他好文 > 详细

EasyUI----DataGrid行明细增删改操作

时间：2015-11-23 18:49:20      阅读：381      评论：0      收藏：0      [点我收藏+]

标签：

http://blog.csdn.net/huchiwei/article/details/7787947
 
本文实现的是EasyUI-DataGrid行明细的增删改操作。具体参考来自以下文章：

官方DEMO---- DataGrid ---- Master Detail



    icon.css
    jquery.easyui.min.js
    datagrid-detailview.js
   jquery.js
注意以上文件版本，最好使用最新版。

2、JSP页面
页面中只需定义如下table即可：
<table id="listDetail"></table>

3、JS代码

初始化DataGrid,其中没特殊说明参数请参考上面提供的API。
  1. $(function(){  
  2.     $("#listDetail").datagrid({  
  3.         heigth:700,     
  4.         idField:‘id‘,  
  5.         url:‘<oz:contextPath/>/oa/receiptNoteDetailAction.do?action=page‘,  
  6.         queryParams:{‘viewType‘:‘RK‘,‘RKD_ID‘:_rkdId},  
  7.         singleSelect:false,  
  8.         fitColumns:true,  
  9.         nowrap:true,  
  10.         columns:[[  
  11.             {field:‘id‘,checkbox:true},  
  12.             {field:‘name‘,title:‘用品名称‘,width:100,editor:‘text‘,sortable:true},  
  13.             {field:‘produceType‘,title:‘用品型号‘,width:100,editor:‘text‘,sortable:true},  
  14.             {field:‘prickle‘,title:‘计量单位‘,width:100,editor:‘text‘,sortable:true},  
  15.             {field:‘count‘,title:‘入库数量‘,width:100,editor:‘text‘,sortable:true},  
  16.             {field:‘price‘,title:‘参考单价‘,width:100,editor:‘text‘,sortable:true},  
  17.             {field:‘subtotal‘,title:‘入库金额‘,width:100,editor:‘text‘,sortable:true}  
  18.         ]],   
  19.         toolbar:[{  
  20.             text:‘添加‘,  
  21.             <span style="white-space:pre">  <span style="white-space:pre">  </span></span>iconCls:‘icon-add‘,  
  22.            <span style="white-space:pre">   <span style="white-space:pre">  </span></span>handler:addItem  
  23.         },{  
  24.             text:‘删除‘,  
  25.             <span style="white-space:pre">      </span>iconCls:‘icon-remove‘,  
  26.             <span style="white-space:pre">      </span>handler:deleteItem  
  27.         },{  
  28.             text:‘刷新‘,  
  29.            <span style="white-space:pre">       </span>iconCls:‘icon-reload‘,  
  30.             <span style="white-space:pre">      </span>handler:refresh  
  31.         }],  
  32.         view: detailview,  
  33.         detailFormatter:function(index,row){  
  34.             return ‘<div id="detailForm-‘+index+‘" style="line-height:500px;"></div>‘;  
  35.         },  
  36.         onExpandRow: function(index,row){  
  37.             var id= $(this).datagrid(‘getRows‘)[index].id;  
  38.             $(‘#detailForm-‘+index).panel({  
  39.                 doSize:true,  
  40.                 border:false,  
  41.                 cache:false,  
  42.                 href:‘<oz:contextPath/>/oa/suppliesmgm/DE_ReceiptNoteDetail.jsp?rkdId=‘+_rkdId+‘&id=‘+id+‘&index=‘+index,  
  43.                 onLoad:function(){  
  44.                     $(‘#listDetail‘).datagrid(‘fixDetailRowHeight‘,index);  
  45.                     $(‘#listDetail‘).datagrid(‘selectRow‘,index);  
  46.                 }  
  47.             });  
  48.             $(‘#listDetail‘).datagrid(‘fixDetailRowHeight‘,index);  
  49.         },  
  50.         onDblClickRow:function(index,row){  
  51.             $(‘#listDetail‘).datagrid(‘expandRow‘, index);  
  52.             $(‘#listDetail‘).datagrid(‘fitColumns‘,index);  
  53.             $(‘#listDetail‘).datagrid(‘selectRow‘, index);  
  54.         }  
  55.     });  
  56. });  
特殊参数说明：
1、view： 定义DataGrid的view为detailview,需要引入datagrid-detailview.js
2、detailFormatter ：定义了detailview的话，必须定义detailFormatter属性，用以初始化并返回一个DIV容器。
3、onExpandRow：展开后行触发事件，动态把Form放进DIV中。因为是动态加载Form,所以必须把DIV定义不同ID以识别不同的Form,如上面返回的DIV中
【 id="detailForm-‘+index+‘"】，否则在此例子中展开加载明细时会出现数据错位，注：是此例子。

增、删、改方法：（以下方法因为跟公司平台有关，所以仅供参考。另，这些方法都是写在初始化DataGrid页面而不是写在Form页面。）
  1. //添加  
  2. function addItem(){  
  3.     $(‘#listDetail‘).datagrid(‘appendRow‘,{isNewRecord:true});  
  4.     var index = $(‘#listDetail‘).datagrid(‘getRows‘).length - 1;  
  5.     $(‘#listDetail‘).datagrid(‘expandRow‘, index);  
  6.     $(‘#listDetail‘).datagrid(‘fitColumns‘,index);  
  7.     $(‘#listDetail‘).datagrid(‘selectRow‘, index);  
  8.       
  9. }  
  1. //删除  
  2. function deleteItem(){  
  3.      var rows = $(‘#listDetail‘).datagrid(‘getSelections‘);  
  4.      if (null == rows || rows.length == 0) {  
  5.         OZ.Msg.info(‘请选择用品‘);  
  6.         return;  
  7.      }  
  8.     var ids=[];  
  9.     for(var i=0;i<rows.length;i++){  
  10.         ids.push(rows[i].id);  
  11.     }  
  12.     OZ.Msg.confirm(  
  13.         ‘删除入库用品明细将直接影响库存信息，确定删除吗？‘,  
  14.         function(){  
  15.             $.getJSON(  
  16.                 contextPath + "/oa/receiptNoteDetailAction.do?action=deleteDetail&timeStamp=" + new Date().getTime(),  
  17.                 {ids:ids.join(";")},  
  18.                 function(json){  
  19.                     if(json.result == true){  
  20.                         OZ.Msg.info(‘删除成功‘);  
  21.                         $(‘#listDetail‘).datagrid(‘reload‘);  
  22.                         parent.refresh();//刷新上级页面  
  23.                     }else{  
  24.                         OZ.Msg.info(‘抱歉，删除失败‘);  
  25.                     }  
  26.                 }  
  27.             );  
  28.         }  
  29.     );   
  30. }  
  1. //保存  
  2. function saveItem(index){  
  3.     var suppliesCount=$(‘#detailForm-‘+index).find("#suppliesCount").val(),  
  4.          count=$(‘#detailForm-‘+index).find("#count").val();  
  5.       
  6.     if(count == ‘‘ && count.length<1){  
  7.         OZ.Msg.info("出库数量不能为空");  
  8.         return false;  
  9.     }  
  10.           
  11.     if(parseInt(count) > parseInt(suppliesCount)){  
  12.         OZ.Msg.info("出库数量不能大于实际库存数量");  
  13.         return false;  
  14.     }  
  15.       
  16.     var strUrl = contextPath+‘/oa/issueNoteDetailAction.do?action=saveByAjax&timeStamp=‘ + (new Date().getTime());  
  17.     $.ajax({  
  18.         type: "POST",  
  19.         dataType: "json",  
  20.         url:strUrl ,  
  21.         data: $(‘#ozForm‘).serialize(),  
  22.         success: function(json, _status){  
  23.             $(‘#listDetail‘).datagrid(‘collapseRow‘,index);  
  24.             $(‘#listDetail‘).datagrid(‘reload‘);  
  25.             parent.refresh();//刷新上级页面  
  26.         },  
  27.         error: function(xhr, errorMsg, errorThrown){  
  28.             OZ.Msg.error("保存操作出现未处理异常！");  
  29.         }  
  30.     });   
  31. }  
  1. //取消  
  2. function cancelItem(index){  
  3.     var row = $(‘#listDetail‘).datagrid(‘getRows‘)[index];  
  4.     if (row.isNewRecord){  
  5.         $(‘#listDetail‘).datagrid(‘deleteRow‘,index);  
  6.     } else {  
  7.         $(‘#listDetail‘).datagrid(‘collapseRow‘,index);  
  8.     }  
  9. }  

4、Form表单（同样仅供参考，样式是公司平台的。官方例子的Form页面很简单，可参考它。）
  1. <html:form action="oa/issueNoteDetailAction.do" styleId="ozForm" styleClass="oz-form">  
  2.     <div class="oz-form-fields">  
  3.         <table cellpadding="0" cellspacing="0" class="dv-table" style="width:600px;background:#fafafa;padding:5px;margin-top:5px;">  
  4.             <tr>  
  5.                 <td colspan="4">  
  6.                     <div>  
  7.                         <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem(<%= request.getParameter("index") %>)" id="btnSave">保存</a>  
  8.                         <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(<%= request.getParameter("index") %>)">取消</a>  
  9.                     </div>  
  10.                     <hr/>  
  11.                 </td>  
  12.             </tr>  
  13.             <tr>   
  14.                 <td class="oz-form-label" style="width:80px">库存用品：</td>  
  15.                 <td class="oz-property" colspan="3">  
  16.                     <html:text property="supplies.name" styleId="suppliesName" styleClass="oz-form-zdField" readonly="true" style="width:150px"/>  
  17.                     <button type="button" class="oz-form-button" onClick="onBtnSelectSupplies_Clicked(<%= request.getParameter("index") %>);">选择..</button>  
  18.                 </td>               
  19.             </tr>  
  20.             <tr>   
  21.                 <td class="oz-form-label" style="width:80px">用品型号：</td>  
  22.                 <td class="oz-property">  
  23.                     <html:text property="supplies.productType" styleId="suppliesProductType" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>  
  24.                 </td>  
  25.                 <td class="oz-form-label" style="width:80px">参考单价：</td>  
  26.                 <td class="oz-property">  
  27.                     <html:text property="supplies.price" styleId="suppliesPrice" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>  
  28.                 </td>  
  29.             </tr>  
  30.             <tr>   
  31.                 <td class="oz-form-label" style="width:80px">计量单位：</td>  
  32.                 <td class="oz-property">  
  33.                     <html:text property="supplies.prickle" styleId="suppliesPrickle" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>  
  34.                 </td>  
  35.                 <td class="oz-form-label" style="width:100px">实际库存数量：</td>  
  36.                 <td class="oz-property">  
  37.                     <html:text property="supplies.realCount" styleId="suppliesRealCount" styleClass="oz-form-zdField"  readonly="true" style="width:150px"/>  
  38.                 </td>  
  39.             </tr>  
  40.             <tr>                        
  41.                 <td class="oz-form-label" style="width:80px">出库数量：</td>  
  42.                 <td class="oz-property" colspan="3">  
  43.                     <html:text property="count" styleId="count" styleClass="oz-form-btField" style="width:150px"/>  
  44.                 </td>  
  45.             </tr>  
  46.             <tr>   
  47.                 <td class="oz-form-label" style="width:80px">备注：</td>  
  48.                 <td class="oz-property" colspan="3">  
  49.                     <html:textarea property="beizhu" styleId="beizhu" styleClass="oz-form-field" style="width:500px" cols="15"/>  
  50.                 </td>  
  51.             </tr>  
  52.         </table>  
  53.     </div>  
  54.             <html:hidden property="id" styleId="id"/>  
  55.             <html:hidden property="supplies.id" styleId="suppliesId"/>  
  56.             <html:hidden property="issueNote.id" styleId="issueNoteId"/>  
  57. </html:form>  

因为在初始化的时候有传id,rkdid，index参数过来，意义在于加载此Form的时候，可以利用Json根据id重新加载数据，这样可以避免保存外键时候出错。
  1. var id=<%= request.getParameter("id") %>;  
  2. var _ckdId=<%= request.getParameter("ckdId") %>;  
  3. var _index = <%= request.getParameter("index") %>;  
  4.   
  5. $(function(){  
  6.     $(‘#detailForm-‘+_index).find(‘#issueNoteId‘).val(_ckdId);  
  7.     loadomain();  
  8.     validate();  
  9. });  
  10.   
  11. function loadomain(){  
  12.     if(typeof id == "undefined")  
  13.         id=-1;  
  14.     $.getJSON(  
  15.             contextPath + ‘/oa/issueNoteDetailAction.do?action=getIssueNoteDetail&id=‘ + id + ‘&timeStamp=‘ + new Date().getTime(),  
  16.             function(json){  
  17.                 if(!json.isNew){  
  18.                     $(‘#detailForm-‘+_index).find(‘#id‘).val(json.id);  
  19.                     $(‘#detailForm-‘+_index).find(‘#beizhu‘).val(json.beizhu);  
  20.                     $(‘#detailForm-‘+_index).find(‘#count‘).val(json.count);  
  21.                       
  22.                     $(‘#detailForm-‘+_index).find(‘#suppliesId‘).val(json.suppliesId);                    
  23.                     $(‘#detailForm-‘+_index).find(‘#suppliesPrickle‘).val(json.suppilesPrickle);  
  24.                     $(‘#detailForm-‘+_index).find(‘#suppliesProductType‘).val(json.suppliesProductType);  
  25.                     $(‘#detailForm-‘+_index).find(‘#suppliesPrice‘).val(json.suppliesPrice);  
  26.                     $(‘#detailForm-‘+_index).find(‘#suppliesName‘).val(json.suppliesName);  
  27.                     $(‘#detailForm-‘+_index).find(‘#suppliesRealCount‘).val(json.suppliesRealCount);  
  28.                       
  29.                 }else{  
  30.                     $(‘#detailForm-‘+_index).find(‘#id‘).val(id);  
  31.                 }  
  32.         })  
  33. }  

同时，重新加载数据时候注意按照不同DIV找到不同Form的各个字段，否则会加载数据错位。
$(‘#detailForm-‘+_index).find(‘#suppliesRealCount‘).val(json.suppliesRealCount);


4、后台代码就贴一段重新加载数据的方法出来，可参考参考：
  1. public ActionForward getIssueNoteDetail(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) throws Exception{  
  2.         Long id=RequestUtils.getLongParameter(request, "id", -1);  
  3.         JSONObject json=new JSONObject();  
  4.         json.put("isNew",Boolean.valueOf(false));  
  5.         if(id != -1){  
  6.             IssueNoteDetail detail=this.getService().load(id);  
  7.             json.put("suppliesId",detail.getSupplies().getId());  
  8.             json.put("suppliesName",detail.getSupplies().getName());  
  9.             json.put("suppliesPrice",detail.getSupplies().getPrice());  
  10.             json.put("suppliesProductType",detail.getSupplies().getProductType());  
  11.             json.put("suppilesPrickle",detail.getSupplies().getPrickle());  
  12.             json.put("suppliesCount",detail.getSupplies().getCount());  
  13.             json.put("suppliesRealCount",detail.getSupplies().getRealCount());  
  14.               
  15.             json.put("id",id);  
  16.             json.put("beizhu",detail.getBeizhu());            
  17.             json.put("count",detail.getCount());  
  18.         }else{  
  19.             json.put("isNew",Boolean.valueOf(true));  
  20.         }  
  21.         return renderJson(response, json.toString());  
  22.     }  



EasyUI----DataGrid行明细增删改操作

标签：

原文地址：http://www.cnblogs.com/wdcwy/p/4989049.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！