jqGrid 单元格内的 jQuery UI 菜单

Question

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

一切正常，除了菜单窗口出现在单元格内导致视觉效果不佳，即单元格高度增加为菜单窗口腾出空间。 查看以下屏幕截图以获得直观的解释（不要介意菜单项处于禁用状态）。

有什么方法可以让菜单窗口根据 z-index 出现在表格元素的顶部？

非常感谢您的宝贵帮助，社区 :)

根据评论请求进行编辑：

创建拆分按钮菜单的代码如下。首先是列模型标记

{ 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 内部使用拆分按钮。它显示

我稍后会发布有关演示的更详细说明。想必大家看完代码就明白了。