jqGrid,JQuery

Web全栈笔记 2013-04-07

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
<title>后台用户管理</title>
<!-- 引入公共JSP文件 -->
<%@ include file="/WEB-INF/jsp/common/common.jsp" %>

   

<script type="text/javascript">
    $(document).ready(function(){

        var resultList = $("#vehicleApplicationResultList");
        var resultPager = $("#vehicleApplicationResultPager");
        var searchForm = $("#vehicleApplicationSearchForm");
       
        var queryUrl = "<%=path%>/back/sales/partRefund/partRefund-queryRefundUIVO.do";
       
        //为查询的条件输入域绑定校验
        var searchvalid = $("#vehicleApplicationSearchForm").validate({
             rules:{
                  "queryParam.orderNo":{required:false, minlength:1,maxlength:30}
             }
        });
       
        var refundFormatter = function(cellVal,options,rowObject) {
            return "<a href='#' onclick='displayAgent("+cellVal+")'>查看退款明细</a>";
        };
       
        var appStatusFormatter = function(cellVal,options,rowObject) {

            if(cellVal=="1"){
                return "已生效";
            }else{
                return "未生效";
            }
        };
       
        resultList.jqGrid({
            url:queryUrl,
            ajaxGridOptions: {type:"POST"},
            datatype: "json",
            prmNames: {page:"queryParam.page", rows:"queryParam.rows", sort:"queryParam.sort", order: "queryParam.order"},
            colNames:['投保单ID','投保单号','保单状态','分公司代码','分公司','险种名称','订单号','投保单金额','订单支付金额','订单支付时间','支付申请号','对账状态','操作'],
            colModel:[    
                        {name:'appId',index:'appId', width:80, sortable:false,align:'center',hidden:true},
                           {name:'appNo',index:'appNo', width:160, sortable:true,align:'center',hidden:false},
                           {name:'appStatus',index:'appStatus', width:60, sortable:true,align:'center',hidden:false,formatter:appStatusFormatter},
                        {name:'filialeCode',index:'filialeCode', width:80, sortable:false,align:'center',hidden:true},
                           {name:'filialeName',index:'filialeName', width:80, align:'center',sortable:false},
                           {name:'safeName',index:'safeName', width:100, align:'center',sortable:false},
                        {name:'orderNo',index:'orderNo', width:100, align:'center',sortable:false},
                        {name:'totalPremium',index:'totalPremium', width:60, align:'center',sortable:false},
                        {name:'payAmt',index:'payAmt', width:60,align:'center', sortable:false},
                        {name:'paySuccessDate',index:'paySuccessDate', width:100, align:'center',sortable:false},
                        {name:'payNo',index:'payNo', width:100,align:'center', sortable:false},
                        {name:'status',index:'status', width:80, align:'center',sortable:false},
                        {name:'appId',index:'appId',formatter:refundFormatter,width:120, sortable:false,align:'center'}
                     ],
            rowNum:10,
            //rowList:[10,20,30],
            pager: resultPager,
            height: "100%",
            autowidth: true,
            viewrecords: true,
            //sortname: 'appId',
            //sortorder: "desc",
            multiselect: true,
            jsonReader: {repeatitems: false},
            toolbar: [false,"top"]
        });

       
        $("#refund").click(refund);
       
        //退款
        function refund(){
            //得到的是控件生成的行序列号
            var rowIds = resultList.jqGrid('getGridParam','selarrrow');
            var goOn = true;
            //校验保单状态(已生效保单进行退款时要进行特别提示!)
            for(var i=0;i<rowIds.length;i++){
                var effectFlag = resultList.jqGrid('getCell', rowIds[i], 'appStatus');
                if(effectFlag=="已生效"){
                    if(!confirm("您选择的退款保单中含有【已生效】的保单,是否继续?")){
                        goOn = false;
                        break;
                    }
                }
            }
            if(!goOn){
                return false;
            }
            var appIds = "";
            //拼接选中记录的ID
            for(var i=0;i<rowIds.length;i++){
                if(appIds==""){
                    appIds  = resultList.jqGrid('getCell', rowIds[i], 'appId');
                }else{
                    appIds  = appIds+"#"+resultList.jqGrid('getCell', rowIds[i], 'appId');
                }
            }
            if(appIds != "") {
               
                if(!confirm("您确定退款吗?")){
                    return false;
                }
                var queryString = 'appIds='+appIds;
                $.ajax({
                       type: "POST",
                       dataType: 'json',
                       url: ctxPath+'/back/sales/partRefund/partRefund-refund.do',
                       data: queryString,
                       success: function(result){                             
                            alert(result.message);
                            reloadSearch();
                       }
                });   
            }else {
                alert("请选择要退款的记录!");
                return false;
            }
        }
     
       
          //刷新
      function reloadSearch(){
          if(!searchvalid.form()){
                 searchvalid.focusInvalid();
                 return false;
            }
            var params = searchForm.serialize();
            resultList.jqGrid('setGridParam',{url:queryUrl + "?" + params, page:1}).trigger("reloadGrid");
            return false;
      }
        $("#onSearch", searchForm).click(reloadSearch);
        $('button').button();
       
    });
   
    function displayAgent(appId){
        var resultList = $("#refundResult");
        var queryUrl = "<%=path%>/back/sales/partRefund/partRefund-refundInfo.do?appid="+appId;
       
       
        //查看是否有退款记录————————————————————————————————
        var haveRefund = true;
        var queryString = 'appId='+appId;
        $.ajax({
                //异步获取的话,已保存的数据无法展现,所以这里设置同步
                async:false,
                cache:false,
               type: "POST",
               dataType: 'json',
               url: ctxPath+'/back/sales/partRefund/partRefund-haveRefund.do',
               data: queryString,
               success: function(result){                             
                    var haveFlag = result.message;
                    if(!("have"==haveFlag)){
                        haveRefund = false;
                        alert("该记录还没有退款申请记录!");
                    }
               }
        });   
       
       
        //有退款记录才显示
        if(haveRefund){
           
            //保证每次刷新
            resultList.jqGrid('setGridParam',{url:queryUrl, page:1}).trigger("reloadGrid");
           
            resultList.jqGrid({
                url:queryUrl,
                ajaxGridOptions: {type:"POST"},
                datatype: "json",    
                prmNames: {page:"queryParam.page", rows:"queryParam.rows", sort:"queryParam.sort", order: "queryParam.order"},
                colNames:['投保单号','退款流水号','订单号','投保单金额','退款金额','退款时间','退款状态','退款异常信息'],
                colModel:[  {name:'appNo',index:'appNo', width:120, sortable:false,align:'center'},
                               {name:'refundSeq',index:'refundSeq', width:80, sortable:false,align:'center'},
                               {name:'orderNo',index:'orderNo', width:70, sortable:false,align:'center'},   
                               {name:'totalPremium',index:'totalPremium', width:60, sortable:false,align:'center'},
                               {name:'refundAmount',index:'refundAmount',width:40, sortable:false,align:'center'},
                            {name:'businessTime',index:'businessTime',width:70, sortable:false,align:'center'},
                            {name:'refundStatus',index:'refundStatus',width:60, sortable:false,align:'center'},
                               {name:'errorMsg',index:'errorMsg', width:120, sortable:false,align:'left'}   
                         ],
                rowNum:10,
                height: "100%",
                autowidth: true,
                viewrecords: true,
                sortname: 'appNo',
                sortorder: "",
                multiselect: false,
                jsonReader: {repeatitems: false},
                toolbar: [false,"top"]
            });
           
            $("#queryRefundDialog").dialog({
                bgiframe: true,
                autoOpen: false,
                width: 1000,
                height: 240,
                resizable: false,
                modal: true,
                buttons: {               
                    "关闭": function(){                   
                        $(this).dialog('close');   
                    }
                }
            });
            $("#queryRefundDialog").dialog('open');
        }
       
    }

</script>

</head>
<body>

<div class="main">
    <form id="vehicleApplicationSearchForm">
    <h3 class="common_nav">待退款订单查询</h3>
    <div class="search_box">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="common_table">
            <tbody>
                <tr>
                    <th>订单号:</th>
                    <td>
                        <input type="text" name="queryParam.orderNo" class="common_input"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="b_btn" id="onSearch" name="onSearch">查 询</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>

    <!-- 操作按钮 -->
    <div class="operation_bar">
        <a href="javascript:void(0)" class="btn_2" id='refund' >退款</a>
    </div>

    <table id="vehicleApplicationResultList"></table>
    <div id="vehicleApplicationResultPager" style="text-align:center;"></div>
   
    <div align="center" id="queryRefundDialog" title="退款明细信息">   
        <table id="refundResult"></table>   
    </div>
   
</div>


</body>
</html>

相关推荐

林大夏 / 0评论 2019-12-21
恋雨烟梦 / 0评论 2013-05-09