1

[为清楚起见而编辑（我希望！）]

我已经使用 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)

行上下文处理程序

    // 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 回调中手动构建一些超级基本的东西，但我讨厌重新发明轮子（不是吗？）所以我希望我在这里错过了一些非常基本的东西。 ...

任何想法不胜感激！

肖恩

4

1 回答 1

3

更新

从 4.7 版开始，现在在 Tabulator 中内置了菜单功能。您可以使用rowContextMenu选项对其进行配置：

var table = new Tabulator("#example-table", {
    rowContextMenu:[
        {
            label:"Delete Row",
            action:function(e, row){
                row.delete();
            }
        },
    ]
});

查看菜单文档以获取有关如何使用这些功能的完整详细信息

原始答案

首先，我建议在rowFormatter或cellFormatter中使用您的上下文插件并将元素传递给插件而不是选择器，这样您的所有回调都在范围内具有行组件。也因为 Tabulator 使用虚拟 DOM 尝试绑定到表内的行，只会获得当前可见的行，而不是当前滚动出屏幕的行

如果这不可能，那么您可以传递该行的 Jquery DOM 元素，您应该能够在您的上下文插件中访问该元素到getRow函数中以返回该行的行组件。

在这种情况下，我相信在上下文插件的回调函数的上下文中：

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

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

总的来说，我会推荐使用rowFormatter，因为它会让你的生活更轻松。

于 2018-09-25T17:18:41.170 回答