Question

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

请告诉我是否有办法实现这一目标。

Answer 1

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

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

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

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

然后你可以调用unload / ajaxLoad（如你的例子中所示）。

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: