jqgrid 实现增加，删除，修改的功能

  这次项目里，我们遇到一种需求，是类似于主表与明细表格式的界面应用。

  在明细表里需要对明细的数据进行增加，修改的操作支持，但有几点 我们需要处理

  1。当主表没有信息保存时，是不能保存明细数据的，这里需要提示信息在弹出窗口。

  2.   当主表有数据里，我们需要附带一些主表的数据一并提交到服务器上。

  3.   当主表显示数据时，也要一并显示与主表相关的数据。

 

  实现的关键点说明 ：

   在初始化jqgrid时，

        beforeRequest:function(){
          //请求前设置额外的提交数据
          var customerNo = $("#customerno").val();        
          jQuery("#gridTable").jqGrid('setGridParam',{ postData:{customerno:customerNo}});
          }

    在定义pager时，我们要定义新增，修改和删除的处理方法：

   jQuery("#gridTable").jqGrid('navGrid','#gridPager',
{del:true,add:true,edit:true,search:false}, //options
{reloadAfterSubmit:false,
url:"<s:url  action='CustomerContactInfoAction!editCustomerContactInfo' namespace='/ajax'/>",
beforeSubmit:function(postdata, formid) {
if($("#customerno").val() == ""){
//$.tms.showDlg("请先保存企业客户主信息,再增加联系人!");
return [false,'请先保存企业客户主信息,再增加联系人!'];
}
return [true,''];
},
afterSubmit:function(response, postdata){
//console.log(response);
var e = $.parseJSON(response.responseText);
  if(e.errors) {
  $.tms.showDlg("修改失败!");
  return [false,"修改失败",0];
  }else{
  return [true,"",e.id]
  }
},
onclickSubmit: function(params, postdata) { 
  //console.log(postdata);
  var gr = jQuery("#gridTable").jqGrid('getGridParam', 'selrow');
  var rowdata = jQuery("#gridTable").jqGrid('getRowData', gr);
  //console.log(rowdata.id);  
  return {'id':rowdata.id,'customerno':$("#customerno").val()}
  }
}, // edit options
{reloadAfterSubmit:false,
addedrow:'last',
url:"<s:url  action='CustomerContactInfoAction!newCustomerContactInfo' namespace='/ajax'/>",
beforeSubmit:function(postdata, formid) {
//新增form里，当点击提交按钮时，会处理这个函数，如果检测要求通过，返回[true,'']
if($("#customerno").val() == ""){
//$.tms.showDlg("请先保存企业客户主信息,再增加联系人!");
return [false,'请先保存企业客户主信息,再增加联系人!'];
}
return [true,'']
},
afterSubmit:function(response, postdata){
  //console.log(response);
  var e = $.parseJSON(response.responseText);
  if(e.errors) {
  $.tms.showDlg("保存失败!");
  return [false,"保存失败",e.id];
  }else{
  return [true,"",e.id]
  }
   
  },
  onclickSubmit: function(params, postdata) {
  //当点击提交按钮后，可以在这里附加一些额外的提交数据
  //console.debug(postdata);    
  return {id:0,'customerno':$("#customerno").val()}
  }
}, // add options
{reloadAfterSubmit:false,
url:"<s:url  action='CustomerContactInfoAction!delCustomerContactInfo' namespace='/ajax'/>" ,
afterSubmit:function(response, postdata){
var e = $.parseJSON(response.responseText);
if(e.errors) {
  $.tms.showDlg("删除失败!");
  return [false,"删除失败",e.id];
  }else{
  return [true,"",e.id]
  }
}

}, // del options
{} // search options
);  

         Action的代码跟一般的处理是相同的。在这里就不放上 了

         见截图

             

  

  华恩教育 -鲁老师