Jquery Tabulator绑定嵌套表格后按Tab键丢失单元格焦点求助

问题场景 #

使用Tabulator构建嵌套表格，当在父行「Make」单元格输入内容并按下Tab键时，嵌套子表格成功填充数据，但单元格焦点丢失，未按预期移动到下一个单元格。

问题原因 #

row.update({ serviceHistory: ... })会触发rowFormatter重新执行，该过程中会删除原有嵌套表格DOM并重建新的表格元素，打断了Tab键默认的焦点切换逻辑，导致焦点丢失。

解决方案 #

核心思路是复用已有子表格实例，避免每次更新都重建DOM，具体实现如下：

修改后的代码示例 #

<div id="tbl_BeamCageSchedule"></div>

<script type="text/javascript">
    var JSON_DataSet_Empty_Child = [{ date: "", engineer: "", actions: "" }];

    var JSON_DataSet_Empty = [{
        id: 1, make: "", model: "", reg: "", color: "", serviceHistory: JSON_DataSet_Empty_Child, subTable: null
    }];

    $(document).ready(function () {        
        Bind_tbl_BeamCageSchedule();        
    });

    function Bind_tbl_BeamCageSchedule() {
        var table = new Tabulator("#tbl_BeamCageSchedule", {
            height: "100%",
            layout: "fitColumns",
            columnDefaults: {
                resizable: true,
            },
            data: JSON_DataSet_Empty,
            columns: [
                { title: "Make", field: "make", editor: "input" },
                { title: "Model", field: "model", editor: "input" },
                { title: "Registration", field: "reg", editor: "input" },
                { title: "Color", field: "color", editor: "input" },
            ],
            rowFormatter: function (row) {
                var rowData = row.getData();
                // 仅首次渲染时创建子表格
                if (!rowData.subTable) {
                    var holderEl = document.createElement("div");
                    holderEl.classList.add("nested-table");
                    holderEl.style.boxSizing = "border-box";
                    holderEl.style.padding = "10px 30px 10px 10px";
                    holderEl.style.borderTop = "1px solid #333";
                    holderEl.style.borderBottom = "1px solid #333";

                    var tableEl = document.createElement("div");
                    tableEl.style.border = "1px solid #333";
                    holderEl.appendChild(tableEl);
                    row.getElement().appendChild(holderEl);

                    // 创建子表格并存储到行数据中
                    var subTable = new Tabulator(tableEl, {
                        layout: "fitColumns",
                        data: rowData.serviceHistory,
                        columns: [
                            { title: "Date", field: "date", sorter: "date", editor: "input" },
                            { title: "Engineer", field: "engineer", editor: "input" },
                            { title: "Action", field: "actions", editor: "input" },
                        ]
                    });
                    rowData.subTable = subTable;
                    row.update(rowData); // 保存子表格实例到行数据
                }
            },
        });

        table.on('cellEdited', (cell) => {
            MainTable_CellEdited(cell);
        });
    }

    function MainTable_CellEdited(cell) {
        var row = cell.getRow();
        var rowData = row.getData();
        var cellvalue_make = row.getCell("make").getValue().trim();
        
        if (cellvalue_make.length > 0) {
            var JSONDataForServiceHistory = [
                { date: "22/05/2017", engineer: "Jimmy Brown", actions: "Aligned wheels" },
                { date: "11/02/2018", engineer: "Lotty Ferberson", actions: "Changed Oil" },
                { date: "04/04/2018", engineer: "Franco Martinez", actions: "Fixed Tracking" },
            ];
            // 直接更新子表格数据，不触发父行update
            rowData.subTable.setData(JSONDataForServiceHistory);
            // 可选：同步更新父行数据中的serviceHistory字段
            row.update({ serviceHistory: JSONDataForServiceHistory });
        }
    }
</script>

关键修改点 #

• 在父行数据中新增subTable字段存储子表格实例，避免重复创建DOM元素
• rowFormatter中添加判断逻辑，仅在首次渲染时创建子表格
• cellEdited事件中直接调用子表格的setData方法更新数据，避免触发父行update（若需保持数据同步，最后执行的row.update不会重复触发rowFormatter）

内容的提问来源于stack exchange，提问作者Frank Myat Thu