jqGrid添加详细按钮，单击弹出窗体

代码如下：

@using WebMap.Framework.UI;
@using WebMap.Admin.Models;
@using WebMap.Core;
@using WebMap.Core.Infrastructure;
@{
    ViewBag.Title = "贷款申请管理";

    var defaultSettins = EngineContext.Current.Resolve<WebMap.Domain.Common.AdminAreaSettings>();

}
@section HeadSection {
    <link rel="stylesheet" href="/Content/v1/jquery-ui.css" />
    <link rel="stylesheet" href="/Content/v1/ui.jqgrid.css" />
    <link rel="stylesheet" href="/Content/v1/datepicker.css" />
    <link rel="stylesheet" href="/Content/v1/bootstrap-timepicker.css" />
    <link rel="stylesheet" href="/Content/v1/daterangepicker.css" />
    <link rel="stylesheet" href="/Content/v1/bootstrap-datetimepicker.css" />

}
<script src="http://www.webmap.com/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://www.webmap.com/Scripts/ws.base.js"></script>
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed');
        } catch (e) {
        }

    </script>
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="/Admin/">首页</a>
        </li>
        <li class="active">贷款申请</li>
    </ul><!-- /.breadcrumb -->
</div>
<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <div class="form-group">

                <div class="col-xs-2">
                    <input type="text" placeholder="输入您的查询：名称" class="form-control search-query" name="Name">
                </div>
                <div class="col-xs-1 wizard-actions">
                    <button class="btn btn-purple btn-sm wizard-actions" type="button">
                        <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                        查询
                    </button>
                </div>

            </div>
            <br />
            <hr />
            <table id="grid-table"></table>
            <div id="grid-pager"></div>
            <script type="text/javascript">
                var $path_base = ".."; //in Ace demo this will be used for editurl parameter
            </script>
        </div>
    </div>
</div>
<div id="load" style="width: 500px; height: 100px; position: absolute; top: 300px; left: 350px;"></div>

@section FootSection {

    <script src="/Content/v1/js/date-time/bootstrap-datepicker.js"></script>
    <script src="/Content/v1/js/date-time/bootstrap-timepicker.js"></script>
    <script src="/Content/v1/js/date-time/moment.js"></script>
    <script src="/Content/v1/js/date-time/daterangepicker.js"></script>
    <script src="/Content/v1/js/date-time/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript">
    // 审核
    function AuditInfo(){
        // 获取选中的id
        $("#gbox_grid-table").find(":checkbox:checked").each(function(i){
            var id = $(this).parent().parent().attr('id');
            // 审核
            $.ajax({
                type: "POST",
                url: "/Admin/BillLoanApply/AuditBillLoanApply",
                data: "id="+id,
                success: function(msg){
                    alert(msg);
                }
            });
        });

        // 刷新审核列表
        location.reload();
    }
    function BillLoanDetails( id){
        ws.base.showDialogNew("/Admin/BillLoanApplyDetail/List");
    }
        jQuery(function ($) {

            $(".wizard-actions :button").bind("click", function() {
                var Name = $("input[name='Name']").val();
                var postJson = {
                    PageSize: @(defaultSettins.DefaultGridPageSize),
                    CompanyName:Name,
                };

                jQuery("#grid-table").jqGrid('setGridParam', {
                    url: "/Admin/BillLoanApply/BillLoanApplyList",
                    postData: postJson,
                    ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
                    serializeGridData: function(postData) {
                        return JSON.stringify(postData);
                    },
                    page: 1
                }).trigger("reloadGrid");
                //$("span .input-group-btn").addCss("popover-error");

            });

        });

    </script>
<div style="position: absolute; top: 179px; left: 315px; z-index: 100;">
    <button  type="button" id="btnAudit" onclick="AuditInfo()">

        审核
    </button>
</div>
    @{
        Html.RenderPartial("~/Administration/Views/Shared/_JqGridJsTemplate.cshtml", new JqGridModel()
        {
            Title = "贷款申请操作",
            JqGridId = "grid-table",
            Url = "/Admin/BillLoanApply/BillLoanApplyList",
            ColNames = "[' ', '索引', '详细id','公司名称','公司电话','法人', '证件名称', '身份证号', '手机','借款期限','申请表复印件','状态','创建时间','申请人','申请日期','审核人','审核日期','详细']",
            JsonReader = "{id: \"Id\",root: \"Data\",records: \"TotalRecords\",total: \"TotalPages\",repeatitems: false}",
            ColModel = @"[
                    {
                        name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,subGrid: true,
                        formatter: 'actions',
                        formatoptions: {
                            keys: true,
                            delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
                            delbutton:true
                        }

                    },
                    { name: 'Id', index: 'Id', width: 30, sorttype: 'int',editable:false,editoptions : {readonly : true,size : 10} },
                    { name: 'DetailID', index: 'DetailID', width: 70,hidden:true,editable: false, editoptions: { size: '20', maxlength: '30' } },
                    { name: 'CompanyName', index: 'CompanyName', width: 70, editable: true, editoptions: { size: '20', maxlength: '30' } },
                    { name: 'CompanyPhone', index: 'CompanyPhone', width: 70,hidden:true,  editable: true, editoptions: { size: '20', maxlength: '30' } },
                    { name: 'Corporate', index: 'Corporate', width: 70,hidden:true,editable: true, editoptions: { size: '20', maxlength: '30' } },
                    { name: 'CardName', index: 'CardName', width: 70,editable: true, editoptions: { size: '20', maxlength: '30' } },
                    { name: 'CardId', index: 'CardId', width: 70,hidden:true,editable: true, editoptions: { size: '20', maxlength: '30' } },
                    { name: 'Mobile', index: 'Mobile', width: 70,editable: true, editoptions: { size: '20', maxlength: '30' } },
                    { name: 'LoanPeriod', index: 'LoanPeriod', width: 70,editable: true, editoptions: { size: '20', maxlength: '30' } , unformat: pickDate},
                    { name: 'ApplicationCopy', index: 'ApplicationCopy', width: 70,hidden:true,editable: true, editoptions: { size: '20', maxlength: '30' } },
                    { name: 'NStatus', index: 'NStatus', width: 50,editable: true,edittype:'select', editoptions: {value:'" + ViewBag.Dic + @"'} },
                    { name: 'Createtime', index: 'Createtime',hidden:true, width: 70,editable: true, editoptions: { size: '20', maxlength: '30' }, unformat: pickDate },
                    { name: 'Applicant', index: 'Applicant', width: 70,editable: true, editoptions: { size: '20', maxlength: '30' } },
                    { name: 'ApplicationDate', index: 'ApplicationDate', width: 90,editable: true,formatter:  dataformatter, editoptions: { size: '20', maxlength: '30' }, unformat: pickDate },
                    { name: 'Auditor', index: 'Auditor', width: 70,formatter:  dataformatter,editable: false, editoptions: { size: '20', maxlength: '30' }, unformat: pickDate },
                    { name: 'AuditDate', index: 'AuditDate',hidden:true,  width: 90,formatter:  dataformatter, editable: true, editoptions: { size: '20', maxlength: '30' }, unformat: pickDate },
                    { name: 'Id', index: 'Id', width: 150, formatter: formatModel,edittype:'custom'}

                ]",
            PrmNames = "{page: \"page\",rows: \"PageSize\",sort: \"sidx\",order: \"sord\",search: \"_search\",nd: \"nd\",id: \"id\",oper: \"oper\",editoper: \"edit\",addoper: \"add\",deloper: \"del\",subgridid: \"id\",npage: null,totalrows: \"totalrows\"}",
            UpdateUrl = "/Admin/BillLoanApply/Operation",
            SubGrid = "true",
            PageSize = defaultSettins.DefaultGridPageSize,
            RowList = defaultSettins.GridPageSizes,
            NavGridString = @"{
                edit: true,
                editicon: 'ace-icon fa fa-pencil blue',
                add: true,
                addicon: 'ace-icon fa fa-plus-circle purple',
                del: true,
                delicon: 'ace-icon fa fa-trash-o red',
                search: false,
                searchicon: 'ace-icon fa fa-search-plus grey',
                refresh: false,
                view: true,
                viewicon: 'ace-icon fa fa-search-plus grey',

            },
            {
                //edit record form
                //closeAfterEdit: true,
                width: 400,
                recreateForm: true,
                beforeShowForm: function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class=""widget-header"" />');
                    styleEditForm(form);
                }
            },
            {
                //new record form
                width: 400,
                closeAfterAdd: true,
                recreateForm: true,
                viewPagerButtons: false,
                beforeShowForm: function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                        .wrapInner('<div class=""widget-header"" />')
                    styleEditForm(form);
                }
            },
            {
                //delete record form
                recreateForm: true,
                beforeShowForm: function(e) {
                    deleteCssHandle(e);
                },
                onClick: function(e) {
                }
            },
            {
                //search form
                recreateForm: true,
                afterShowSearch: function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class=""widget-header"" />')
                    style_search_form(form);
                },
                afterRedraw: function() {
                    style_search_filters($(this));
                },
                multipleSearch: true,
                /**
                multipleGroup:true,
                showQuery: true
                */
            },
            {
                //view record form
                recreateForm: true,
                beforeShowForm: function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class=""widget-header"" />')
                }
            }",
            ExtensionJavaScript = @"
         function showChildGrid(parentRowID, parentRowKey) {
    $.ajax({
        url: ""GetApplyDetail"",
        type: ""POST"",
        data: { id: 5 },
        success: function(jsondata) {
            if (jsondata) {
                var childDiv =  $(""<div class='widget-main'></div>"").appendTo(""#"" + parentRowID);
                $.each(jsondata, function(i, j) {
                    childDiv.append(""<div class=\""col-xs-12 col-lg-2\""><span class='lighter line-height-125'>""+i+""<\/span>:<span class='text-primary'>"" + j+""</span><\/div>"");
                });
            }
        }
    });
    }
            function formatModel(cellValue, options, rowObject) {
            var imageHtml = ""<input type='button' value='查看贷款申请详细' onclick='BillLoanDetails(""+cellValue + "");' />"";
            return imageHtml;
            }

            function styleEditForm(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*=""-icon""]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-primary').prepend('<i class=""ace-icon fa fa-check""></i>');
                buttons.eq(1).prepend('<i class=""ace-icon fa fa-times""></i>');

                form.find('input[name=ApplicationDate]').datetimepicker({
                        format: 'YYYY-MM-DD HH:mm:ss'
                    }).next().on(ace.click_event, function () {
                        $(this).prev().focus();
                    });
                form.find('input[name=LoanPeriod]').datetimepicker({
                        format: 'YYYY-MM-DD HH:mm:ss'
                    }).next().on(ace.click_event, function () {
                        $(this).prev().focus();
                    });

                buttons = form.next().find('.navButton a');
                buttons.find('.ui-icon').hide();
                buttons.eq(0).append('<i class=""ace-icon fa fa-chevron-left""></i>');
                buttons.eq(1).append('<i class=""ace-icon fa fa-chevron-right""></i>');
            }
            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm btn-white btn-round').find('[class*=""-icon""]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class=""ace-icon fa fa-trash-o""></i>');
                buttons.eq(1).addClass('btn-default').prepend('<i class=""ace-icon fa fa-times""></i>')
            }
            function beforeDeleteCallback(e) {
                        deleteCssHandle(e);
                    }
            function deleteCssHandle(e) {
                var form = $(e[0]);
                if (form.data('styled')) return false;

                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class=""widget-header"" />')
                style_delete_form(form);

                form.data('styled', true);
            }"

        });

    }

}