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

Question

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

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

这很好用。但是，当我在输入字段中再次键入新值并提交时，aciTree 不会反射(reflect)新值。它仍然显示旧的 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({
	ajax: {
      url: 'treeview/jsp/testplansjson.jsp?sname='+document.getElementById("name").value+',
		}
    });
  });
 
  // 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_) 调用只会初始化 TreeView 一次(使用提供的选项)。如果你调用它两次，什么也不会发生。为了能够使用其他选项初始化 TreeView ，您需要先销毁它。

在您的情况下，您只需要更新 TreeView ajax.url 选项。首先卸载树，然后从新的 url 重新加载它。

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

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

然后您可以调用 unload/ajaxLoad(如您的示例所示)。