fancytree - 将按钮添加到fancytree 节点以删除/移除该节点？

Question

我在任何地方都找不到这样做的例子，尽管我可以发誓我过去见过一个。

我想在fancytree中的节点上添加一个按钮，以便在将鼠标悬停在该节点上(或者可能选择它时)时，按钮会显示(例如，红色圆圈上的白色x)并单击它会删除/删除该节点.在所有其他时间，节点的删除按钮应该是隐藏的。

我一直无法找到任何类型的示例，其中将自定义链接或按钮添加到 Fantasytree 节点 - 也许这是不可能的，或者我只是使用了错误的搜索词？

编辑:我找到了一种通过将 html 附加到标题字符串来添加可点击按钮的方法:

title: component.name() + "<span class='deleteButton'><a href='#' data-bind='click: myfunction'><img src='../../Content/images/deleteIcon.png' /></a></span>",

并通过向我的站点文件添加一些自定义 css:

span.fancytree-node span.deleteButton {
    display: none;
}
span.fancytree-active span.deleteButton {
    margin-left: 10px;
    display: inline-block;
}

但这会将按钮添加到标题文本中，因此在事件时会突出显示标题。如果有办法将其添加到标题文本的 OUTSIDE 节点会更好。这可能是马丁吗？

Answer 1

$("#tree").fancytree({

source: [...],

renderNode: function (event, data) {
    var node = data.node;
    var $nodeSpan = $(node.span);

    // check if span of node already rendered
    if (!$nodeSpan.data('rendered')) {

        var deleteButton = $('<button type="button" class="btn">delete node</button>');

        $nodeSpan.append(deleteButton);

        deleteButton.hide();

        $nodeSpan.hover(function () {
            // mouse over
            deleteButton.show();

        }, function () {

            // mouse out
            deleteButton.hide();
        })

        // span rendered
        $nodeSpan.data('rendered', true);
    }
}
});