How to show selected nodes of a tree - JSTree jQuery

Viewed 105

I want to show the records in a tree format for which I used JStree plugin of jQuery.

I have successfully implemented the JStree to show records as tree, but I am having issue when a user selects the nodes from the tree for that I also want to show selected nodes as a tree for better representation .. but the code doesn't seems to work perfectly..

Code below renders the tree:

        $.ajax({
        url: "<?php echo base_url(); ?>Controller_Name/Function_Name",
        type: "POST",
        data: "code="+code,
        success: function(result)
        {                       
            $('#jstree').jstree("destroy");                 
            $('#jstree').jstree({
            'checkbox': { 
                three_state: true
            },
            'plugins': ['search', 'checkbox', 'wholerow'],
            'core': {
                'data': JSON.parse(result),
                'animation': false,
                    'themes': {
                        'icons': false,
                    }
                },
                'search': {
                    'show_only_matches': true,
                    'show_only_matches_children': true
                }
            });
        }
    });

I want to show the selected nodes as a tree using the same JStree plugin.. this below code is the one which should give the tree of selected nodes..

$('#jstree').on('changed.jstree', function (e, data){
    var objects = data.instance.get_selected(true)
    var leaves = $.grep(objects, function (o) 
    { 
        return data.instance.is_leaf(e)
    })
    console.log(leaves);

    var json = [];
    $.each(leaves, function (i, o){
        district_ids();
        json.push({"id":o.id, "parent":o.parent, "text":o.text});
    });
    console.log(json);
    $.ajax({
        success: function(json){                
            $('#output').jstree("destroy");                 
            $('#output').jstree({
                'plugins': ['wholerow'],
                'core': {
                    'data': json,
                    //'data': json,
                },
            });
        }
    });
});

but the function does not gives the desired result... it keeps loading

0 Answers
Related