Replacing a jstree node on ajax call

问题:

I have a jstree object that I use for storing data, and I use ajax to complete it step after step. I call an ajax.php file that will return nodes formatted in HTML, depending on the data I send to it.

My problem is the following: I know the data I will receive already contains the structure of the current node, and instead of replacing the current node with the data it receives from the ajax call, the jstree adds the structure to the current nodes as a new son, which is not what I want.

For instance, if I click on node 1:

0
| - 1
| - 2

I will get the following structure:

0
| - 1
| | - 1
| | | - 1.1
| | | - 1.2
| - 2

I cannot change the ajax call return, however I thought it could be possible to glitch a bit with the following code to replace a node with the returning data instead of inserting it as a child node of the current node:

$node.jstree({
    "plugins" : [ "themes", "html_data" ],
    "html_data" : {
        ajax: {
            url: "ajax.php",
            data: function(node){
                return {
                    index:  (node != -1) ? node.attr("id") : 0
                };
            },
            type: "POST"
        }
    },
    animated: 'fast'
});

Thank you very much for your answers :)

回答1:

Alrighty, so after fighting with the jstree plugin and being advised to change of perspective by a friend of mine, I finally decided to make my very own folding/unfolding tree algorithm from scratch, which is not that hard to do after all with jQuery and CSS, even for a JavaScript newbie like me! It took me a day but I learned my lesson quite well...

jQuery:

$('.closed').on('click', changeContent);
function changeContent(e) {
    $('.open').unbind();
    $('.closed2').unbind();
    $('.closed').unbind();
    var $this = $(this);
    $this.attr('class', 'open');
    $.ajax({
        type: 'post',
        url: 'ajax.php',
        data: {
            index: $this.attr("id")
        },
        success: function(xhr,msg) {
            $this.replaceWith(xhr);
            $('.closed').on('click', changeContent);
            UpdateOpen();
        }
    });
}

function UpdateOpen(e) {
    $('.open').unbind();
    $('.closed2').unbind();
    $('.open, .closed2').on('click', function(e) {
        e.stopPropagation();
        $('.open').unbind();
        $('.closed2').unbind();
        var $this = $(e.currentTarget);
        if($this.attr('class') == 'closed2') {
            $this.attr('class', 'open');
            $this.children('ul').show();
            UpdateOpen(e);
        } else if($this.attr('class') == 'open') {
            $this.attr('class', 'closed2');
            $this.children('ul').hide();
            UpdateOpen(e);
        }
    });
}

CSS:

.closed {padding-left: 7px; list-style-type: none; background: URL("/img/plus.gif") left top no-repeat; }
.closed2 {padding-left: 7px; list-style-type: none; border-left: 1px dotted; background: URL("/img/plus.gif") left top no-repeat; }
.open {padding-left: 7px; list-style-type: none; border-left: 1px dotted; background: URL("/img/minus.gif") left top no-repeat; }

I know it's not the best implementation, but that's what I've come with what I know of JavaScript. Please note this code depends on the way the ajax.php returns data.