IE11 中的 Tabulator select 编辑器错误

Question

我在使用 IE11 在 Tabulator 中跳出 select 编辑器时遇到问题。为了排除我的代码中的某些内容，我检查了 Tabulator 网站示例：Editable Data example

当从 select 编辑器中跳出时，呈现的列表仍然显示。在图像示例中，我已经从性别单元格中跳出，但列表并没有消失。 Chrome、Firefox 或 Edge 中不会发生这种情况。

关于如何解决这个问题有什么想法吗？

Answer 1

这看起来像是 Tabulator 在 IE 11 中的兼容性问题。您可以 open an issue 在 Tabulator GitHub 上请求修复它。

目前，作为解决方法，我们可以将 "tab" 键盘快捷键与 navNext 重新绑定，以避免在 IE 11 上出现此问题。您可以参考有关 [=13= 的文档].重新绑定 "tab" 的示例代码如下：

var table = new Tabulator("#example-table", {
    ...
    keybindings: {
        "navNext": "tab", 
    },
});

Answer 2

我解决了这个问题，并在 github repo https://github.com/olifolkerd/tabulator/issues/3125#issuecomment-769871958

中已经关闭的主题中添加了一个答案

有一个参数没有在制表符变量中声明。添加后，信息出现。那引起了我的困惑。我是否建议添加完整的脚本以便不错过 'data: tabledata' 参数？

那么示例代码将是这样的（大约）：

<Script> 
    //Create Date Editor
    var dateEditor = function(cell, onRendered, success, cancel){
        //cell - the cell component for the editable cell
        //onRendered - function to call when the editor has been rendered
        //success - function to call to pass the successfuly updated value to Tabulator
        //cancel - function to call to abort the edit and return to a normal cell
    
        //create and style input
        var cellValue = moment(cell.getValue(), "DD/MM/YYYY").format("YYYY-MM-DD"),
        input = document.createElement("input");
    
        input.setAttribute("type", "date");
    
        input.style.padding = "4px";
        input.style.width = "100%";
        input.style.boxSizing = "border-box";
    
        input.value = cellValue;
    
        onRendered(function(){
            input.focus();
            input.style.height = "100%";
        });
    
        function onChange(){
            if(input.value != cellValue){
                success(moment(input.value, "YYYY-MM-DD").format("DD/MM/YYYY"));
            }else{
                cancel();
            }
        }
    
        //submit new value on blur or change
        input.addEventListener("blur", onChange);
    
        //submit new value on enter
        input.addEventListener("keydown", function(e){
            if(e.keyCode == 13){
                onChange();
            }
    
            if(e.keyCode == 27){
                cancel();
            }
        });
    
        return input;
    };
    
    //define some sample data
    var tabledata = [
        {id:1, name:"Oli Bob", age:"12", col:"red", dob:"",car:true},
        {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982",car:true},
        {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982",car:true},
        {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980",car:true},
        {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999",car:true},
    ];
    
    //Build Tabulator
    var table = new Tabulator("#example-table", {
        height:311,
        data: tabledata,
        columns:[
            {title:"Name", field:"name", width:150, editor:"input"},
            //{title:"Location", field:"location", width:130, editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}},
            {title:"Age", field:"age", sorter:"number", hozAlign:"left", formatter:"progress", width:140, editor:true},
            //{title:"Gender", field:"gender", editor:"select", editorParams:{values:{"male":"Male", "female":"Female", "unknown":"Unknown"}}},
            //{title:"Rating", field:"rating",  formatter:"star", hozAlign:"center", width:100, editor:true},
            {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date", width:140, editor:dateEditor},
            {title:"Driver", field:"car", hozAlign:"center", editor:true, formatter:"tickCross"}//,
    
        ]//,
    });

</Script>

IE11 中的 Tabulator select 编辑器错误

Tabulator select editor buggy in IE11

internet-explorer

tabulator