CODEWITHSUNDEEP
javascriptjqueryhtmljstree
inuryyev
inuryyev

Reputation: 153

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

I want to add button to node. I have jstree node. It has name : node.text = "Books" . Then I added button to node name like this node.text = "<button>Search</button>"+node.text . It shows button with name. But there is problem. When I want to rename this node, it shows also button html. How can i solve this problem?

Picture here

Upvotes: 1

Views: 3508

Answers (2)

inuryyev
inuryyev

Reputation: 153

I created plugin for button.

It is plugin for jstree library. It places button near to node. You should places this code before initialize your 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);

Upvotes: 1

romph
romph

Reputation: 487

There is maybe a better way, but since the tags are always the same you can format the html tag and content

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>

Upvotes: 1

Related Questions