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>
或者,实现
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";
},