Question

我有一个用于存储数据的jstree对象，我使用ajax逐步完成它。我调用一个ajax.php文件，该文件将返回以HTML格式化的节点，具体取决于我发送给它的数据。

我的问题如下：我知道我将收到的数据已经包含当前节点的结构，而不是用从ajax调用接收的数据替换当前节点，jstree将结构添加到当前节点节点作为一个新的儿子，这不是我想要的。

例如，如果我点击节点1：

0
| - 1
| - 2

我将得到以下结构：

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

我无法更改ajax调用返回，但是我认为使用以下代码可能会出现故障，用返回数据替换节点而不是将其作为当前节点的子节点插入：

$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'
});

非常感谢您的回答：）

Answer 1

好吧，所以在与jstree插件战斗并被建议改变我的朋友的视角后，我终于决定从头开始制作我自己的折叠/展开树算法，毕竟这并不难做到使用jQuery和CSS，即使是像我这样的JavaScript新手！我花了一天时间，但我很好地吸取了教训......

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; }

我知道这不是最好的实现，但这就是我所知道的JavaScript。请注意，此代码取决于ajax.php返回数据的方式。

在ajax调用上替换jstree节点

1 个答案: