slickgrid - 在 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 并且我调用的鼠标事件无法从任何地方获取参数，我不确定如何我可以获得有关标题和我所在列的信息。Slickgrid 中是否有一些我忽略的功能？我没有注意到我可以订阅的 mousedown 事件。

我有一个想法，我可以将单独的事件绑定(bind)到标题和正文，但我不确定这是否仍然能够获得我需要的信息。查看标签，我看到了两种可能性: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

试试这样的东西( 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):

The event object is valid only for the duration of the event. After it returns you can't expect it to remain unchanged. In fact, the entire native event object (event.originalEvent) cannot be read in IE6/7/8 after the event has passed--it's gone and will throw an error if you try to access it. If you need an unchanging copy of some event data, make one.