添加按钮到fancytree节点删除/删除该节点？

Question

我无法在任何地方找到这样做的例子,虽然我可以发誓我曾经见过一个.

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

我一直无法找到任何将自定义链接或按钮添加到fancytree节点的示例 - 也许这是不可能的,或者我只是使用错误的搜索条件？

编辑:我找到了一种通过将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);
    }
}
});

Answer 2

我通常在这种情况下使用 css ':after' （https://developer.mozilla.org/de/docs/Web/CSS/::after）。如果这还不够，您可以随时调整“renderNode”事件中的标记。