Интеграция контекстного меню JQuery с JQuery DataTable

Question

Я не могу заставить контекстное меню работать. То, что я хочу, - это когда я щелкнул любую строку, он предупредил меня о первом тексте td.

Это мой код при инициализации мой DataTable:

var init_item_seized_tbl = function init_item_seized_tbl(){ 
    $('#item_seized_tbl').DataTable({ 
     "autoWidth": false, 
     "aoColumnDefs": [ 
      { "bSortable": false, "aTargets": [ 4 ] }, 
      { "sWidth": "20%", "aTargets": [ 0 ] }, 
      { "sWidth": "40%", "aTargets": [ 1 ] }, 
      { "sWidth": "10%", "aTargets": [ 2 ] }, 
      { "sWidth": "20%", "aTargets": [ 3 ] }, 
      { "sWidth": "10%", "aTargets": [ 3 ] }, 
     ], 
     "fnCreatedRow" : function(nRow, aData, iDataIndex){ 
      $(nRow).addClass('item-context'); 
     }, 
     "fnRowCallback" : function(nRow, aData, iDisplayIndex, iDisplayIndexFull){ 
      console.log('fnRowCallback'); 
      $('table#item_seized_tbl tr').on('mouseenter', function() {  
       $(this).contextMenu({ 
        selector: '.item-context', 
        callback: function(key, options) { 
         //var m = "clicked: " + key; 
         //window.console && console.log(m) || alert(m); 
        }, 
        items: { 
         "edit": {name: "Edit", icon: "edit"}, 
         "cut": {name: "Cut", icon: "cut"}, 
         "copy": {name: "Copy", icon: "copy"}, 
         "paste": {name: "Paste", icon: "paste"}, 
         "delete": {name: "Delete", icon: "delete"},   
        } 
       }, 
       function (action, el, pos) { 
        alert(
         'Action: ' + action + '\n\n' + 
         'Element ID: ' + $(el).attr('id') + '\n\n' + 
         'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' + 
         'X: ' + pos.docX + ' Y: ' + pos.docY + ' (relative to document)\n\n'    
        ); 
       } 
       ); 
      });  
     } 
    }); 
} 

Проблема заключается в контекстное меню не отображается.

Я пробовал другой подход, отделяя инициализацию контекстного меню. Но я понятия не имею, как обрабатывать события и предупреждать меня о первом td в строке.

$.contextMenu({ 
    selector: '.item-context', 
    callback: function(key, options) { 
     var m = "clicked: " + key; 
     window.console && console.log(m) || alert(m); 
    }, 
    items: { 
     "edit": {name: "Edit", icon: "edit"}, 
     "cut": {name: "Cut", icon: "cut"}, 
     "copy": {name: "Copy", icon: "copy"}, 
     "paste": {name: "Paste", icon: "paste"}, 
     "delete": {name: "Delete", icon: "delete"},   
    } 
}); 

Ваши ответы были бы весьма полезными. Благодаря!

Answer 1

Возможно, вы делаете это слишком сложным? Не могу понять, почему вы должны инициализировать контекстное меню в fnRowCallback и не уверены, что вам действительно нужно «действие». Следующие работы срочно:

$.contextMenu({ 
    selector: '#example tbody td', 
    callback: function(key, options) { 
     var cellIndex = parseInt(options.$trigger[0].cellIndex), 
      row = table.row(options.$trigger[0].parentNode), 
      rowIndex = row.index(); 

     switch (key) { 
      case 'edit' : 
       //edit action here 
       break; 
      case 'cut' : 
       //cut action here 
       break; 
      //... 
      case 'delete' : 
       table.cell(rowIndex, cellIndex).data('').draw(); 
       break; 
      default : 
       break; 
     }    
    }, 
    items: { 
     "edit": {name: "Edit", icon: "edit"}, 
     "cut": {name: "Cut", icon: "cut"}, 
     "copy": {name: "Copy", icon: "copy"}, 
     "paste": {name: "Paste", icon: "paste"}, 
     "delete": {name: "Delete", icon: "delete"},   
    } 
}); 

демо ->http://jsfiddle.net/w0p6jz0n/

Тип действия находится в key. Элемент в фокусе для активного контекстаMenu находится в options.$trigger[0]. Теперь мы можем найти

• в cellIndex (что столбец) по options.$trigger[0].cellIndex
• лежащий в основе DataTables строки по table.row(options.$trigger[0].parentNode)
• в реальной RowIndex (что очень важно, так как DataTable Propably сортируется) по row.index()

При этом легко работать с ячейками, которые пользователь запускает в контекстном режиме. В качестве примера удаления выше:

case 'delete' : 
    table.cell(rowIndex, cellIndex).data('').draw(); 
    break; 

- удаляет содержимое ячейки.