Tabulator

Question

在制表符 documentation/examples 中没有找到任何方法来做到这一点，我已经搜索了一段时间如何做这个非常基本的事情。

我看过这个 answer 但它依赖于 JQuery 我不知道而且我不能在我有限的环境中使用（另外，它似乎没有解决错位的 TREE分支和 [+]/[-] 树按钮）。

下面是我的（故障）纯 JS 代码，我希望它能正确执行：当您单击现有的 TREE 项目（但 TREE 附件、缩进和 [ +]/[-] 按钮发疯）。

据我所知，alert()显示的结果是正确的。这可能是 Tabulator 库错误吗？

<!DOCTYPE html>
<html lang="en">
<head><title>Tree</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://unpkg.com/tabulator-tables@4.5.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.0/dist/js/tabulator.min.js"></script>

<style>
body{margin:1.5%}
#treediv{width:300px;height:250px;font-size:1.6em;background:#777};
</style>

<script type="text/javascript">
function $def(variable) {return(typeof variable !== 'undefined')}

var count = 0; // item #
window.onload=function()
{
   var treedata = 
   [ {name:"Bob"}, {name:"Tom"}, 
     {name:"Jane", _children:[{name:"Eric"}]}, 
     {name:"John", _children:[{name:"Lin", _children:[{name:"Eva"}]}]} 
   ];

   var tree = new Tabulator("#tree", 
   {  height:"250px", layout:"fitColumns", headerVisible:false,
      data:treedata, dataTree:true, dataTreeChildIndent:25,
      dataTreeStartExpanded:true, selectable:1,
      columns: [ {field:'name'} ],
      rowClick:function(e, row)
      {
        var children = row.getData()["_children"];
        var nbr = $def(children) ? children.length : 0;
        count++;

        row.select();     
        var selectedRows = tree.getSelectedRows();
        var root = selectedRows[0].getTreeParent();
        if(root) 
        { var r = root; parents = 1;
          while(r){r = r.getTreeParent(); if(r){root = r}}
        } else root = selectedRows[0];

        if(!nbr) // easy case, define _children[]
        {
           row.update({_children:[{name:"pNEW" + count}]});
           alert(JSON.stringify(root.getData()));
        }
        else // _children[] already exists, add NEW ITEM
        {
           children.push({name:"cNEW" + count});
           row.update({_children:children});
           alert(JSON.stringify(root.getData()));
        }
      },
   });
}
</script>
</head><body>
   <div id="treediv"> <div id="tree"></div> </div>
</body></html>

Answer 1

由于 JSON 数组已正确更新 - 但渲染不佳，（丑陋的）解决方法只是在 rowClick:function(e, row){} 的末尾添加以下代码行：

rowClick:function(e, row){
  ...    
  tree.setData(tree.getData()); // make tree use new JSON array
}

然后有人提出了（可能）更好的 API 调用：

rowClick:function(e, row){
  ...    
  tree.redraw(true); // make tree use new JSON array
}

然而，它根本没有解决问题：tree.redraw() 有问题，可能是问题的根源。

使用我的变通方法，Tabulator 库正确地呈现了 TREE（证明我们的点击代码正在运行并且这是一个 Tabulator 错误）。

这可以安全地用作未来安全的变通方法（也就是说，如果您的 TREE 不是太大并且减慢强制刷新...）直到 Tabulator 库被修复。

Tabulator - 在任何层级添加 TREE 项

Tabulator - Adding TREE items at any hierachical level

treeview

insert