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 中初始化上下文菜单并且不确定你是否真的需要 "action"。以下立即生效：

$.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] 中。现在我们可以找到

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

这样可以很容易地处理用户触发上下文菜单的单元格。如上面的删除示例：

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

‑ 删除单元格的内容。

JQuery 上下文菜单与 JQuery DataTable 集成

JQuery Context Menu integration with JQuery DataTable

javascript

jquery

contextmenu

jquery-datatables