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

    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:'用品名称',100,editor:'text',sortable:true},  
    13.             {field:'produceType',title:'用品型号',100,editor:'text',sortable:true},  
    14.             {field:'prickle',title:'计量单位',100,editor:'text',sortable:true},  
    15.             {field:'count',title:'入库数量',100,editor:'text',sortable:true},  
    16.             {field:'price',title:'参考单价',100,editor:'text',sortable:true},  
    17.             {field:'subtotal',title:'入库金额',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="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="80px">库存用品：</td>  
    15.                 <td class="oz-property" colspan="3">  
    16.                     <html:text property="supplies.name" styleId="suppliesName" styleClass="oz-form-zdField" readonly="true" style="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="80px">用品型号：</td>  
    22.                 <td class="oz-property">  
    23.                     <html:text property="supplies.productType" styleId="suppliesProductType" styleClass="oz-form-zdField"  readonly="true" style="150px"/>  
    24.                 </td>  
    25.                 <td class="oz-form-label" style="80px">参考单价：</td>  
    26.                 <td class="oz-property">  
    27.                     <html:text property="supplies.price" styleId="suppliesPrice" styleClass="oz-form-zdField"  readonly="true" style="150px"/>  
    28.                 </td>  
    29.             </tr>  
    30.             <tr>   
    31.                 <td class="oz-form-label" style="80px">计量单位：</td>  
    32.                 <td class="oz-property">  
    33.                     <html:text property="supplies.prickle" styleId="suppliesPrickle" styleClass="oz-form-zdField"  readonly="true" style="150px"/>  
    34.                 </td>  
    35.                 <td class="oz-form-label" style="100px">实际库存数量：</td>  
    36.                 <td class="oz-property">  
    37.                     <html:text property="supplies.realCount" styleId="suppliesRealCount" styleClass="oz-form-zdField"  readonly="true" style="150px"/>  
    38.                 </td>  
    39.             </tr>  
    40.             <tr>                        
    41.                 <td class="oz-form-label" style="80px">出库数量：</td>  
    42.                 <td class="oz-property" colspan="3">  
    43.                     <html:text property="count" styleId="count" styleClass="oz-form-btField" style="150px"/>  
    44.                 </td>  
    45.             </tr>  
    46.             <tr>   
    47.                 <td class="oz-form-label" style="80px">备注：</td>  
    48.                 <td class="oz-property" colspan="3">  
    49.                     <html:textarea property="beizhu" styleId="beizhu" styleClass="oz-form-field" style="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.     }  
  • 相关阅读:
    linux2.6.24.3下移植SD/MMC到S3C2440上的全历程
    设置装备布置了下双表示器
    Virtual Box 1.5.0 － 实用的“无缝窗口”
    oracle DB LINK 运用
    Linux下的tidy安置
    Linux效劳器装机安全疾速进阶指南(2)
    Linux下历程间通信
    Firefox 3 CSS Hack
    Linux下的搜刮东西find根基用法
    Linux效能器装机平安快速进阶指南(3)
  • 原文地址：https://www.cnblogs.com/wdcwy/p/4989049.html
Copyright © 2020-2023  润新知