CODEWITHSUNDEEP
jstree
ndd
ndd

Reputation: 3071

jsTree customize <li> using the alternative JSON format along with AJAX

I am using the alternative JSON format along with AJAX to load data in tree. Now there is a new ask, I am required to add a new element at the end of <li> tag.

I have created sample URL to display what I am currently doing. Tree crated using alternative JSON format along with AJAX

enter image description here

And how the new LI should appear Tree created using hard coded HTML but shows how the LI should look like

Expected icon next to tree node

I think I should be able to do this if I use HTML Data but since the project is already live with JSON format this would require me to change a lot so before I start making this major change I just wanted to check if this is possible using JSON and AJAX format or not.

Upvotes: 1

Views: 754

Answers (1)

ndd
ndd

Reputation: 3071

So I got answer from Ivan - Answer

In short there is misc.js in the src folder which has question mark plugin, this is the best example of what I wanted to do.

I tweaked its code for my needs and here is the new code.

(function ($, undefined) {
    "use strict";
    var span = document.createElement('span');
    span.className = 'glyphicons glyphicons-comments flip jstree-comment'

    $.jstree.defaults.commenticon = $.noop;
    $.jstree.plugins.commenticon = function (options, parent) {
        this.bind = function () {
            parent.bind.call(this);            
        };
        this.teardown = function () {
            if (this.settings.commenticon) {
                this.element.find(".jstree-comment").remove();
            }
            parent.teardown.call(this);
        };
        this.redraw_node = function (obj, deep, callback, force_draw) {
            var addCommentIcon = true;
            var data = this.get_node(obj).data;
            //....Code for deciding whether comment icon is needed or not based on "data"
            var li = parent.redraw_node.call(this, obj, deep, callback, force_draw);
            if (li && addCommentIcon) {
                var tmp = span.cloneNode(true);
                tmp.id = li.id + "_commenticon";
                var $a = $("a", li);
                $a.append(tmp);
            }
            return li;
        };
    };
})(jQuery);

Upvotes: 1

Related Questions