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,其中的JSON具有Google Tasks API结构,该结构填充了Fancytree。

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

如果您通过以下链接进入JSON:

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

..您将看到ID为MTYwNzEzNjc2OTEyMDI1MzcwNzM6ODUwNjk4NTgzOjg4ODk2MDI0MQ的任务中有一个due,其日期是我要添加到树节点的日期。

同样在同一任务中,您将看到一个notes项目。这是我要添加到树节点的其他内容。

有什么想法吗?

提前致谢。

最佳答案

您可以将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>


或者,实现renderTitlerenderNode事件,并使用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";
},

08-25 10:15
查看更多