记录关于jqGrid在同一个jsp中实现查询记录显示及新增和修改操作

<script type="text/javascript">
   $(function(){
  $("#confirm").click(function(){
$("#fsbProvisionsAcctInfoCter").empty(); 
$("<table id='fsbProvisionsAcctInfo'></table><div id='fsbProvisionsAcctInfoPager'></div>").appendTo($("#fsbProvisionsAcctInfoCter"));
var queryArray = $('#searchForm').serializeArray();
var postData=parsePostData(queryArray);
 
    $("#fsbProvisionsAcctInfo").jqGrid({
       url:'getFsbProvsionAcctInfoList?fid=2868&records=20',
       datatype: 'json',
       mtype: 'post',
   forceFit:true,
   width:$(window).width() - 15,
   height:$(window).height() - 163,
   postData:postData,      
       colModel :[ 
           {name:'proAcctNo',label:'备付金账号', index:'proAcctNo',align:'center',editable:false,width:120},
           {name:'proAcctName',label:'备付金账户名称', index:'proAcctName',align:'center',editable:false,width:120},
           {name:'proAcctShortName',label:'备付金账户简称', index:'proAcctShortName',align:'center',editable:false,width:120},
           {name:'bankCode',label:'所属金融机构编号', index:'bankCode',align:'center',editable:false,width:120},
           {name:'bankName',label:'所属金融机构名称', index:'bankName',align:'center',editable:false,width:120},
           {name:'linkBankNum',label:'联行号', index:'linkBankNum',align:'center',editable:false,width:120},
           {name:'chnCode',label:'出金渠道', index:'chnCode',align:'center',editable:false,width:120},
           {name:'acctId',label:'出金渠道账户Id', index:'acctId',align:'center',editable:false,width:120},
           {name:'proBalance',label:'备付金余额', index:'proBalance',align:'center',editable:false,width:120},
           {name:'balUpdateTime',label:'备付金余额最后更新时间', index:'balUpdateTime',align:'center',editable:false,width:120},
           {name:'createdTime',label:'创建时间', index:'createdTime',align:'center',editable:false,width:120},
           {name:'createUser',label:'创建用户', index:'createUser',align:'center',editable:false,width:120}
  ],
       jsonReader : {
           root:"rows",
           page: "page",
           total: "total",
           records: "records",
           repeatitems: false,
           id: "proAcctNo"
        }, 
           multiselect: true,  
           viewrecords:true,
           gridComplete:function(){               
           }, 
       pager: '#fsbProvisionsAcctInfoPager',
   rowNum:20,
   rowList:[10,20,50,100,150],
       editurl:'basicOperate',
       caption: "权限列表",
       toolbar: [true,"top"],
       loadError:function(xhr,status,error){
       msgShow("系统提示",error.replace('Invalid JSON:',''),'error');
       }  
        
    });
    jQuery("#fsbProvisionsAcctInfo").jqGrid('navGrid','#fsbProvisionsAcctInfoPager',{del:false,add:false,edit:false,search:false},{},{},{});
    $("#t_fsbProvisionsAcctInfo").append("<a id='add' href='javascript:void(0)' class='easyui-linkbutton' iconCls='icon-add'>添加</a>"); 
    $('#add').linkbutton();
    $("#add").click(function(){ 
    $('#addWin').window('open');
    $('#addForm :input').val('');
    fn.findFinaChan('#addWin #chnCode','#addWin #acctId','');
    fn.findFsbFinaOrg('#addWin #bankCode','','');//#addWin 调用  findFsbFinaOrg，通过传入的不同的属性，确定来自于哪个窗口的调用
    $('#addBtnEp').unbind('click').bind('click',fn.saveProvisionAcctInfo);
    $('#addBtnCancel').unbind('click').bind('click',function(){fn.close('addWin')});
    }); 
    $("#t_fsbProvisionsAcctInfo").append("<a id='edit'  href='javascript:void(0)' class='easyui-linkbutton' iconCls='icon-edit'>修改</a>");
    $('#edit').linkbutton();
    $("#edit").click(function(){ 
    var selecs=$("#fsbProvisionsAcctInfo").jqGrid('getGridParam','selarrrow');
    if(selecs.length==0){
    msgShow('系统提示', '请选择要修改的记录！', 'warning');
    return
    }
    if(selecs.length>1){
    msgShow('系统提示', '一次只能修改一条记录！', 'warning');
    return
    }    
    var rowid = $("#fsbProvisionsAcctInfo").getGridParam("selrow");
           var rowData = $("#fsbProvisionsAcctInfo").getRowData(rowid);  //获取选中行的数据 
           var code = rowData.chnCode;//得到选中数据的某个属性
           var acctId = rowData.acctId;
           var bankCode = rowData.bankCode;
           
    $('#modifyWin :input').val('');
    var rowData = $('#fsbProvisionsAcctInfo').jqGrid('getRowData',$('#fsbProvisionsAcctInfo').jqGrid('getGridParam','selrow'));
    $('#modifyWin').window('open').data('proAcctNo',rowData.proAcctNo).data('proAcctName',rowData.proAcctName);
    for(var p in rowData){//通过gqGrid在在弹出框中显示选中行的待修改信息，无需去数据库查询改记录的详细信息
    $('#modifyWin #'+p).val(rowData[p]);
    }
    fn.findFinaChan('#modifyWin #chnCode','#modifyWin #acctId',code,acctId);
    fn.findFsbFinaOrg('#modifyWin #bankCode','',bankCode);//#modifyWin 调用  findFsbFinaOrg,通过传入的不同的属性，确定来自于哪个窗口的调用
    $('#modifyBtnEp').unbind('click').bind('click',fn.modifyProvisionAcctInfo);
    $('#modifyBtnCancel').unbind('click').bind('click',function(){fn.close('modifyWin')});
   
    }); 
   
    $("#t_fsbProvisionsAcctInfo").append("<a id='getBalance'  href='javascript:void(0)' class='easyui-linkbutton' iconCls='icon-search'>余额查询</a>");
    $('#getBalance').linkbutton();
    $("#getBalance").click(function(){ 
    var selecs=$("#fsbProvisionsAcctInfo").jqGrid('getGridParam','selarrrow');
    if(selecs.length==0){
    msgShow('系统提示', '请选择要查询的记录！', 'warning');
    return
    }
    if(selecs.length>1){
    msgShow('系统提示', '一次只能查询一条记录！', 'warning');
    return
    }    
    var rowid = $("#fsbProvisionsAcctInfo").getGridParam("selrow");
           var rowData = $("#fsbProvisionsAcctInfo").getRowData(rowid);  //获取选中行的数据 
           var code = rowData.chnCode;
           var acctId = rowData.acctId;
           var proAcctNo = rowData.proAcctNo;
           $.ajax({
              type:"post", 
              url:"getFsbProvsioFundBalance", 
              data:{outChnCode:code,outChnAcctId:acctId,proAcctNo:proAcctNo},
              dataType:"text", 
              success:function(msg){ 
               if(msg =='error'){
              msgShow('系统提示', '渠道账户ID|出金渠道 参数不对', 'warning');
              }else{
              msgShow('系统提示', msg);
              $("#confirm").click();
              }
             
              },
              error:function(XMLHttpRequest, textStatus, errorThrown){
              alert('渠道账户ID，出金渠道 参数不对');   
          }
           })
   
    }); 
 
  });
  
  fn.findFsbFinaOrg('#searchForm #bankCode','','');//#searchForm 调用  findFsbFinaOrg，通过传入的不同的属性，确定来自于哪个窗口的调用
  
  $(window).resize(function(){   
      $("#fsbProvisionsAcctInfo").setGridWidth($(window).width() - 15);
      $("#fsbProvisionsAcctInfo").setGridHeight($(window).height() - 163);
  });  
    });
   
   var fn = {
findFinaChan : function(comboxId,chnAcctComBoxId,code,acctId){
  $(comboxId).combobox({ //#addWin #chnCode,#modifyWin #chnCode
url:'../../../finance/chnAcctInfo/findFinaChanMerchScan', 
mode:'remote',
valueField:'chnCode', 
textField:'chnName' ,
hasDownArrow:true,
editable:false,
onBeforeLoad : function(param){
var comboxVal = $(this).combobox('getValue');
if(comboxVal){
param.chnName = comboxVal;
return true;
}
} ,
onChange : function(newValue,oldValue){
if(chnAcctComBoxId){
fn.findChnAcctInfo(chnAcctComBoxId,comboxId,acctId);
}
},
onLoadSuccess : function() { //加载成功后默认选中当前数据的值
            var val = $(this).combobox("getData");
            for (var a = 0; a < val.length; a++) {
            if(code==val[a].chnCode){
            $(this).combobox("select", val[a].chnCode);
            }
}
   }  
});
  },
  findChnAcctInfo : function(chnAcctComBoxId,comboxId,acctId){
  var arg = arguments[1];
  $(arguments[0]).combobox({
  url:'../../../finance/chnAcctConfig/findChnAcctInfoMerchScan', 
mode:'remote',
valueField:'chnAcctId', 
textField:'chnAcctDesc' ,
hasDownArrow:true,
editable:false ,
onBeforeLoad : function(param){
if(arg){
var finaCha = $(arg).combobox('getValue');
if(finaCha){
param.chnCode = finaCha;
return true;
}
}else{
var finaCha = $(this).combobox('getValue');
if(finaCha){
param.chnAcctDesc = finaCha;
return true;
}
return true;
}  

},
onLoadSuccess : function() { 
            var val = $(this).combobox("getData");
            for (var a = 0; a < val.length; a++) {
            if(acctId==val[a].chnAcctId){
            $(this).combobox("select", val[a].chnAcctId);
            }
}
   }
  });
  
  },
  findFsbFinaOrg : function(finaOrgComBoxId,finaChnComBoxId,bankCode){
  $(finaOrgComBoxId).combobox({ //bankCode
url:'../../../finance/finaOrgInfo/findFsbFinaOrg/1',
mode:'remote',
valueField:'finaCode', 
textField:'finaName' ,
hasDownArrow:true,
editable:false ,
onBeforeLoad : function(param){
var comboxVal = $(this).combobox('getValue');
if(comboxVal){
param.finaName = comboxVal;
return true;
}
return true;
},
   onLoadSuccess : function() { 
            var val = $(this).combobox("getData");
            for (var a = 0; a < val.length; a++) {
            if(bankCode==val[a].finaCode){
            $(this).combobox("select", val[a].finaCode);
            }
}
   } 
});
  },
  saveProvisionAcctInfo : function(){
  var a = $('#addWin #bankCode').combobox('getText')
$("#addWin #bankName").val(a);
  var result = fn.validate('#addWin');
  if(!result) return false;
  var addArray = $('#addForm').serializeArray();
  var postData=parsePostData(addArray);
  $.ajax({
  type:'POST',
  url :'addProviosnsAcctInfo?fid=',
  data : postData,
  success:function(data){
  showCommonReqInfo(data,'fsbProvisionsAcctInfo');
  fn.close('addWin');
  },
  error:function(XMLHttpRequest, textStatus, errorThrown){
      msgShow("系统提示",errorThrown,'error');
  }
  }); 
  },
  modifyProvisionAcctInfo : function(){
  var a = $('#modifyWin #bankCode').combobox('getText')
$("#modifyWin #bankName").val(a);
  var result = fn.validate('#modifyWin');
  if(!result) return false;
  var modifyArray = $('#modifyForm').serializeArray();
  var postData=parsePostData(modifyArray);
  postData.oper = 'edit';
  postData.finaCode = $('#modifyWin').data('finaCode');//$('#modifyWin #finaCode').val();
  $.ajax({
  type:'POST',
  url :'updateProvisionAcctInfo?fid=',
  data : postData,
  success:function(data){
  showCommonReqInfo(data,'fsbProvisionsAcctInfo');
  fn.close('modifyWin');
  },
  error:function(XMLHttpRequest, textStatus, errorThrown){
      msgShow("系统提示",errorThrown,'error');
  }
   }); 
  },
  validate : function(winId){
  var proAcctNo = $(winId + ' #proAcctNo').val();
  if(proAcctNo==''){
  msgShow('系统提示', '请输入备付金账号！', 'warning');
  return false;
  }
  var bankCode = $(winId + ' #bankCode').combobox('getValue');
  if(bankCode==''){
  msgShow('系统提示', '请选择所属金融机构！', 'warning');
  return false;
  }


  var chnCode = $(winId + ' #chnCode').combobox('getValue');
  if(chnCode==''){
  msgShow('系统提示', '请选择出金渠道!', 'warning');
  return false;
  }
  var acctId = $(winId + ' #acctId').combobox('getValue');
  if(acctId==''){
  msgShow('系统提示', '请选择出金渠道账户!', 'warning');
  return false;
  }
  return true;
  },
  close : function(winId){
  $('#'+winId).window('close');
  }
   };
   
</script>
<body><!--查询条件-->
<form id="searchForm" style="font-size: 12px;padding-bottom: 5px;">
<table>
<tr>

    <td class="tr">备付金账号：</td>
                 <td class="tl">
             <input type="text" id="proAcctNo" name="proAcctNo" class="w_156"/>    
          </td>
    <td class="tr">备付金账户名称：</td>
                 <td class="tl">
             <input type="text" id="proAcctName" name="proAcctName" class="w_156"/>    
          </td>
    
    <td class="tr">所属金融机构：</td>
                 <td class="tl">
             <input id="bankCode" class="easyui-combobox" name="bankCode" data-options="valueField:'id',textField:'text'" style="width: 176px"/>
          </td>
      
           <td>
            <a id="confirm" href="#" class="easyui-linkbutton" iconCls="icon-ok">查询</a>
           </td>
</tr>
</table>
</form> 

<div id="fsbProvisionsAcctInfoCter"></div> 

<!-- 添加窗口 -->
<div id="addWin" icon="icon-save" class="easyui-window"  style="width:400px;height:400px">
<div class="easyui-layout" fit="true">
<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
<form id="addForm">
<table>
 <tr>
    <td class="tr">备付金账号：</td>
                    <td class="tl">
             <input id="proAcctNo" name="proAcctNo" style="width: 170px" maxlength="10"/><span style="color: red;">*</span>  
            </td>
            ......
         </tr>
