Question

我无法使Context Menu正常工作。我想要的是当我点击任何一行时，它会提醒我第一个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中初始化上下文菜单，而不确定您是否确实需要＆＃34;操作＆＃34;。以下工作马上开始：

$.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"},         
    }
});

演示 - ＆gt;的 http://jsfiddle.net/w0p6jz0n/

行动类型可在key中找到。活动contextMenu的焦点元素位于options.$trigger[0]。现在我们可以找到

options.$trigger[0].cellIndex
的cellIndex（哪一列）
基础dataTables排table.row(options.$trigger[0].parentNode)

真实的 rowIndex（由于dataTable可行地排序，因此很重要）row.index()

通过它可以很容易地处理用户触发contextMenu的单元格。如上面的删除示例：

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

- 删除单元格的内容。

JQuery Context Menu与JQuery DataTable的集成

1 个答案: