使用jqGrid如何防止容器被禁用？（v4.15.6-pre免费版）

使用免费版jqGrid 4.15.6-pre，打开添加表单新增行时，点击某单元格触发click类型的dataEvent，调用accessBudgetView函数加载并以滑动效果显示容器.rma-miscdisplay2-zoom600995。该容器已设置高于Add表单的z-index，但仍处于禁用状态，无法进行交互操作。

调用函数代码 #

function accessBudgetView(){
        
$('.rma-miscdisplay2-zoom600995').load("/QMSWebApp/RMAControllerServlet",
{lifecycle:"accessRMAMONumberRequestBudgetLayout",
nextMONumberRequestIndex:nextMONumberRequestIndex,
recseq:0}, function(){$('.rma-miscdisplay2-zoom600995').show("slide", { direction: "right" }, 
1000);});
                    
}

容器结构代码 #

<div class="rmaMainBody"></div>
<div class="rma-miscdisplay"></div>
<div class="rma-miscdisplay2"></div>
<div class="rma-miscdisplay2-zoom600995"></div>
<div class="rma-miscdisplay3"></div>

容器CSS代码 #

.rma-miscdisplay2-zoom600995{
overflow-y: auto;
display: none;
position: absolute;
padding: 5px;
top: 100px;
bottom: 0px;
right: 2px;
background-color: silver;
color: blue;
padding: 2px;
z-index: 600995;
border-style: solid;
border-color: white;
border-width: thin; 
} 

解决方案 #

1. 处理jqGrid模态遮罩层拦截

jqGrid的添加表单默认是模态模式，会生成全屏遮罩层（类名通常为ui-widget-overlay），即使容器z-index高于表单，遮罩层可能层级介于两者之间，拦截所有交互。

• 方法1：提高容器z-index至遮罩层之上
  通过浏览器开发者工具查看ui-widget-overlay的z-index值，将容器的z-index设置得更高。例如遮罩层z-index为9999，则容器z-index设为10000：

  .rma-miscdisplay2-zoom600995{
      /* 原有CSS */
      z-index: 10000;
  }
  

• 方法2：临时隐藏遮罩层
  在显示容器时隐藏遮罩层，容器关闭后恢复：

  function accessBudgetView(){
      $('.rma-miscdisplay2-zoom600995').load("/QMSWebApp/RMAControllerServlet",
      {lifecycle:"accessRMAMONumberRequestBudgetLayout",
      nextMONumberRequestIndex:nextMONumberRequestIndex,
      recseq:0}, function(){
          $('.ui-widget-overlay').hide();
          $('.rma-miscdisplay2-zoom600995').show("slide", { direction: "right" }, 1000);
      });
  }
  

2. 确保容器可接收鼠标事件

检查容器是否因继承或自身设置pointer-events: none导致无法交互，强制开启：

.rma-miscdisplay2-zoom600995{
    /* 原有CSS */
    pointer-events: auto;
}

3. 解除表单焦点锁定

jqGrid模态表单会锁定焦点在表单内部，导致外部容器无法获取焦点。可手动将焦点转移到容器内的交互元素：

function accessBudgetView(){
    $('.rma-miscdisplay2-zoom600995').load("/QMSWebApp/RMAControllerServlet",
    {lifecycle:"accessRMAMONumberRequestBudgetLayout",
    nextMONumberRequestIndex:nextMONumberRequestIndex,
    recseq:0}, function(){
        $('.rma-miscdisplay2-zoom600995').show("slide", { direction: "right" }, 1000);
        // 将焦点设置到容器内第一个可交互元素
        $('.rma-miscdisplay2-zoom600995').find('input, button, select').first().focus();
    });
}

内容的提问来源于stack exchange，提问作者Steve Dyke