`
zengshaotao
  • 浏览: 787653 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jqGrid,JQuery

 
阅读更多

<%@ 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>

分享到:
评论

相关推荐

    jqgrid jquery 表格插件

    **jqGrid jQuery 表格插件** jqGrid是一款基于jQuery的开源数据网格插件,它为Web应用程序提供了强大的数据展示和管理能力。这个插件深受开发者喜爱,因为它提供了丰富的功能和自定义选项,使得在网页上创建交互式...

    jQuery网格插件 jqGrid jQuery Data Grid

    **jQuery网格插件jqGrid详解** jqGrid是一个强大的基于jQuery的开源插件,专门用于在Web页面上展示和操作网格数据。它提供了丰富的功能,包括数据分页、排序、搜索、编辑、添加、删除和导出,使得在网页中创建交互...

    jqgrid jquery-ui-1.8.17.custom.css

    jqgrid jquey 样式 让表格变得更漂亮

    jqgrid+jqueryui.theme

    《jqGrid与jQuery UI Theme深度解析》 jqGrid与jQuery UI Theme是两个在Web开发中广泛应用的工具,它们为创建动态、交互式的数据网格和美观的用户界面提供了强大的支持。jqGrid是一个基于JavaScript的开源网格插件...

    jquery.jqgrid最新版

    《jQuery.jqGrid详解——打造高效数据管理界面》 jQuery.jqGrid是一款强大的JavaScript插件,主要用于构建数据密集型Web应用程序,特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性...

    jqGrid jQuery 表格插件测试代码

    jqGrid是一款基于jQuery的表格插件,用于展示和操作数据,提供丰富的功能,如分页、排序、筛选、编辑等。在上述代码中,我们看到了一个使用jqGrid创建的本地数据表格实例。以下是对该代码的详细解释: 1. **初始化...

    gem-jqgrid-jquery-rails:提供为Rails 3.1+资产管道打包的`jqGrid` jQuery插件

    jqgrid-jquery-rails 由Doc Walker认可提供为Rails 3.1+资产管道打包的jqGrid jQuery插件。安装将这些行添加到应用程序的Gemfile : # jqgrid jquery plugin packaged for the rails asset pipelinegem 'jqgrid-...

    jqGrid(jqueryGrid表格操作demo)

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格数据,它提供了丰富的功能,如数据分页、排序、过滤、编辑、添加、删除等,且具有高度自定义性。这个"jqGrid(jqueryGrid表格操作demo)"是一...

    jquery.jqGrid-4.5.4

    **jQuery.jqGrid-4.5.4**是一款基于JavaScript的开源库,是JQuery框架下的一个强大表格插件。这个版本(4.5.4)提供了丰富的功能,旨在帮助开发者构建交互性强、数据处理能力强的网格视图。在本文中,我们将深入探讨...

    jqgrid+jquery+servlet实现的一个智能交通后台系统

    《基于jqgrid、jQuery和servlet的智能交通后台系统详解》 在当今信息化社会,智能交通系统的建设已经成为提升城市交通管理效率、优化交通环境的重要手段。本系统利用jqgrid、jQuery和servlet技术,构建了一个功能...

    jquery jqGrid 4 7 1 zip下载 css js plugins src

    | jquery jqGrid min js | jquery jqGrid src js | jquery 1 9 0 min js plugins | grid addons js | grid postext js | grid setcolumns js | jquery contextmenu js | jquery searchFilter js | jquery tablednd ...

    jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar

    《jQuery.jqGrid 4.3.1与jQuery UI 1.8.17的深度解析》 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery.jqGrid是基于jQuery的开源数据网格插件,...

    jquery.jqGrid-4.4.3

    《jQuery.jqGrid-4.4.3:Web页面列表分页显示的高效解决方案》 在Web开发领域,数据展示是不可或缺的一部分,特别是在处理大量数据时,如何有效地进行分页显示,提高用户体验,成为了开发者关注的重点。jQuery....

    jquery表格插件jqgrid

    **jQuery表格插件jqGrid详解** jqGrid是一款强大的基于JavaScript的开源网格控件,它能够为Web应用程序提供灵活、功能丰富的数据展示和操作界面。这款插件是jQuery库的一个扩展,专为处理大量数据和实现复杂的表格...

    jquery.jqGrid-4.4.5

    《jQuery.jqGrid 4.4.5:构建动态数据表格的强大工具》 jQuery.jqGrid 是一个基于 jQuery 的开源网格插件,主要用于在网页上展示和操作结构化的数据,如数据库中的表格数据。版本 4.4.5 是这个强大组件的一个稳定...

    jqGrid 演示最新版 jqgrid 4.4, jQuery 1.8.0, jQuery-ui 1.8.23

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化的数据。它提供了丰富的功能,包括分页、排序、搜索、编辑、添加和删除记录等,是Web开发中用于创建交互式数据表的常用工具。在最新版本...

    Jquery表格插件jqGrid 4.3.0及其Demo

    **jQuery表格插件jqGrid 4.3.0详解** jqGrid是一款基于JavaScript的开源网格控件,它充分利用了jQuery库的强大功能,为Web开发者提供了丰富的数据展示和操作功能。jqGrid 4.3.0是该插件的一个重要版本,它在前一...

    JqGrid For ASP.Net

    **JqGrid for ASP.NET** 是一个专门为ASP.NET平台设计的数据网格组件,它结合了jQuery库的灵活性和ASP.NET的强大功能,为Web应用程序提供了一种高效、可定制的数据展示和管理解决方案。JqGrid允许开发者在网页上创建...

    jquery.jqGrid-4.5.2.zip

    《jQuery.jqGrid 4.5.2:构建高效数据网格的神器》 在Web开发领域,高效的数据展示和管理是不可或缺的一部分。jQuery.jqGrid 4.5.2作为一个强大的开源JavaScript插件,为开发者提供了强大的数据网格功能,使得在...

Global site tag (gtag.js) - Google Analytics