尝试使用新数据重新加载/刷新动态树 [英] Trying to reload/refresh dynatree with new data

问题描述

我已经看到了这个问题，并且我已经尝试过给定的解决方案(使用tree.reload())，但是它对我不起作用.我有一棵已经使用initAjax()在doc上初始化过的树，并且我试图在更改选择输入时使用不同的值重新加载该树.基本上是这样:

I've seen this question already, and I've tried the solution given (use tree.reload()), but it's not working for me. I have a tree that's initialized on doc ready using initAjax(), and I'm trying to reload the tree, using different values, on the change of a select input. Basically this:

$(document).ready(function(){
    // global variables
    var myVal = 'initial value';

    // initialize tree
    $('#tree').dynatree({
        persist: false,
        initAjax: {
            url: 'getMyStuff.cfc',
            data: { myParam: myVal }
        },
        ... more params
    )};

    // select change handler
    $('#mySelect).change(function(){
        var tree = $('#tree').dynatree('getTree');
        myVal = $(this).find('option:selected').val();
        tree.reload();           
    )};
)};

问题在于，树不断地被加载相同的参数...在控制台的网络"选项卡中，即使我已经确认我已经m定位到正确的元素，并在更改时获得正确的值.

The problem is that the tree keeps getting reloaded with the same parameters... I can see in the network tab of the Console that the parameter that gets sent is the same every time, even though I've verified that I'm targeting the correct element and am getting the correct value on change.

我尝试更改变量的范围，尝试将dynatree选项放置在单独的变量中，尝试调用

I've tried changing the scope of variables, I've tried placing the dynatree options in a separate variable, I've tried calling

$('#tree').children().remove();
$('#tree').dynatree(treeoptions);

在change()函数中，我尝试调用tree.initialize()(是的，我知道它是一个构造函数)，我尝试了tree.redraw()，我尝试过分别设置initAjax选项调用reload()，我被卡住了.

inside the change() function, I've tried calling tree.initialize() (yes, I know it's a constructor), I've tried tree.redraw(), I've tried setting the initAjax option separately before calling reload(), and I'm stuck.

有什么想法吗?

在这一点上，我已经决定要做的唯一一件事就是将树初始化放入函数中，并在更改选择选项时将树(包括其父div)吹掉并重建它.如果确实没有其他方法可以用新数据重建树，这会让我感到惊讶，这与我对其他小部件的体验背道而驰.

At this point, I've decided the only thing to do is to put the tree initialization into a function, and when changing the select option, blow away the tree (including its parent div) and rebuild it. I'll be surprised if it's really true that there's no other way to rebuild the tree with new data, which runs counter to my experiences with other widgets.

推荐答案

此问题与以下内容重复: 如何重新加载/刷新/重新初始化DynaTree?

This question is a duplicate of this: how to reload/refresh/reinit DynaTree?

我的解决方案不需要绕行，例如empty()和destroy()等.考虑一下: 创建Dynatree时，您指定它必须使用的设置字典. 但是，由于这是一个配置字典，因此即使某些参数是变量并且由于单击等而发生更改，也不会重新评估它. 因此，要解决此问题并避免诸如删除DOM并重新创建之类的昂贵操作，我们会按照我认为Dynatree开发人员具有的预期目的进行操作(但在AJAX/JSON示例中并未对此进行明确记录):

My solution does not require detours like empty() and destroy() etc. Think about this: When the Dynatree is created you specify a dictionary of settings it must use. However as this is a configuration dictionary it will not be reevaluated even though some parameters are variables and change due to clicks etc. So to solve this and avoid expensive operations like deleting the DOM and recreating it we do it the way I think the Dynatree developers has this intended (but not so clearly documented in the AJAX/JSON example):

  //The HTML:
      <input name="filter" id="checkbox" type="checkbox" value="X">Checkme<br>
      <label id="mylabel"></label>

  $("#checkbox").click(function() {
    $("#mylabel").text($(this).is(":checked"))
    $("#tree").dynatree("option", "initAjax", {
             url: "myurl/myphp.php",
             data: {
                myparameter: $("#checkbox").is(":checked").toString()
             }
     });

    $("#tree").dynatree("getTree").reload();
  });

此示例在每次单击按钮时在#tree上设置配置，然后重新加载树.

This example sets the configuration on the #tree every time the button is clicked, then reloads the tree.

这篇关于尝试使用新数据重新加载/刷新动态树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！