5

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

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

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

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

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

4

2 回答 2

6 
$("#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);
    }
}
});
于 2015-01-31T02:12:40.983 回答
0

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

于 2014-09-18T19:36:02.027 回答