</table>
</form>

</div>
<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
<a id="addBtnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"> 确定 </a> <a id="addBtnCancel"
class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)"> 取消 </a>
</div>
</div>
</div>
<!-- 修改窗口 -->
<div id="modifyWin" icon="icon-edit" class="easyui-window" style="width:400px;height:400px">
<div class="easyui-layout" fit="true">
<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
<form id="modifyForm">
<table>
 <tr>
    <td class="tr">备付金账号：</td>
                    <td class="tl"><!--input标签的那name要与jqGrid中的colModel的那么相同，方便点击修改按钮时在弹出框中显示选中数据的信息-->
             <input id="proAcctNo" name="proAcctNo" style="width: 170px" maxlength="10" readonly="readonly"/><span style="color: red;">*</span>  
            </td>
          ......
         </tr>
</table>
</form>
</div>
<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
<a id="modifyBtnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"> 确定 </a> 
<a id="modifyBtnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)"> 取消 </a>
</div>
</div>
</div>
</body>  
<script type="text/javascript">
  var winParam = {
     title: '备付金',
     width: 350,
     modal: true,
     shadow: true,
     closed: true,
     height: 270,
     resizable:true,
     minimizable:false,
     maximizable:false,
     draggable:false,
  closable:true,
  collapsible:false
  };
 
  $('#addWin').window(winParam).window('close');
  $('#modifyWin').window(winParam).window('close');
 </script>  
</html>