带变量的引导上下文菜单答案

【问题标题】：Bootstrap Context menu with variable带变量的引导上下文菜单
【发布时间】：2015-05-24 23:33:32
【问题描述】：

我以此为灵感和参考

Use Bootstrap 3 dropdown menu as context menu

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

我不知道如何将我的表变量“FlyID”传输到选定的“上下文菜单”。这个想法是在选择菜单项时使用“FlyID”值作为参数。

我尝试了下面的代码但没有成功（以及其他一些方法）。

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

【问题讨论】：

标签： jquery twitter-bootstrap-3 contextmenu

【解决方案1】：

知道了！！

我原以为“调用者”是

，但自然是我的调用，所以我需要解决调用者父。我变了

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

到

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

【讨论】：