jqGrid单元格中的jQuery UI菜单

Question

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

一切正常，除了菜单窗口出现在单元格内部导致视觉效果不佳的事实，即单元格高度增加，为菜单窗口腾出空间。 请查看以下屏幕截图以获得可视化解释（无需关注处于禁用状态的菜单项）。

有没有办法让菜单窗口以z-index的形式显示在表元素的顶部？

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

根据评论请求编辑：

创建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;
  }
}

然后，在gridComplete事件中，我有以下代码（请注意，启用/禁用菜单项需要一些代码

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 });
     }
});

Answer 1

我为你准备了the demo，它演示了如何在jqGrid中使用Split Button。它显示

我将在稍后发布的演示的更详细说明。在检查代码之后，你可能会自己理解。