4

我已经看到了这个问题，并且我已经尝试了给出的解决方案（使用 tree.reload()），但它对我不起作用。我有一个树，它使用 initAjax() 在准备好的文档上初始化，我正在尝试使用不同的值在选择输入的更改时重新加载树。基本上是这样的：

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

问题是树不断重新加载相同的参数......我可以在控制台的网络选项卡中看到每次发送的参数都是相同的，即使我已经验证我的目标是正确的元素并在更改时获得正确的值。

我试过改变变量的范围，我试过把 dynatree 选项放在一个单独的变量中，我试过打电话

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

在 change() 函数中，我尝试调用 tree.initialize()（是的，我知道它是一个构造函数），我尝试过 tree.redraw()，我尝试在调用 reload( ），我被困住了。

有任何想法吗？

此时，我决定唯一要做的就是将树初始化放入一个函数中，并在更改选择选项时，将树（包括其父 div）吹走并重建它。如果真的没有其他方法可以用新数据重建树，我会感到惊讶，这与我使用其他小部件的经验背道而驰。

4

3 回答 3

10

这个问题与此重复： 如何重新加载/刷新/重新初始化 DynaTree？

我的解决方案不需要像 empty() 和 destroy() 等这样的弯路。想一想：创建 Dynatree 时，您指定它必须使用的设置字典。然而，由于这是一个配置字典，即使某些参数是变量并且由于点击等而发生变化，它也不会被重新评估。所以为了解决这个问题并避免像删除 DOM 和重新创建它这样的昂贵操作，我们按照我认为 Dynatree 开发人员的方式进行操作有这个意图（但在 AJAX/JSON 示例中没有如此清楚地记录）：

  //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 上的配置，然后重新加载树。

于 2012-10-11T06:23:19.067 回答
7

我在 dynatree google group 上找到了这个。这个对我有用。

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

这是原始链接。

于 2012-05-14T15:20:03.727 回答
2

我想用默认的 json 初始化块，然后单击一个按钮，我想从服务器刷新它，这就是我所做的。最初，var treeData = [{title: "Dynamic Tree Demo",isFolder : false, tooltip: “这里，是你的动态树！” }];

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

    });
}

然后当一个按钮被点击

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

       });

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

    });
于 2016-01-05T02:04:16.617 回答