Question

我用它作为灵感和参考

Use Bootstrap 3 dropdown menu as context menu

How to get id like "invokedOn" text by a right click event with Bootstrap ContextMenu?

我无法弄清楚如何转移我的表变量＆＃34; FlyID＆＃34;到选定的＆＃34;上下文菜单＆＃34;。我们的想法是使用＆＃34; FlyID＆＃34;选择菜单项时，将值作为参数。

我已尝试过以下代码而没有成功（以及其他一些方法）。

<table id="myTable" class="table table-hover">
<thead>
    <tr class="flightclm" FlyID="TY56">
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
</thead>
<tbody>
    <tr class="flightclm" FlyID="ER45">
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr class="flightclm" FlyID="OP23">
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr class="flightclm" FlyID="JK23">
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
</tbody>
</table>

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

$(document).ready(function () {

  $.fn.contextMenu = function (settings) {

    return this.each(function () {

        // Open context menu
        $(this).on("contextmenu", function (e) {
            //open menu
            $(settings.menuSelector)
                .data("invokedOn", $(e.target))
                .show()
                .css({
                    position: "absolute",
                    left: getLeftLocation(e),
                    top: getTopLocation(e)
                })
                .off('click')
                .on('click', function (e) {
                    $(this).hide();

                    var $invokedOn = $(this).data("invokedOn");
                    var $selectedMenu = $(e.target);
                    var $flightID = $(this).data("invokedOn").find('.flightclm').attr('FlyID');

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

            return false;
        });

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

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

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

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

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

};

$("#myTable td").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu, flightID) {
    var msg = "You selected the menu item '" + selectedMenu.text() +
        "' on the value '" + invokedOn.text() + "' and flightID : '" + flightID + "'  ";
    alert(msg);
}
});

Answer 1

搞定了!!

我预计“来电者”将是＆lt; TR>但自然是我的＆lt; TD＆gt;呼叫，所以我需要解决呼叫者父母＆lt; TD＆gt;。我改变了

var $flightID = $(this).data("invokedOn").find('.flightclm').attr('FlyID');

要

var $flightID = $(this).data("invokedOn").closest('tr').attr('FlyID');

带变量的Bootstrap Context菜单

1 个答案: