如何移动到新添加的行并随着 Tabulator 中数据的增长使滚动消失

Question

我有一个制表符。加载时，它将动态填充来自 ajax 调用的数据。我还有一个自定义添加按钮 add-new-task，可将新行添加到 table。

如何随着数据的增长tablediv展开div自动移动现在添加的行并使滚动条消失？

如果焦点转移到新添加行中 'Task Name' 列上的单元格编辑器，我也会很棒。

var workflowTasksTable = new Tabulator("#inputWorkflowTasks", {
    layout:"fitColumns",
    movableRows:true,
    pagination: false,
    columns:[
        {rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30, download:false},
        {title:"Task ID", field:"task_id", headerSort:false, editor:false, width:50, minWidth:50, resizable:false, visible:true, download:false},
        {title:"Task Name", field:"task_name", headerSort:false, editor:"input"},
        {title:"Task Abbreviation", field:"task_abbr", headerSort:false, editor:"input"},
        {formatter: actionsBtnList, title:"Action", headerSort:false, download:false, resizable:false},
    ],
});

// Action to be taken whenever the user clicks "Add Task"
$('#add-new-task').on('click', async function(e) {
    workflowTasksTable.addRow({})
    .then((row) => {
        workflowTasksTable.scrollToRow(row.getPosition(),"center");
    });
});

谢谢

Answer 1

我解决了我的问题。如果有人正在寻找相同的东西，希望这会有所帮助。

将布局从 fitColumns 更改为 fitDataTable 可以调整新行的 table，因为 table 在没有任何滚动的情况下增长。

对于第一个 editable 单元格，rowAdded 很有帮助。

// Action to be triggered when a new row is added
workflowTasksTable.on("rowAdded", function(row){
    setTimeout(function(){row.getCell("task_name").edit();},200);
});

如果没有超时，rowAdded 函数将不起作用，因为我想在呈现新行之前触发了回调，因此该行上不存在单元格组件。

使 table 随着数据增长调整高度的另一种解决方案是使用具有宽度规范和 div 样式的 fitData 布局：

var workflowTasksTable = new Tabulator("#inputWorkflowTasks", {
    index:"task_name",
    layout:"fitData",
    movableRows:true,
    pagination: false,
    columns:[
        {rowHandle:true, formatter:"handle", headerSort:false, frozen:true, width:30, minWidth:30, download:false},
        {title:"Task ID", field:"task_id", headerSort:false, editor:false, resizable:false, visible:false, download:false, htmlOutput:false},
        {title:"Task Name", field:"task_name", headerSort:false, editor:"input", validator:["required", "unique"], width:350, minWidth:100},
        {title:"Task Abbreviation", field:"task_abbr", headerSort:false, editor:"input", validator:["required", "unique", "maxLength:3"], width:206, minWidth:50},
        {formatter: actionsBtnList, title:"Action", headerSort:false, download:false, resizable:false, width:100},
    ],
    validationMode:"manual"
});

<div id="inputWorkflowTasks" aria-describedby="workflowTasksHelp" style="min-height: 100px;overflow: hidden;"></div>

如何移动到新添加的行并随着 Tabulator 中数据的增长使滚动消失

how to move to a newly added row and make the scroll disappear as the data grows in Tabulator

tabulator