jquery - jQuery 模式对话框中的 jqGrid 隐藏错误消息

Question

在我的 ASP.Net MVC 3 View 中，我有一个弹出窗口，我需要从列表中选择一个客户。我使用 jqGrid 作为我的表格，但问题是 jqGrid 弹出的错误对话框(例如编辑前的“请选择一行”错误)位于 jQuery 对话框后面。

如何在 jqGrid 的警告消息上设置 z-index？

HTML:

<div id="@(Model.PassedCustomerType)SearchPopUp" style="display:none;z-index:1;">
    <table id="jqgCustomersList" cellpadding="0" cellspacing="0"></table> 
    <div id="jqgCustomersPaging"></div> 
</div>

jquery对话框

$("#@(Model.PassedCustomerType)Search").click(function () {
    $("#@(Model.PassedCustomerType)SearchPopUp").dialog({ width: 900, height: 400, position: "center", modal: true, zindex: 1, title: 'Select @Model.DisplayPassedCustomerType' });
});

和 jqGrid

$('#jqgCustomersList').jqGrid({
    //url from wich data should be requested
    url: '@Url.Action("GetCustomers")',
    ondblClickRow: function (rowid) {
        jQuery(this).jqGrid('editGridRow', rowid,
            { url: '@Url.Action("UpdateCustomer")', recreateForm: true, closeAfterEdit: true, closeOnEscape: true, reloadAfterSubmit: false });
    },
    //type of data
    datatype: 'json',
    //url access method type
    mtype: 'POST',
    //columns names
    colNames: ['New WO',
            'Details',
            'CustomerID_Key',
            'Customer ID',
            'AddressID',
            'Type',
            'Company',
            'First',
            'Last',
            'Address',
            'Address2',
            'City',
            'St',
            'Zip',
            'Email',
            'Phone',
            'Fax',
            'Cell'
            ],
    //columns model
    colModel: [
                { name: 'NewWO', index: 'NewWO', hidden: true },
                { name: 'Details', index: 'Details', hidden: true },
                { name: 'CustomerID_Key', index: 'CustomerID_Key', hidden: true, editable: true, editrules: { edithidden: false} },
                { name: 'CustomerID', index: 'CustomerID', align: 'left', width: '50px', editable: false },
                { name: 'AddressID', index: 'AddressID', hidden: true, editable: true, editrules: { edithidden: false} },
                { name: 'CustomerType', index: 'CustomerType', align: 'left', width: '50px', editable: true, edittype: 'select', editoptions: { value: "Builder:Builder;HomeOwner:Home Owner"} , editrules: { required: true, edithidden:true}, hidden: true },
                { name: 'CompanyName', index: 'Address.CompanyName', align: 'left', width: '50px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: false} },
                { name: 'FirstName', index: 'Address.FirstName', align: 'left', width: '55px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'LastName', index: 'Address.LastName', align: 'left', width: '55px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'Address1', index: 'Address.Address1', align: 'left', width: '90px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'Address2', index: 'Address.Address2', align: 'left', width: '90px', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 50 }, editrules: { required: false, edithidden: true} },
                { name: 'City', index: 'Address.City', align: 'left', width: '65px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'State', index: 'Address.State', align: 'left', width: '12px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'Zip', index: 'Address.Zip', align: 'left', width: '28px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'EmailAddress', index: 'Address.EmailAddress', align: 'left', width: '90px', editable: true, edittype: 'text', editoptions: { maxlength: 50 }, editrules: { required: true} },
                { name: 'Phone', index: 'Address.Phone', align: 'left', width: '100px', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 50 }, editrules: { required: true, edithidden: true} },
                { name: 'Fax', index: 'Address.Fax', align: 'left', width: '100px', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 50 }, editrules: { required: false, edithidden: true} },
                { name: 'Cell', index: 'Address.Cell', align: 'left', width: '100px', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 50 }, editrules: { required: false, edithidden: true} },
            ],
    //pager for grid
    pager: $('#jqgCustomersPaging'),
    //number of rows per page
    rowNum: 10,
    //initial sorting column
    sortname: 'CustomerID',
    //initial sorting direction
    sortorder: 'asc',
    //we want to display total records count
    viewrecords: true,
    //grid height
    height: '100%',
    width: 880
});
$('#jqgCustomersList').jqGrid('filterToolbar', {
    //we want filters to be returned the same way as with advanced searching
    stringResult: true
});
$('#jqgCustomersList').jqGrid('navGrid', '#jqgCustomersPaging',
        { add: true, del: false, edit: true, search: false },
        { url: '@Url.Action("UpdateCustomer", "Customers")', closeAfterEdit: true, closeOnEscape: true },
        { url: '@Url.Action("InsertCustomer", "Customers")', closeAfterAdd: true, closeOnEscape: true });

Answer 1

您可以使用navGrid的alertzIndex选项目前还没有记录。它的默认值为 950，但 jQuery UI 对话框的 zIndex 参数的默认值为 1000(请参阅 the documentation ):

$('#jqgCustomersList').jqGrid('navGrid', '#pager',
    {cloneToTop: true, alertzIndex: 1005 });

所以在你的情况下可能是

$('#jqgCustomersList').jqGrid('navGrid', '#jqgCustomersPaging',
    { del: false, search: false, alertzIndex: 1005 },
    { url: '@Url.Action("UpdateCustomer", "Customers")', closeAfterEdit: true, closeOnEscape: true },
    { url: '@Url.Action("InsertCustomer", "Customers")', closeAfterAdd: true, closeOnEscape: true });