Tabulator - добавление предметов TREE на любом иерархическом уровне - PullRequest
Новая
       68

Tabulator - добавление предметов TREE на любом иерархическом уровне

0 голосов
/ 29 января 2020

Не найдя никакого способа сделать это в документации / примерах Табулятора, я некоторое время искал, как сделать эту самую основную вещь c.

Я видел этот ответ но он опирается на JQuery, которого я не знаю и не могу использовать в своей ограниченной среде (плюс, похоже, он не разрешает неуместные ветви TREE и кнопки [+] / [-] TREE).

Ниже приведен мой (некорректно работающий) чистый код JS, который я хотел бы видеть корректно выполняющим: он просто удаляет «НОВЫЙ» элемент, когда вы щелкаете по существующему элементу TREE (но вложениям TREE, отступам и [ Кнопки +] / [-] go гайки).

Насколько я могу судить, результат, отображаемый alert(), верен. Может ли это быть ошибкой библиотеки табулятора? 

<!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>

1 Ответ

0 голосов
/ 29 января 2020

Так как массив 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 не слишком большой и замедляет принудительное обновление sh ...), пока библиотека Tabulator не будет исправлена.

...