Question

Tabulator 5.0 引用 tabEndNewRow 时出现错误

2021-12-21

330

javascript tabulator

我想使用函数 tabEndNewRow 创建新行并跳转到左外层单元格，但收到以下错误消息：

Uncaught ReferenceError: nav is not defined
    at Edit.js:91

新行已创建，但焦点未设置在新行中所需的单元格上。我在 4.9 版中使用 tabEndNewRow 没有任何问题。以下是我用来测试两个版本的 tabEndNewRow 行为的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Tabulator 5.0-->
    <link rel="stylesheet" href="tabulator-master_5_0/dist/css/tabulator.css">
    </style>
    <script src="tabulator-master_5_0/dist/js/tabulator.js"></script>

    <!-- Tabulator 4.9-->
    <!-- <link rel="stylesheet" href="tabulator-master_4_9/dist/css/tabulator.css"></style> -->
    <!-- <script src="tabulator-master_4_9/dist/js/tabulator.js"></script> -->

</head>

<body>
    <div id="table"></div>

    <script>
        var cols = [
            { title: "Cell 1", field: "c1", editor: "input" },
            { title: "Cell 2", field: "c2", editor: "input" }
        ];
        var data = [{}]

        var table = new Tabulator('#table', {
            columns: cols,
            data: data,
            tabEndNewRow: true
        })


    </script>
</body>

</html>

由于错误消息，我查看了 Edit.js 文件 - 以下是导航到所创建行的代码。

keybindingNavigateNext(e){
        var cell = this.currentCell,
        newRow = this.options("tabEndNewRow");

        if(cell){
            if(!this.navigateNext(e)){
                if(newRow){
                    cell.getElement().firstChild.blur();

                    if(newRow === true){
                        newRow = this.table.addRow({})
                    }else{
                        if(typeof newRow == "function"){
                            newRow = this.table.addRow(newRow(cell.row.getComponent()))
                        }else{
                            newRow = this.table.addRow(Object.assign({}, newRow));
                        }
                    }

                    newRow.then(() => {
                        setTimeout(() => {
                            nav.next();
                        })
                    });
                }
            }
        }
    }

Answer 1

我也遇到了同样的问题。我猜这肯定是个 bug，所以我为 Tabulator 5.0.8 创建了新的 bug 报告 https://github.com/olifolkerd/tabulator/issues/3523

可以使用的 jsFiddle 就在这里 https://jsfiddle.net/radek/Lkah397y/4/

    var cols = [
        { title: "Cell 1", field: "c1", editor: "input" },
        { title: "Cell 2", field: "c2", editor: "input" }
    ];
    var data = [{}]

    var table = new Tabulator('#table', {
        columns: cols,
        data: data,
        tabEndNewRow: true
    })

更新

此问题的修复已在 5,1 分支中，并将包含在下一个版本中