Trying to reload/refresh dynatree with new data

问题

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

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.

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

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.

Any ideas?

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.

回答1:

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

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

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

回答2:

I found this on the dynatree google group. It works for me.

$('.tree').dynatree('destroy'); 
$('.tree').empty();

Here is the original link.

回答3:

I wanted to intialize the block with a default json and then on click of a button, i wanted to refresh it from the server, This is what i did., Intially, var treeData = [{title: "Dynamic Tree Demo",isFolder: false, tooltip: "Here, is your Dynamic Tree!" }];

jQuery(document).ready(function() {
    initReqActions(treeData);   
});

initReqActions= function(myTree){
    $("#dynaTree").dynatree({
        checkbox: false,            
        selectMode: 2,
         // create IDs for HTML elements that are generated
          generateIds: true, 
          cookie: {
              expires :-1  
          },    
        children: myTree,           
        onQuerySelect: function(select, node) {
            if( node.data.isFolder )
                return false;
        },
        onSelect: function(select, node) {
            // Display list of selected nodes
            var selNodes = node.tree.getSelectedNodes();
            // convert to title/key array
            //var selKeys = $.map(selNodes, function(node){
            //     return "[" + node.data.key + "]: '" + node.data.title + "'";
            //});
            //$("#echoSelection4").text(selKeys.join(", "));
        },
        onClick: function(node, event) {
            if( ! node.data.isFolder )
                node.toggleSelect();
        },
        onDblClick: function(node, event) {
            node.toggleExpand();
        },
        onKeydown: function(node, event) {
            if( event.which == 32 ) {
                node.toggleSelect();
                return false;
            }
        }

    });
}

Then when a button is clicked

        jQuery(document).ready(function() {
      $("#RefreshButton").click(function() {           
       $("#dynaTree").dynatree("option", "initAjax", {
          url: "refreshTree",
          dataType: "json"

       });

      $("#dynaTree").dynatree("option", "children", null);          
      $("#dynaTree").dynatree("getTree").reload();
     });

    });

来源：https://stackoverflow.com/questions/10524952/trying-to-reload-refresh-dynatree-with-new-data

标签

jquery

dynatree