Удерживая нажатой кнопку мыши на заголовке 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(); 
    } 

(я знаю, что арг собирается быть пустыми, то есть больше как заполнитель, чем все остальное для теперь)

Это прекрасно работает для удержания на основном корпусе, но если я сделаю это на заголовке, так как у меня больше нет доступа к getCellFromEvent, и события мыши, которые я вызвал, не могут получить аргументы из любого места , Я не знаю, как я могу получить информацию о заголовке и в каком столбце я нахожусь. Есть ли в Slickgrid немного функциональности, которую я забыл? Я не заметил случая, на котором я мог подписаться.

У меня была мысль, что я могу связывать отдельные события как с заголовком, так и с телом, но я не уверен, что это все равно сможет получить нужную мне информацию. Глядя на теги, я вижу две возможности: 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

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