用新的数据销毁方法或reloadChildren重新加载dynatree似乎不起作用

Reloading dynatree with new data - destroy method or reloadChildren do not seem to work

本文关键字：加载 dynatree 不起作用 新加载 reloadChildren 数据 方法      更新时间：2023-09-26

在收到AJAX请求的响应后，我无法重新加载dynatree。我在下面的代码中有一个下拉菜单"plan.viewType"。我在这个下拉菜单中选择了一个新值，然后调用一个JS函数，它将调用一个AJAX函数。

<form:select path="plan.viewType" id="viewType" style="width:11.6em" onChange="loadView()" multiple="false">
<form:options items="${plan.viewType}"/>
</form:select>

我有两棵树——dim_tree和kpi_tree。

$(document).ready(function(){           
$.fn.clearable = function (treeid) {
    var $this = this;
    $this.wrap('<div class="clear-holder" />');
    var helper = $('<span class="clear-helper">x</span>');
    $this.parent().append(helper);
    helper.click(function(){
        $this.val("");
        $('#' + treeid).dynatree('getRoot').search("");
    });
};
$("#dimsearch").clearable("dim_tree");
$("#kpisearch").clearable("kpi_tree");
$("#dim_tree").dynatree({
    checkbox: true,
    selectMode: 3,
    children: (isEdit == "true")? eval('('+'${plan_dimension_edit_info}'+')') : eval('('+'${plan_dimension_info}'+')'),
    dnd: {
        onDragStart: function (node) {
            return false;
        },
        onDragStop: function (node) {
            return false;
        },
        onDragOver: function (targetNode, sourceNode, hitMode) {
            return false;
        },
        onDrop: function (targetNode, sourceNode, hitMode, ui, draggable) {
            return false;
        }
    },
    onSelect: function(select, node) {
        if(select && dimKPIMisMatch(node)) {
            node.select(false);
            //showToolTip(node.span, dimMsg);
            return;
        }
        createTreeSortable(select, node, "DIM");
    }
});
$("#kpi_tree").dynatree({
    checkbox: true,
    selectMode: 3,
    children: (isEdit == "true")? eval('('+'${plan_measurement_edit_info}'+')') : eval('('+'${plan_measurement_info}'+')'),
    dnd: {
        onDragStart: function (node) {
            return false;
        },
        onDragStop: function (node) {
            return false;
        },
        onDragOver: function (targetNode, sourceNode, hitMode) {
            return false;
        },
        onDrop: function (targetNode, sourceNode, hitMode, ui, draggable) {
            return false;
        }
    },
    onSelect: function(select, node) {
        if(select && kpiDIMMisMatch(node)) {
            node.select(false);
            //showToolTip(node.span, kpiMsg);
            return;
        }
        createTreeSortable(select, node, "KPI");
    }
});
});

当我从下面的AJAX调用中得到响应时，我想重新加载这两个树。

var loadView = function() {
if($("#viewType").val() == "Default View") {
    $.ajax({
        url : "planmntsdefault.do",
        type : "GET",
        success : function (data) {
            var node = $("#dim_tree").dynatree("getTree").getRoot();
            if(node && node.isLazy())
            {
                node.reloadChildren(function(node, isOk){
                    if(!isOk) alert("Node " + node + " could not be reloaded.");
                    else alert("Tree reloaded");
                });
            }
            else
            {
                node.activate();
                node.reloadChildren(function(node, isOk){
                    if(!isOk) alert("Node " + node + " could not be reloaded.");
                    else alert("Tree reloaded");
                });
            }
            node = $("#kpi_tree").dynatree("getTree").getRoot();
            if(node && node.isLazy())
            {
                node.reloadChildren(function(node, isOk){
                    if(!isOk) alert("Node " + node + " could not be reloaded.");
                    else alert("Tree reloaded");
                });
            }
            else
            {
                node.activate();
                node.reloadChildren(function(node, isOk){
                    if(!isOk) alert("Node " + node + " could not be reloaded.");
                    else alert("Tree reloaded");
                });
            }
        },
        error : function ( xhr, textStatus, error ) {
        }
    });
}
}

我参考了其他帖子如何重新加载/刷新/重新初始化DynaTree？这并没有解决问题。我尝试了另一种变体，在那里我可以销毁和重新加载。这两种方法都不起作用。我是不是遗漏了什么？谢谢

你可以试试这个：

    success : function (data) {
        $("#dim_tree").dynatree("getTree").reload();
        $("#kpi_tree").dynatree("getTree").reload();
    },

您可以通过三种方法来解决您的问题。如果您想添加新的数据和ajax响应，那么您可以在dynatree 中添加以下代码

jQuery

  $.ajax({
            url : "planmntsdefault.do",
            type : "GET",
            success : function (data) {
                var node = $("#dim_tree").dynatree("getTree").getRoot();
      /*here you can use i assume title 
       come  (by this name of root is set in 
      dynatree and if set isFolder :true then
     folder icon appear in dyna tree*/
             var childNode = node.addChild({  title: data.title,
                             isFolder: true

                                    });        
     }
             })

如果你想编辑一些根名称，那么你可以使用

在上一个代码中，我们使用的是线下添加集

var node = $("#tree").dynatree("getActiveNode");
node.data.title = $newtitle;

用于删除

var node = $("#tree").dynatree("getActiveNode");
activeNode.remove();

当我们应用这些步骤时，看起来dyna-tree referesh希望它能帮助

相关文章：