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

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 中文文档（完整）目录----
 作者：easyui.css

    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. }

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. if(count == '' && count.length<1){
6. OZ.Msg.info("出库数量不能为空");
7. return false;
8. }
9. if(parseInt(count) > parseInt(suppliesCount)){
10. OZ.Msg.info("出库数量不能大于实际库存数量");
11. return false;
12. }
13. var strUrl = contextPath+'/oa/issueNoteDetailAction.do?action=saveByAjax&timeStamp=' + (new Date().getTime());
14. $.ajax({
15. type: "POST",
16. dataType: "json",
17. url:strUrl ,
18. data: $('#ozForm').serialize(),
19. success: function(json, _status){
20. $('#listDetail').datagrid('collapseRow',index);
21. $('#listDetail').datagrid('reload');
22. parent.refresh();//刷新上级页面
23. },
24. error: function(xhr, errorMsg, errorThrown){
25. OZ.Msg.error("保存操作出现未处理异常！");
26. }
27. });
28. }

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. $(function(){
5. $('#detailForm-'+_index).find('#issueNoteId').val(_ckdId);
6. loadomain();
7. validate();
8. });
9. function loadomain(){
10. if(typeof id == "undefined")
11. id=-1;
12. $.getJSON(
13. contextPath + '/oa/issueNoteDetailAction.do?action=getIssueNoteDetail&id=' + id + '&timeStamp=' + new Date().getTime(),
14. function(json){
15. if(!json.isNew){
16. $('#detailForm-'+_index).find('#id').val(json.id);
17. $('#detailForm-'+_index).find('#beizhu').val(json.beizhu);
18. $('#detailForm-'+_index).find('#count').val(json.count);
19. $('#detailForm-'+_index).find('#suppliesId').val(json.suppliesId);
20. $('#detailForm-'+_index).find('#suppliesPrickle').val(json.suppilesPrickle);
21. $('#detailForm-'+_index).find('#suppliesProductType').val(json.suppliesProductType);
22. $('#detailForm-'+_index).find('#suppliesPrice').val(json.suppliesPrice);
23. $('#detailForm-'+_index).find('#suppliesName').val(json.suppliesName);
24. $('#detailForm-'+_index).find('#suppliesRealCount').val(json.suppliesRealCount);
25. }else{
26. $('#detailForm-'+_index).find('#id').val(id);
27. }
28. })
29. }

同时，重新加载数据时候注意按照不同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. json.put("id",id);
15. json.put("beizhu",detail.getBeizhu());
16. json.put("count",detail.getCount());
17. }else{
18. json.put("isNew",Boolean.valueOf(true));
19. }
20. return renderJson(response, json.toString());
21. }