Jquery ui jqGrid单元格中的jQuery UI菜单

我已经创建了一个网格并自定义了一个列，以包含jquery UI菜单，如

除了菜单窗口出现在单元格内造成不良视觉效果（即单元格高度增加以腾出空间放置菜单窗口）之外，其他操作都正常。 请查看以下屏幕截图以获得直观的解释（无论菜单项是否处于禁用状态）。

有没有办法让菜单窗口显示在z索引表元素的顶部

非常感谢您的宝贵帮助，社区：）

根据评论请求编辑：

创建splitbutton菜单的代码如下所示。首先是列模型标记

{ name: 'act', index: 'act', width: 80, sortable: false, search: false, align: 'center',
  formatter: function (cellvalue, options, rowObject) {
      var markup = "<div>" +
                      "<div class='actionsButtonset'>" +
                          "<button class='dshbd_ConfirmMonth' rel='" + rowObject.UmltID + "' rev='" + rowObject.IsConfirmAvailable + "' plock='" + rowObject.IsPeriodLocked + "' alt='Confirm'>Confirm</button>" +
                          "<button class='btnSelectMenu' rev='" + rowObject.IsUmltLocked + "' " + ">Select</button>" +
                      "</div>" +
                      "<ul class='actionMenu'>" +
                          "<li><a class='dshbd_UnlockMonth' href='#' rel='" + rowObject.UmltID + "' alt='Unlock'>Unlock</a></li>" +
                      "</ul>" +
                   "</div>";
      return markup;
  }
}

我为您准备了一个演示如何在jqGrid内部使用Split按钮的程序。它显示

---

稍后我将发布演示的更详细解释。在检查代码之后，您可能会完全理解您自己。

您能否提供更多关于如何在网格中实现拆分按钮的详细信息？带有按钮的列的自定义格式设置程序代码和创建按钮和菜单的代码（可能在

loadComplete

中）是问题的根源。您是否为菜单的

元素指定了任何

z-index

值？例如，您可以尝试使用

。@Oleg:请查看我的编辑。我见过你的例子，效果很好。你能帮我了解一下有哪些不同之处吗？谢谢！其中一个主要区别是构建弹出菜单的

的位置。将其放置在单元格内，单元格的

是菜单的间接父级。我将

放在

中（它的父项是

）。这是菜单出现

z-index

和剪切问题的主要原因（我的演示中的菜单可以显示在网格外）。此外，您永远不会同时在不同的单元格中显示多个弹出菜单。所以它不需要在每一行中创建

。您可以从

rowid

@Oleg:Ok获得关于jqGrid API的所有其他信息。我正在尝试从单元格中取出菜单，并使用您的建议修改代码。我会通知你的。谢谢我想再次投票！非常感谢Oleg:）@Oleg，样品效果很好，谢谢。但是，我的代码调用setrowdata，因为将按钮设置为菜单的代码在loadcomplete上运行，所以当格式化程序返回setgriddata之后，它们不会被重新“按钮化”。格式化后如何调用loadcomplete中的代码？@user1689571:对不起，我不明白你的意思。也许你可以打开一个新的问题，在那里你可以更详细地解释问题，并在这里发布问题的链接@JureŠpik：答案提供了一个可能实现的示例。它使用自定义格式化程序在列中放置两个

，并使用jQuery UI按钮、jQuery UI菜单和位置以及原因

jQuery。单击
。菜单本身是动态创建的，但它在DOM层次结构中的直接父级（它是
的直接子级）并不重要。
var confirmMonthBtn = $('.dshbd_ConfirmMonth');
$.each(confirmMonthBtn, function (key, value) {
    var button = $(this);
    var umltID = button.attr('rel');
    button.button().click(function (event) {
        event.preventDefault();
    });
    var isPeriodLocked = (button.attr('plock') === 'true');
    if (!isPeriodLocked) {
        var isConfirmAvailable = ($(this).attr('rev') === 'true');
        if (!isConfirmAvailable) {
            button.button({ disabled: true });
        }
    } else {
        button.button({ disabled: true });
    }
});
var currentPeriod = GetCurrentPeriod();
var period = GetCurrentViewPeriod();
var isCurrent = false;
if (currentPeriod != null && period != null) {
    isCurrent = period.PeriodID == currentPeriod.PeriodID;
}
var selectBtns = $('.btnSelectMenu');
$.each(selectBtns, function (key, value) {
    var button = $(this);
    button.button({ text: false, icons: { primary: 'ui-icon-triangle-1-s'} });
    button.click(function (event) {
        var menu = $(this).parent().next().show();
        menu.position({
            my: 'left top',
            at: 'left bottom',
            of: this
        });
        $(document).on('click', function () {
            menu.hide();
        });
        return false;
     });
     $('div.actionsButtonset').buttonset();
     var menuElement = button.parent().next();
     menuElement.hide();
     menuElement.menu({
         select: function (event, ui) {
             var umltID = ui.item.children().attr('rel');
             event.preventDefault();
         }
     });
     if (!isCurrent) {
         var isPeriodLocked = ($(this).attr('plock') === 'true');
         if (isPeriodLocked) {
             menuElement.menu({ disabled: false });
         } else {
             var isUmltLocked = ($(this).attr('rev') === 'true');
             menuElement.menu({ disabled: !isUmltLocked });
         }
     } else {
         //The current period is always unlocked
         menuElement.menu({ disabled: true });
     }
});