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

snz8szmq  于 2023-05-17  发布在  jQuery
关注(0)|答案(1)|浏览(96)

使用Jquery Tabulator Table,当父行的值改变时,我填充嵌套的子表。
当我在名为“Make”的第一个单元格中键入内容并按Tab键时,嵌套表已按预期填充,但它失去了单元格焦点。
当我们按Tab键时,选择光标应该移动并在另一个单元格中被选中。
但它失去了细胞焦点。请告诉我你的建议。

<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
    }];

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

    function Bind_tbl_BeamCageSchedule() {
        //define table
        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) {
                //create and style holder elements
                var holderEl = document.createElement("div");

                /// remove previous nested table object
                holderEl.classList.add("nested-table");
                var row_element = row.getElement();
                var previous_nested_table = row_element.getElementsByClassName("nested-table");
                for (let child of previous_nested_table) {
                    child.parentNode.removeChild(child);
                }

                var tableEl = document.createElement("div");

                var tableEl = document.createElement("div");
                var position = table.getRowPosition(row);
                tableEl.setAttribute("id", "tbl_ServiceHistory" + position);

                holderEl.style.boxSizing = "border-box";
                holderEl.style.padding = "10px 30px 10px 10px";
                holderEl.style.borderTop = "1px solid #333";
                holderEl.style.borderBotom = "1px solid #333";

                tableEl.style.border = "1px solid #333";

                holderEl.appendChild(tableEl);

                row.getElement().appendChild(holderEl);

                var subTable = new Tabulator(tableEl, {
                    layout: "fitColumns",
                    data: row.getData().serviceHistory,
                    columns: [
                        { title: "Date", field: "date", sorter: "date", editor: "input" },
                        { title: "Engineer", field: "engineer", editor: "input" },
                        { title: "Action", field: "actions", editor: "input" },
                    ]
                })
            },
        });

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

    function MainTable_CellEdited(cell, table) {
        var row = cell.getRow();
        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" },
            ];

            row.update({ serviceHistory: JSONDataForServiceHistory });
        }
    }

</script>

https://jsfiddle.net/vb4porsw/1/

3hvapo4f

3hvapo4f1#

最后我意识到
在我输入并按下Tab键后,下一个单元格被聚焦。
但由于整个表是重装
由于来自CellEditedrow.update({ serviceHistory: JSONDataForServiceHistory });代码
细胞聚焦丢失。
所以我使用renderComplete函数并重新聚焦到所需的单元格。
现在它起作用了。

var JSON_DataSet_Empty_Child = [{ date: "", engineer: "", actions: "" }];

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

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

function Bind_tbl_BeamCageSchedule() {
    //define table
    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 position = table.getRowPosition(row);

            //create and style holder elements
            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.borderBotom = "1px solid #333";
            
            /// remove previous nested table object                
            var row_element = row.getElement();
            var previous_nested_table = row_element.getElementsByClassName("nested-table");
            for (let child of previous_nested_table) {
                child.parentNode.removeChild(child);
            }

            var tableEl = document.createElement("div");                
            tableEl.setAttribute("id", "tbl_ServiceHistory" + position);
            tableEl.style.border = "1px solid #333";

            holderEl.appendChild(tableEl);

            row.getElement().appendChild(holderEl);

            var subTable = new Tabulator(holderEl, {
                layout: "fitColumns",
                data: row.getData().serviceHistory,
                columns: [
                    { title: "Date", field: "date", sorter: "date", editor: "input" },
                    { title: "Engineer", field: "engineer", editor: "input" },
                    { title: "Action", field: "actions", editor: "input" },
                ]
            });
        },
    });

    var LastEditedCell_ParentTable = null;
    table.on('cellEdited', (cell) => {
        MainTable_CellEdited(cell, table);
        LastEditedCell_ParentTable = cell;
    });
    
    // Re-focus the cursor after the table is fully loaded
    table.on("renderComplete", function () {
        if (LastEditedCell_ParentTable) {
            var cell = LastEditedCell_ParentTable;
            var row = cell.getRow();

            var currentColumn = cell.getColumn();
            var nextColumn = currentColumn.getNextColumn();

            if (nextColumn) {
                var nextCell = row.getCell(nextColumn.getField());
                nextCell.edit();
                nextCell.getElement().focus();
            }
        }       
    });
}

function MainTable_CellEdited(cell, table) {
    var row = cell.getRow();
    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" },
        ];

        row.update({ serviceHistory: JSONDataForServiceHistory });
    }
}

https://jsfiddle.net/qz1kpe2j/

相关问题