JQuery 上下文菜单与 JQuery DataTable 的集成

Question

我无法使上下文菜单正常工作。我想要的是当我单击任何行时，它会提醒我其中的第一个 td 文本。

这是我初始化数据表的代码：

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 中找到。活动 contextMenu 的焦点元素位于 options.$trigger[0]。现在我们可以找到

• options.$trigger[0].cellIndex 的 cellIndex（哪一列）
• table.row(options.$trigger[0].parentNode) 的基础数据表行
• real rowIndex（这很重要，因为 dataTable 可以按顺序进行排序）row.index()

这样就很容易在用户触发 contextMenu 的单元格上工作。如上面的删除示例：

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

- 删除单元格的内容。