jstree 使用 html 将按钮添加到节点并使用上下文菜单重命名

Question

我想将按钮添加到节点。我有 jstree 节点。它的名称是：node.text = "Books"。然后我像这样将按钮添加到节点名称 node.text = "<button>Search</button>"+node.text 。它显示带有名称的按钮。但是有问题。当我想重命名此节点时，它还会显示按钮 html。我怎么解决这个问题？

Picture here

Answer 1

也许有更好的方法，但由于标签始终相同，您可以格式化 html 标签和内容

var d =  [{
                "id": "p1",
                "parent": "#",
                "text": "Parent-1"
              }, {
                "id": "p2",
                "parent": "#",
                "text": "Parent-2"
              }, {
                "id": "c1",
                "parent": "p2",
                "text": "Child 1"
              }, {
                "id": "c2",
                "parent": "p2",
                "text": "Child 2"
              }, ];
            
            $("#tree")
              .jstree({
                "core" : {
                    "data" : d,
                    "check_callback": true
                }
            });

            /* after the load of the tree but choose your event */
             $("#tree").on("loaded.jstree", function(){
                var select = document.getElementById("p2").getElementsByTagName("a")[0];
                var copy = select.getElementsByTagName("i")[0];
                var copyt = select.textContent;
                select.innerHTML= "";
                var btn = document.createElement("BUTTON");
                var t = document.createTextNode("CLICK ME");
                btn.appendChild(t);
                select.appendChild(copy);
                select.appendChild(btn);
                select.appendChild(document.createTextNode(copyt)); 
            });

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
        <link href="https://static.jstree.com/3.2.1/assets/dist/themes/default/style.min.css" rel="stylesheet">
    </head>
 <body>
     <div id="tree"></div>
    </body>
</html>

Answer 2

我为按钮创建了插件。

它是jstree 库的插件。它将按钮放置在节点附近。您应该在初始化 jstree 之前放置此代码。

(function ($, undefined) {  
        "use strict";
        var a_tag = document.createElement('a');
        var text = document.createTextNode("Button Text");
        a_tag.appendChild(text);
        a_tag.className = "jstree-selectListBtn";

        $.jstree.plugins.selectListBtn = function (options, parent) {
            this.bind = function () {
                parent.bind.call(this);
                this.element
                    .on("click.jstree", ".jstree-selectListBtn", $.proxy(function (e) {
                        e.stopImmediatePropagation();
                        var id = $(e.currentTarget).parent().attr('id');
                        $(e.target).parent().children('.jstree-anchor').trigger('click');
                        yourFunction(id); // Button on click function
                    }, this));
            };
            this.teardown = function () {
                this.element.find(".jstree-selectListBtn").remove();
                parent.teardown.call(this);
            };
            this.redraw_node = function (obj, deep, callback, force_draw) {
                obj = parent.redraw_node.call(this, obj, deep, callback, force_draw);
                if (obj) {
                    var node = tree.jstree(true).get_node(obj.id);
                    if (node) {
                        var tmp = a_tag.cloneNode(true);
                        obj.insertBefore(tmp, obj.childNodes[2]);
                    }
                }
                return obj;
            };
        };
    })(jQuery);

jstree 使用 html 将按钮添加到节点并使用上下文菜单重命名

jstree add button to node with html and rename with context menu

javascript

jquery

html

jstree