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

Question

在我的ASP.Net MVC 3视图中，我有一个弹出窗口，我需要从列表中选择一个客户。我使用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

您可以使用navGridalertzIndex选项，目前还没有记录。它的默认值是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 });