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

有没有办法让我可以通过鼠标控制方法触发此事件并接收带有列名的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）：

事件对象仅在事件持续时间内有效。它返回后你不能指望它保持不变。实际上，在事件过去之后，IE6 / 7/8中无法读取整个本机事件对象（event.originalEvent） - 它已经消失，如果您尝试访问它将会抛出错误。如果您需要一些事件数据的不变副本，请创建一个。

Answer 2

在Mottie的想法的帮助下，我得到了一些有用的东西（不知道＆＃34;最接近＆＃34;在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;
    }

谢谢！

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

2 个答案: