18

それぞれがファンシーツリーを画面に表示するさまざまなオプションを備えたコンボボックスがあります。

ファンシーツリーのソースを取得するために ajax 呼び出しを行いますが、リロードされず、同じオプションが何度も表示されます。

コードの一部:

$.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」で呼び出す関数内にあります。あなたの考えを教えてください。もっと具体的に言う必要がある場合は教えてください。

前もって感謝します。

4

9 に答える 9

16

ツリーを再初期化することはできません。ただし、ツリー オプションを更新するか、新しいソース オプションで再ロードすることができます。

  • 新しいソース オプションでツリーをリロードします

    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);
    //...
  }
});
于 2015-03-07T13:01:12.837 に答える
6

自分で解決策を探しているときにあなたの投稿を見つけましたが、Web 上では見つかりませんでした。

しかし、私はちょっとしたトリックを考えただけで、あなたや他の誰かに役立つ場合に備えてうまくいきました.

ツリー div を削除してから、元に戻して再度ロードします。次のようにします。

$("#tree").remove();
$("#tree_container").append('<div id="tree"></div>');
get_tree ();
于 2016-03-31T20:42:15.800 に答える
1

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

ハッピーコーディング！

于 2019-01-16T05:46:35.283 に答える