Question

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

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

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

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

我认为树中每个<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";
},

Fancytree - 将新项添加到树节点（日期，备注等）

1 个答案: