팬시트리 전체 다시 로드

팬시트리 전체 다시 로드

저는 각각 화려한 트리를 화면에 띄워주는 다양한 옵션이 있는 콤보박스를 가지고 있습니다.

팬시 트리의 소스를 가져오기 위해 아약스 콜을 걸었지만 다시 로드되지 않고 동일한 옵션을 반복해서 보여줍니다.

코드의 일부:

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

그 코드는 내 콤보박스의 "변경시"를 호출하는 기능 안에 있습니다.어떻게 생각하시는지, 그리고 제가 좀 더 구체적으로 말씀드릴 필요가 있다면 말씀해주세요.

미리 감사드립니다.

트리를 다시 초기화할 수 없습니다.그러나 트리 옵션을 업데이트하거나 새 소스 옵션으로 다시 로드할 수 있습니다.

• 새 원본 옵션으로 트리 다시 로드

  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);
      //...
    }
  });
  

직접 해결책을 찾는 동안 게시물을 찾았지만 웹에서 찾을 수 없었습니다.

하지만 약간의 속임수를 생각해봤는데 효과가 있었어요 당신이나 다른 사람에게 도움이 될 경우를 대비해서요

나무 디브를 제거한 다음 다시 넣고 다시 로드하면 됩니다. 예를 들어 다음과 같습니다.

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

다음 코드를 사용하여 다른 옵션을 변경하지 않고 트리 소스를 변경할 수도 있습니다.

$('#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

컨테이너 디바를 만듭니다.

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

그런 다음 용기를 비우고 트리의 디브에 다시 추가합니다.이 시점에서 fancy tree를 초기화하면 새로운 설정과 컨텐츠가 로드됩니다.

$("#tree-container").empty();
$("#tree-container").append('<div id="tree" style="width: 100%;"></div>');
// Initialize Fancytree
$("#tree").fancytree({
...

많은 노력 끝에 이 예는 제게 정말 유용하게 쓰였습니다.

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

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

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

콜백할 때

tree.reload(mynodes)

다음에 대한 빈 배열을 제공해야 합니다.source트리 초기화 중입니다.

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

해피코딩!

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

바로 그겁니다.해피코딩 :)

추신: v2.26.0에서 작동합니다.

메인 트리를 다시 로드하는 또 다른 간단한 방법은 다음과 같습니다.

 $("#treegrid").fancytree("getRootNode").tree.reload();

언급URL : https://stackoverflow.com/questions/28680203/reload-entire-fancytree