Question

我正在使用bootstrap 3和Asp.net gridview。我使用此解决方案example in fiddle

为我的gridview创建了一个上下文菜单

<table id="myTable" class="table table-hover">

我的问题是我有一个嵌套网格或多级网格。我希望每个级别都有不同的上下文菜单。这个解决方案是否可行。

Answer 1

是的，您可以为页面上的不同表格设置不同的上下文菜单，这只是您处理它的方式。

这里有两个选项，一个简单，一个更复杂。

1：多个选择器

只需更改调用contextMenu的jQuery选择器即可。下面是一个示例，它显示了第一个表和第二个嵌套表的不同上下文菜单：http://jsfiddle.net/Sly_cardinal/46sHX/1/

// Only add this context menu to cells that are
// a direct descendent of #myTable
$("#myTable > tbody > tr > td").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function (invokedOn, selectedMenu) {
        var msg = "You selected the menu item '" + selectedMenu.text() +
            "' on the value '" + invokedOn.text() + "'";
        alert(msg);
    }
});

// Only add this context menu to cells that are in a table
// that is nested inside #myTable
$("#myTable td > table td").contextMenu({
    menuSelector: "#contextMenu2",
    menuSelected: function (invokedOn, selectedMenu) {
        var msg = "You selected the menu item '" + selectedMenu.text() +
            "' on the value '" + invokedOn.text() + "'";
        alert(msg);
    }
});

2：动态menuSelector

更复杂的选项需要更改上下文菜单插件，以允许menuSelector属性成为接收单击元素的函数，并返回应显示的上下文菜单的选择器。

以下是更改后的contextMenu插件：

(function ($, window) {

    $.fn.contextMenu = function (settings) {

        return this.each(function () {
            var selector;

            // Open context menu
            $(this).on("contextmenu", function (e) {
                selector = $(getMenuSelector(e, settings.menuSelector))

                //open menu
                $(selector)
                    .data("invokedOn", $(e.target))
                    .show()
                    .css({
                        position: "absolute",
                        left: getLeftLocation(e, selector),
                        top: getTopLocation(e, selector)
                    });

                //add click listener on menu
                ContextMenuClickHandler();

                return false;
            });

            // click handler for context menu
            function ContextMenuClickHandler() {
                $(selector)
                    .off('click')
                    .on( 'click', function (e) {
                        $(this).hide();

                        var $invokedOn = $(this).data("invokedOn");
                        var $selectedMenu = $(e.target);

                        settings.menuSelected.call($(this), $invokedOn, $selectedMenu);
                });

            }

            //make sure menu closes on any click
            $(document).click(function () {
                $(selector).hide();
            });
        });

        function getMenuSelector(e, menuSelector){
            var selector = menuSelector;
            if ($.isFunction(menuSelector)){
                selector = menuSelector.call(null, e);
            }
            return selector;
        }

        function getLeftLocation(e, selector) {
            var mouseWidth = e.pageX;
            var pageWidth = $(window).width();
            var menuWidth = $(selector).width();

            // opening menu would pass the side of the page
            if (mouseWidth + menuWidth > pageWidth &&
                menuWidth < mouseWidth) {
                return mouseWidth - menuWidth;
            } 
            return mouseWidth;
        }        

        function getTopLocation(e, selector) {
            var mouseHeight = e.pageY;
            var pageHeight = $(window).height();
            var menuHeight = $(selector).height();

            // opening menu would pass the bottom of the page
            if (mouseHeight + menuHeight > pageHeight &&
                menuHeight < mouseHeight) {
                return mouseHeight - menuHeight;
            } 
            return mouseHeight;
        }

    };
})(jQuery, window);

$("#myTable td").contextMenu({
    menuSelector: function(e){
        // Do something with the clicked element to work out what to show
        var selector = "#contextMenu";
        if ($(e.target).closest('table').is('table table')){
            selector = '#contextMenu2';
        }
        return selector;
    },
    menuSelected: function (invokedOn, selectedMenu) {
        var msg = "You selected the menu item '" + selectedMenu.text() +
            "' on the value '" + invokedOn.text() + "'";
        alert(msg);
    }
});

这是一个显示它有效的小提琴：http://jsfiddle.net/Sly_cardinal/d8EfA/

我建议您浏览原始版本和修改后的版本以查看其工作原理。

使用Bootstrap 3下拉菜单作为多级asp网格的上下文菜单

1 个答案: