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'事件中的标记。

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

2 个答案: