Удерживая нажатой кнопку мыши на заголовке SlickGrid, чтобы получить информацию о столбце

Я пытаюсь сделать специальное меню всплывающим в 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, который имеет идентификатор (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, но решил, что это возможно.

Спасибо за любые предложения!

2 2
slickgrid

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 после того, как событие прошло-он исчез и выдаст ошибку, если вы попытаетесь получить к нему доступ. Если вам нужен неизменная копия некоторых данных о событиях, сделайте одну.

2

Я получил кое-что, что работает, на данный момент, с помощью идеи Мотти (не знал о "ближайшем" в 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;
    }

Спасибо!

1