javascript - 动态地将行添加到 jquery treetable *不在根*

Question

我正在使用 treetable 插件，我想从之前从 xml 文件填充的 Taffy 数据库中动态加载一些数据行。我已经验证 loadBranch 在使用“null”作为节点的表的根上工作正常，但我似乎无法使其成为第一行的子节点。

HTML:

<table id='data_tree'>
<tr class="branch" data-tt-id="1">
<td>Studies</td>
</tr>
</table>

Javascript:

$(window).load(function(){
    studies_db().each( function (record,recordnumber) {
        $("#data_tree").treetable("loadBranch",1,
                            "<tr>"+
                            "<td><b>Accession:</b> "+record.accession+"<br>"+
                            "<b>Title:</b> "+record.title+"<br>"+
                            "<b>Authors:</b> "+record.authors+"<br>"+
                            "<b>Release date: </b>"+record.date+"<br>"+
                            "<b>Number of markers: </b>"+record.samples+"<br>"+
                            "</td></tr>")
         });
});

Answer 1

loadBranch 函数需要一个 Node 对象，而不是节点标识符。试试这个:

$(window).load(function(){
  studies_db().each( function (record,recordnumber) {
    var node = $("#data_tree").treetable("node", "1");

    $("#data_tree").treetable("loadBranch", node,
      "<tr data-tt-id='2'>"+
      "<td><b>Accession:</b> "+record.accession+"<br>"+
      "<b>Title:</b> "+record.title+"<br>"+
      "<b>Authors:</b> "+record.authors+"<br>"+
      "<b>Release date: </b>"+record.date+"<br>"+
      "<b>Number of markers: </b>"+record.samples+"<br>"+
      "</td></tr>");
  });
});

请注意，我还向 tr 添加了一个 data-tt-id 属性，否则 treetable 插件会报错。

我不得不承认，有些函数需要一个节点标识符，而另一些函数需要一个 Node 对象，这令人困惑……这是 future 应该简化的事情。