如何在acitree中重新加载json数据

Question

我想知道是否有任何可能的方式来刷新从服务器接收到的json对象的aciTree实例。

• 让我们假设我有一个html输入字段。
• 用户键入内容并单击提交按钮。
• 此输入用于通过ajax调用从服务器获取新版本的json树模型。

工作正常。但是，当我在输入字段中再次键入新值并提交时，aciTree不会反映新值。它仍然显示旧的json对象数据。
这是我的代码。

User Name: <input type="input" id="name" name="name"> 
      <input type="submit" value="search" id="call" > 

<script type="text/javascript"> 
 

 
    $(document).ready(function(){ 
 

 
// Makes the ajax call and fetches the json for the resource tree. 
 
$('#call').click(function(){ 
 

 
    $("#tree").aciTree({ 
 
\t ajax: { 
 
     url: 'treeview/jsp/testplansjson.jsp?sname='+document.getElementById("name").value+', 
 
\t \t } 
 
    }); 
 
    }); 
 
    
 
    // Refreshing the tree view - Destroy and recreate 
 
    $('#call').click(function(){ 
 
    var api = $('#tree').aciTree('api'); 
 
    api.unload(null, { 
 
     success: function() { 
 
     this.ajaxLoad(null); 
 
     // Triggering the click handler of the Get Tree View button. 
 
     // This will make the ajax call again and bind the tree... 
 
     $('#call').trigger('click'); 
 
     } 
 
    }); 
 
    }); 
 
    
 
    // ACI Tree - event handler. 
 
    $('#tree').on('acitree', function(event, aciApi, item, eventName, opt) { 
 
    switch (eventName) { 
 
     case 'focused': 
 
     case 'selected' : 
 
     // Fired when an item in the tree is selected. 
 
     if(item) { 
 
     $currStatus.text('Selected - ' + item.context.innerText); 
 
     } 
 
     } 
 
    }); 
 
}); 
 
</script>

<div id="tree" class="aciTree aciTreeNoBranches aciTreeFullRow" style="width:100%;height:auto;margin:0;padding:0;border-left:0;border-right:0"></div>

请让我知道是否有任何的方式来实现这一目标。

Answer 1

$(_selector_).aciTree(_options_)调用将初始化树视图一次（使用提供的选项）。如果你把它叫两次，什么都不会发生。为了能够使用其他选项初始化树视图，您需要首先销毁它。

你的情况，你只需要更新树视图ajax.url选项。首先卸载树，然后从新的url重新加载它。

要在运行时更新其中一个aciTree选项，请使用option方法。请注意，您可以使用点符号，达到深层次的属性：

api.option('ajax.url', '_your_new_url_'); 

然后就可以调用卸载/ ajaxLoad（如你的例子）。

Answer 2

<script type="text/javascript"> 
 
    
 
$(document).ready(function(){ 
 
\t 
 

 
    
 
    // Makes the ajax call and fetches the json for the resource tree. 
 
    $('#call').click(function(){ 
 
    \t 
 
\t \t $("#tree").aciTree({ 
 
\t \t  ajax : { 
 
\t \t  \t 
 
\t \t \t  url: 'treeview/jsp/testplansjson.jsp?sname='+document.getElementById("name").value+', 
 
\t \t \t  
 
\t \t  } 
 
\t  }); 
 
    }); 
 
    
 
    // Refreshing the tree view - Destroy and recreate 
 
    $('#call').click(function(){ 
 
\t \t var api = $('#tree').aciTree('api'); 
 
\t \t 
 
     api.unload(null, { 
 
      success: function() { 
 
       this.ajaxLoad(null); 
 
       // Triggering the click handler of the Get Tree View button. 
 
       // This will make the ajax call again and bind the tree... 
 
       $('#call').trigger('click'); 
 
       
 
       
 
      } 
 
     }); 
 
    }); 
 
    
 
    // ACI Tree - event handler. 
 
    $('#tree').on('acitree', function(event, aciApi, item, eventName, opt) { 
 
     switch (eventName) { 
 
      case 'focused': 
 
      case 'selected' : 
 
       // Fired when an item in the tree is selected. 
 
       if(item) { 
 
       \t $currStatus.text('Selected - ' + item.context.innerText); 
 
       } 
 
     } 
 
    }); 
 
}); 
 
</script>

<div id="tree" class="aciTree aciTreeNoBranches aciTreeFullRow" style="width:100%;height:auto;margin:0;padding:0;border-left:0;border-right:0"></div>