Question

[为清晰起见，编辑（希望如此！）]

我已经使用Tabulator已有一段时间了（即将升级到4.0！），所以我认为我对基础知识有一定的了解，并且非常喜欢！

在这种情况下，我正在使用一张桌子来存放候补名单。用户（内部）可能需要在任何给定的行上触发几个动作之一，并根据需要定位该行或该行中的数据。在这种情况下，我正在寻找右键单击上下文菜单的情况。

我能够通过rowContext回调捕获右键单击事件，并提取数据（row.getData（）等）以立即采取操作，例如console.log（）等。

制表器配置：

            waitListName = "waitlist" + bayID;
            console.log("Creating waitlist:", waitListName);

            let column_array = [];
            column_array.push({id: 1, title:"Index", field:"index", align:"center", headerSort: false, width:40});
            column_array.push({id: 2, title:"Name", field:"name", align:"center", headerSort: false, width:100});
            column_array.push({id: 3, title:"Qty", field:"throwers", align:"center", headerSort: false, bottomCalc: "sum" ,width:40});
            column_array.push({id: 4, title:"Listed", field:"waitlisted", align:"center", headerSort: false, width:60});
            column_array.push({id: 5, title:"Waited", field:"waittime", align:"center", headerSort: false, width:60});
            column_array.push({id: 5, title:"ETA", field:"eta", align:"center", headerSort: false, width:60});

           // Calculate width of tabulator table
            let table_width = 0;
            column_array.forEach ( row => {
                table_width += row.width;
            })

            // Define tabulator table config                
            let tabulator_config = {
                layout: "fitData",
                responsiveLayout:true,
                columns: column_array,
                movableRows: true,
                rowMoved: rowMovedHandler,
                rowContext: waitlistTableContextMenu
            }

            // Creat new tabulator table div
            let $newdiv = $("<div/>")
                .attr("id", waitListName)
                .addClass("waitlist")
                .css({
                        width: table_width + "px",
                    })
                .appendTo('#waitlist_container');

            // create tabulator in new table div
            $newdiv.tabulator(tabulator_config)

rowContext处理程序

    // define context menu for a waitlist table
    function waitlistTableContextMenu(e,row) {
        let data = row.getData();
        console.log("Right click in waitlist!");
        //console.log(e);
        //console.log(row);
        //console.log(data);

        e.preventDefault(); // prevent the browsers default context menu form appearing.
    }

通过将其锚定到 .tabulator-row 类，我还能够创建基本的上下文菜单并将其附加到各个表行。

注意：我使用的是jQuery-contextMenu库-https://swisnl.github.io/jQuery-contextMenu/demo.html-但从历史上看，我有些混乱，它们大多以类似的方式工作

    $.contextMenu({
        selector: '.tabulator-row',
        build: function($triggerElement, e) {
            console.log($triggerElement);
            return {
                callback: function(key, options) {
                    var m = "clicked: " + key;
                    console.log(m); 
                    console.log(options);
                },
                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"},
                    "sep1": "---------",
                    "quit": {name: "Quit", icon: function(){
                        return 'context-menu-icon context-menu-icon-quit';
                    }}
                }
            }


        }
    });

以上所有方法均能成功运行，并且在右键单击一行时可以按预期获得上下文菜单。

我失败的地方是一旦选择了一个选项，便能够从上下文菜单回调中引用制表符行/行数据。

也许我只是在密密麻麻？：）

我正在使用动态菜单构建选项（很有趣，称为“构建”），该选项捕获触发元素并允许在调用时构建菜单结构，但是，当引用该元素时，我显然正在获取基础表制表器rowDiv的元素/结构

jQuery.fn.init [div.tabulator-row.tabulator-selectable.tabulator-row-even]
0: div.tabulator-row.tabulator-selectable.tabulator-row-even.context-menu-active
accessKey: ""
align: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 2}
attributes: NamedNodeMap {0: class, 1: role, 2: style, class: class, role: role, style: style, length: 3}
autocapitalize: ""
baseURI: "http://tetris.local/walkins2.html"
childElementCount: 6
childNodes: NodeList(6) [div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell]
children: HTMLCollection(6) [div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell]
classList: DOMTokenList(4) ["tabulator-row", "tabulator-selectable", "tabulator-row-even", "context-menu-active", value: "tabulator-row tabulator-selectable tabulator-row-even context-menu-active"]
className: "tabulator-row tabulator-selectable tabulator-row-even context-menu-active"
clientHeight: 23
clientLeft: 0
clientTop: 0
clientWidth: 360
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
firstChild: div.tabulator-cell
firstElementChild: div.tabulator-cell
hidden: false
id: ""
innerText: "2Aurelia211:09 am31:02 pm"
.
.
.

虽然我可以看到一些数据元素（innerText等），但没有一种优雅的提取方法。

或者，我可以在Tabulator rowContext回叫中手动快速构建一些超级基础的东西，但是我讨厌重新发明轮子（不是所有人吗？），所以我希望我确实缺少了一些东西基本在这里。...

感谢任何想法！

肖恩

Answer 1

那肯定是可行的。

首先，我建议您在 rowFormatter 或 cellFormatter * 内使用您的上下文插件，并将元素传递给插件，而不是选择器，这样，您所有的回调都在作用域中包含 row 组件。就像Tabulator使用虚拟DOM试图绑定到表中的行一样，只会得到当前可见的行，而不是当前从屏幕上滚动出来的行

如果无法实现，则可以将该行的Jquery DOM元素传递给 getRow 函数，以便您可以在上下文插件中访问该tou返回该行的行组件。

在这种情况下，我认为它位于上下文插件的回调函数的 this 上下文中：

callback: function(key, options) {
     row = $("#example-table").tabulator("getRow", $(this));
},

尽管如果您使用的是3.5.x版，在某些情况下，基于元素的查找可能会出现问题，因此您可能需要将其移至4.0版。

总体而言，我会建议使用 rowFormatter ，因为这样会使您的生活更加轻松。

从rowContext回调中调用带有目标行数据的上下文菜单

1 个答案: