jqgrid 中如何修改添加弹出层的样式

Question

图片是添加时的弹出层，我想让他居中，并且换行。。。大神该怎么修改呢

Answer 1

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

}

try { ace.settings.check(‘breadcrumbs‘, ‘fixed‘); } catch (e) { }

• 首页
• 贷款申请

查询

---

var $path_base = ".."; //in Ace demo this will be used for editurl parameter

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

审核

@{
    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);
        }"

    });

}

}