javascript - Fancytree - 将新元素添加到树节点(日期、注释等)

Question

Fancytree 有办法将新元素添加到树节点中吗？

在演示中，您只能看到显示的“标题”，但我想添加“日期”和“注释”。

我知道我可以使用表格扩展 和 renderColumns 来做到这一点但我想以不同的方式对信息进行排序，我无法仅使用 CSS 更改表格的线性结构。

我更喜欢使用 <div>或 <span>元素而不是 <table>对此进行排序并添加 CSS。

我认为每个 <li> 的 HTML 结构树中的元素将是完美的:

<li>
    <span class="fancytree-node fancytree-exp-n fancytree-ico-c">
        <span class="fancytree-expander"></span>
        <span class="fancytree-icon"></span>
        <span class="fancytree-title">Sub-item 4.1</span>
        <span class="fancytree-date">21-5-2015</span>
        <span class="fancytree-note">This is a note inside a Fancytree node</span>
    </span>
</li>

这里有一个带有 JSON 的 jsfiddle，带有填充 Fancytree 的 Google Tasks API 结构。

http://jsfiddle.net/prncw2sL/11/

如果您使用此链接进入 JSON:

http://res.cloudinary.com/neuropro/raw/upload/v1431196887/JSONGoogleTasksAIP_aevrz8.json

.. 你会在ID为MTYwNzEzNjc2OTEyMDI1MzcwNzM6ODUwNjk4NTgzOjg4ODk2MDI0MQ的任务中看到有一个 due带有我想添加到树节点的日期。

同样在同一任务中，您将看到 notes元素。这是我要添加到树节点的其他内容。

一些想法？

提前致谢。

Answer 1

您可以将 html 作为 node.title 传递，这样您就可以生成如下标记

<span class="fancytree-node fancytree-exp-n fancytree-ico-c">
    <span class="fancytree-expander"></span>
    <span class="fancytree-icon"></span>
    <span class="fancytree-title">
        <span class="ft-header">Sub-item 4.1</span>
        <span class="ft-date">21-5-2015</span>
        <span class="ft-note">This is a note inside a Fancytree node</span>
    </span>
</span>

或者实现 renderTitle 或 renderNode 事件并使用 jQuery 修改标记。

renderNode: function(event, data) {
    // Optionally tweak data.node.span
    $(data.node.span).text(">>" + data.node.title);
},
renderTitle: function(event, data) {
    // When defined, must return a HTML string for the node title
    return "new title";
},