在ajax调用上替换jstree节点 [英] Replacing a jstree node on ajax call

问题描述

我有一个用于存储数据的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 
}; 
}，
类型：POST
} 
}，
动画：'快'
}）; 
  

非常感谢您的回答：）

解决方案

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

jQuery：

  $（'。closed'）。on（'click'，changeContent）; 
函数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）
}，
成功：函数（xhr，msg）{
 $ this.replaceWith（xhr）; 
 $（'。closed'）。on（'click '，changeContent）; 
 UpdateOpen（）; 
} 
}）; 
} 
 
函数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）; 
}否则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）左上角不重复; } 
 .closed2 {padding-left：7px; list-style-type：none; border-left：1px点缀; background：URL（/ img / plus.gif）左上角不重复; } 
 .open {padding-left：7px; list-style-type：none; border-left：1px点缀; background：URL（/ img / minus.gif）左上角不重复; } 
  

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

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 :)

解决方案

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.

这篇关于在ajax调用上替换jstree节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！