jstree ajax php,javascript – 在ajax调用中替换jstree节点

我有一个用于存储数据的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'

});

非常感谢你的答案:)

解决方法:

好吧,所以在与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返回数据的方式.

标签：jquery,javascript,replace,jstree

来源： https://codeday.me/bug/20190703/1369763.html