在 SlickGrid 标题上按住鼠标按钮以获取列信息

Question

当用户按住鼠标按钮一段时间时，我试图在 Slick Grid 中弹出一个特殊菜单。菜单必须专门与该列相关，因此我需要以某种方式从该列中检索信息。由于在按住鼠标按钮期间会出现弹出窗口，因此我不能使用 onclick 事件。

我确实有一些我用来使网格主体工作的代码：

    // Attach the mousedown and mouseup functions to the entire grid
    $(document).ready(function () {
        $("#myGrid").bind("mousedown", function (e, args) {
            var event = e;
            timer = setTimeout(function () { heldMouse(event, args); }, 500);
        })
        .bind("mouseup", function () {
            clearTimeout(timer);
        });
    });

    function heldMouse(e, args) {
            // if header click - 
            // showHeaderContextMenu(e, args)
            // else
            showContextMenu(e);
            mouseHeldDown = false;
    }

    // Displays context menu
    function showContextMenu(e) {
        var cell = grid.getCellFromEvent(e);
        grid.setActiveCell(cell.row, cell.cell);

        $("#slickGridContextMenu")
                  .css("top", e.pageY - 5)
                  .css("left", e.pageX - 5)
                  .show();
    }

（我知道 args 将是空的，它现在更多的是作为占位符而不是其他任何东西）

这对于按住主体非常有效，但是如果我在标题上执行此操作，因为我不再可以访问 getCellFromEvent 并且我调用的鼠标事件无法从任何地方获取 args，我'我不确定如何获取有关标题和我所在列的信息。Slickgrid 中是否有一些我忽略的功能？我没有注意到可以订阅的 mousedown 事件。

我曾想过我可以将单独的事件绑定到标题和正文，但我不确定这是否仍能获得我需要的信息。查看标签，我看到了两种可能性：slick-header-column，它有一个 id (slickgrid_192969DealNbr)，但我不确定如何可靠地删除该数字（它来自哪里？），或者 slick-column-name ，我可以从该标签中获取 html，但有时这些名称会被更改，除非我绝对必须这样做，否则我宁愿不处理它。这就是我所指的：

<DIV id=slickgrid_192969OrdStartDate_ATG title="" class="ui-state-default slick-header-column" style="WIDTH: 74px">
<SPAN class=slick-column-name>
<SPAN style="COLOR: green">OrdStartDate</SPAN></SPAN><SPAN class=slick-sort-indicator></SPAN>
<DIV class=slick-resizable-handle></DIV></DIV>

另外，我有这个：

        grid.onHeaderContextMenu.subscribe(function (e, args) {
            e.preventDefault();
            // args.column - the column information

            showHeaderContextMenu(e, args);
        });

有没有办法让我可以从鼠标按住方法触发这个事件并接收带有列名的参数？这只是一个想法，我不太确定触发如何与 SlickGrid/JQuery 一起工作，但我认为这是可能的。

感谢您的任何建议！

Answer 1

现在，在 Mottie 的想法的帮助下，我得到了一些可行的方法（不知道 jquery 中的“最接近”）。它并不优雅，但就这样吧。

这是其中一个列标签的结构：

<DIV id=slickgrid_132593DealNbr title="" class="ui-state-default slick-header-column slick-header-column-sorted" style="WIDTH: 49px">
<SPAN class=slick-column-name>DealNbr</SPAN>
<SPAN class="slick-sort-indicator slick-sort-indicator-asc"></SPAN>
<DIV class=slick-resizable-handle></DIV></DIV>

这里是获取它的调用。

    $(document).ready(function () {
        $("#myGrid").bind("mousedown", function (e) {
            var event = e;
            timer = setTimeout(function () { heldMouse(event); }, 500);
        })
        .bind("mouseup", function () {
            clearTimeout(timer);
            $("body").one("click", function () { cleanup(); });
        });
    });

    function heldMouse(e) {
        // If the click was not on one of the headers, it won't find this
        if ($(e.target).closest('.slick-header-column').html() != null) {
            var $foundColumnHeader = $(e.target).closest('.slick-header-column');
            // columns being used to populate SlickGrid's columns
            var held_col = columns[$foundColumnHeader.index()];
            showHeaderContextMenu(e, { column: held_col });
        }
        else {
            showContextMenu(e);
        }
        mouseHeldDown = false;
    }

谢谢！

Answer 2

改用这样的方法 (demo)：

$(function () {
    var timer;
    $("#myGrid")
        .bind("mousedown", function (e, args) {
            var event = e; // save event object
            timer = setTimeout(function(){
                doSomething(event, args);
            }, 1000);
        })
        .bind("mouseup mousemove", function () {
            clearTimeout(timer);
        });
});

function doSomething(e, args){
    alert('YAY!');
};

如果你想知道我为什么保存e（事件对象），就是因为这个（ref）：

事件对象仅在事件期间有效。在它返回后，你不能指望它保持不变。事实上，整个原生事件对象 (event.originalEvent) 在事件通过后无法在 IE6/7/8 中读取——它已经消失，如果您尝试访问它会抛出错误。如果您需要一些事件数据的不变副本，请制作一个。