tabulator.js - scrollToRow() 在树上不起作用？

Question

我有一个 Tabulator.js 表。 此表是 treeview 使用的 dataTree 选项。 行在“id”列中具有唯一的 id。

scrollToRow() function 抛出以下错误：

未处理的拒绝滚动错误 - 找不到匹配的行

table = new Tabulator("#cutover_plan_table_container", {
            height:"500px",
            headerSort: false,
            data:hierarchical_cutover_obj,
            dataTree:true,
            dataTreeStartExpanded:true,
            dataTreeElementColumn:"name",
            dataTreeChildField:"outlineChildren",
            dataTreeBranchElement:false,
            dataTreeChildIndent:17,
            scrollToRowPosition: "center",
            index:"id", 
            virtualDom: true,
            virtualDomBuffer : true,
    
            columns:[
                {title:"", field:"id", align:"center",cssClass:"cutover_column_id"},
                {title:"UID", field:"uid"},
                {title:"Name", field:"name", responsive:0},
                {title:"Predecessor", field: "predecessor", width:150,formatter:function(cell, formatterParams, onRendered){
                    return '<a href="javascript:goToTableRow(' + cell.getValue() + ');">' + cell.getValue()+ '</a>, ';
                }}
            ]
    }); 
    
    
function goToTableRow(targetRow){
        table.scrollToRow(targetRow, "center", true);
} 

如果单击Predecessor单元格值，则会收到未处理的拒绝滚动错误 - 控制台上未找到匹配行错误。 如果它不是一棵树（dataTree: false ），那么滚动就像一个魅力。

Answer 1

首先，与您的原始问题稍有无关，这是触发滚动的一种非常糟糕的方法，您可以使用cellClick回调，然后您不需要自定义格式化程序或 function：

{title:"Predecessor", field: "predecessor", width:150, cellClick:function(e, cell){
    table.scrollToRow(cell.getValue(), "center", true);
}}

其次，问题的出现是因为您无法按 id 定位子行，查找仅适用于顶级数据。

如果您所做的只是尝试滚动到父行，那么您可以在行组件上使用getTreeParent function 并直接在其上调用scrollTo function。

{title:"Predecessor", field: "predecessor", width:150, cellClick:function(e, cell){
    var parent = cell.getTreeParent();

    if(parent){
        parent.scrollTo();
    }
}}