Перезагрузить страницу Fancytree

У меня есть combobox с различными параметрами, каждый из которых выводит fancytree на экран.

Я делаю ajax-вызов, чтобы получить источник для fancytree, но он не перезагружается и показывает те же параметры снова и снова.

часть кода:

$.ajax({
 url: "get_treedata.php",
 type: "POST",
 data: {
       id: id
       },
 success: function(json){
   console.log(json);

    var mynodes = JSON.parse(json);
    $('#t-board').fancytree( // t-board is my div container
       {
          source: mynodes,
          ... // my other options
    });
  }
});

этот код находится внутри функции, которую я вызываю в "onchange" моего списка. Расскажите мне, что вы думаете, и если мне нужно быть более конкретным или что-то еще.

Спасибо заранее.

Ответ 1

Вы не можете повторно инициализировать дерево. Но вы можете обновить параметры дерева или перезагрузить его с помощью новой опции источника.

Перезагрузите дерево с помощью новой опции источника

var treeOptions = {...}; // initial options
$('#t-board').fancytree(treeOptions);
$('#combobox').change(function () {
var id = $('option:selected', this).val();

  var newSourceOption = {
    url: 'get_treedata.php',
    type: 'POST',
    data: {
      id: id
    },
    dataType: 'json'
  };

  var tree = $('#t-board').fancytree('getTree');
  tree.reload(newSourceOption);
});

Добавить или заменить другие параметры дерева

var treeOptions0 = {...}; // initial options
var treeOptions1 = {...}; // other tree options
var treeOptions2 = {...};
$('#t-board').fancytree(treeOptions0);
$('#combobox').change(function () {

  var id = $('option:selected', this).val();

  if(id === '1'){
    $('#t-board').fancytree('option', 'selectMode', treeOptions1.selectMode);
    $('#t-board').fancytree('option', 'renderNode', treeOptions1.renderNode);
    $('#t-board').fancytree('option', 'icons', treeOptions1.icons);
    //...
  }else if(id === '2'){
    $('#t-board').fancytree('option', 'selectMode', treeOptions2.selectMode);
    $('#t-board').fancytree('option', 'renderNode', treeOptions2.renderNode);
    $('#t-board').fancytree('option', 'icons', treeOptions2.icons);
    //...
  }
});

Ответ 2

Нашел свой пост при поиске решения самостоятельно и не смог найти его в Интернете.

Но я просто подумал о небольшом трюке, и это действительно сработало, если оно поможет вам или кому-то еще.

Просто удалите дерево div, затем верните его и снова загрузите, что-то вроде этого:

$("#tree").remove();
$("#tree_container").append('<div id="tree"></div>');
get_tree ();

Ответ 3

Вы также можете изменить источник дерева без изменения других параметров, используя следующий код:

$('#t-board').fancytree('option', 'source', myJsonData);

Помните, что myJsonData должен быть допустимым JSON-данными, например:

var myJsonSource = [
    {title: "Node 1", key: "1"},
    {title: "Folder 2", key: "2", folder: true, children: [
      {title: "Node 2.1", key: "3", myOwnAttr: "abc"},
      {title: "Node 2.2", key: "4"}
    ]}
  ];

https://github.com/mar10/fancytree/wiki#configure-options

Ответ 4

Создайте контейнер div.

<div id="tree-container">
    <div id="tree" style="width: 100%;"></div>
</div>

Ответ 5

this.$('.tree-wrapper').fancytree({
  source: []
  ...
});
var tree = this.$('.tree-wrapper').fancytree('getTree');

При обратном вызове

tree.reload(mynodes)

Вы должны предоставить пустой массив для source для инициализации дерева.

Ответ 6

FancyTree выберет сам JSON, вам не нужно делать это вручную:

var id = 3;

$('#t-board').fancytree({
    source: {
        url: 'get_treedata.php',
        type: 'POST',
        data: {
            id: id
        },
        cache: false
    }
    ... // other options
});

Когда вам нужно передать другое значение id в get_treedata.php и загрузить данные в FancyTree, вы просто установите новую опцию источника и перезагрузите FancyTree:

id = 5;

$('#t-board').fancytree('option', 'source', {
    url: 'get_treedata.php',
    type: 'POST',
    data: {
        id: id
    }
    cache: false
});

Более короткий способ перезагрузки FancyTree:

$('#t-board').fancytree({
    url: 'get_treedata.php',
    type: 'POST',
    data: {
        id: id
    }
    cache: false
});

Что это. Счастливое кодирование:)

P.S. Это работает на v2.26.0

Ответ 7

Инициализируйте дерево вне вашего вызова AJAX:

$('#my-tree').fancytree({
    extensions: ["table"],
    focusOnSelect: true,
    autoCollapse: true,
    clickFolderMode: 3,
    table: {
        indentation: 20,
        nodeColumnIdx: 1
    }
});

Затем перезагрузите дерево в вашем вызове ajax:

function loadData() {
    $.ajax({
        type: "POST",
        data:{
            id: $('#some-element').val(),
        },
        url: _URL_,
        success: function (result) {
            var tree = $('#my-tree').fancytree('getTree');
            tree.reload(result.data)
            .done(function() {
                // console.log('tree reloaded');
            });
        }
    });
}

Удачного кодирования!

Ответ 8

После многих попыток этот пример был действительно полезным для меня:

$.ui.fancytree.getTree("#tree1").reload([
          {title: "node1"},
          {title: "node2"}
        ]).done(function(){
          alert("reloaded");
        });

http://wwwendt.de/tech/fancytree/demo/sample-source.html#