Coin163

首页 > EasyUI----DataGrid行明细增删改操作

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

相关标签: easyui 主从 datagrid

2020腾讯云双十一活动,全年最低!!!(领取3500元代金券),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1074

【阿里云】双十一活动,全年抄底价,限时3天!(老用户也有),
入口地址https://www.aliyun.com/1111/home


http://blog.csdn.net/huchiwei/article/details/7787947


本文实现的是EasyUI-DataGrid行明细的增删改操作。具体参考来自以下文章:
官方DEMO---- DataGrid ---- Master Detail
在easyui中利用DataGrid的行明细区域实现CRUD操作---- 作者: stworthy
BuildCRUD Application with edit form in expanded row details
jQuery-EasyUI 1.2.4 API 中文文档(完整)目录 ----  作者: 风流涕淌
先上两张效果图:
未展开:
展开行明细:

由于个人知识浅薄,经验不足,所以很多的JS、Java代码写得都不是很合理,如果有什么问题,欢迎指点。谢谢。
-----------------------------------------------------------------------分割线-----------------------------------------------------------------------------------
1、必须引入下面文件:            easyui.css     icon.css     jquery.easyui.min.js     datagrid-detailview.js    jquery.js 注意以上文件版本,最好使用最新版。
2、JSP页面 页面中只需定义如下table即可: <table id="listDetail"></table>
3、JS代码
初始化DataGrid,其中没特殊说明参数请参考上面提供的API。
[javascript] view plain copy print ?
  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页面。[javascript] view plain copy print ?
  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. }  
[javascript] view plain copy print ?
  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. }  
[javascript] view plain copy print ?
  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. }  
[javascript] view plain copy print ?
  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页面很简单,可参考它。) [html] view plain copy print ?
  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重新加载数据,这样可以避免保存外键时候出错。 [javascript] view plain copy print ?
  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、后台代码就贴一段重新加载数据的方法出来,可参考参考: [java] view plain copy print ?
  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.     }  





原文

http://blog.csdn.net/huchiwei/article/details/7787947 本文实现的是EasyUI-DataGrid行明细的增删改操作。具体参考来自以下文章: 官方DEMO---- DataGrid ---- Master Detail 在easyui中利用D

------分隔线----------------------------
相关推荐