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

Question

我正在使用 bootstrap 3 和 Asp.net gridview。我使用此解决方案为我的 gridview 创建了一个上下文菜单 example in fiddle

<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 属性成为一个函数，该函数接收被单击的元素并返回应显示的上下文菜单的选择器。

这是修改后的 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);
    }
});

这是一个显示它工作的 fiddle :http://jsfiddle.net/Sly_cardinal/d8EfA/

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