2

当用户按住鼠标按钮一段时间时，我试图在 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 事件。

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

感谢您的任何建议！

4

2 回答 2

2

试试这样的东西（演示）：

$(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（事件对象），那是因为这个（参考）：

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

于 2013-05-23T14:58:47.633 回答
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;
    }

谢谢！

于 2013-05-24T14:24:40.420 回答