使用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>
1条答案
按热度按时间3hvapo4f1#
最后我意识到
在我输入并按下Tab键后,下一个单元格被聚焦。
但由于整个表是重装
由于来自
CellEdited
的row.update({ serviceHistory: JSONDataForServiceHistory });
代码细胞聚焦丢失。
所以我使用
renderComplete
函数并重新聚焦到所需的单元格。现在它起作用了。
https://jsfiddle.net/qz1kpe2j/