2

I would like to know whether there is any possible way to refresh an aciTree instance from a json object received from the server.

  • Let's assume I have an html input field.
  • The user types something and clicks the submit button.
  • This input is used to get a new version of the json tree model from the server through an ajax call.

That works fine. However, when I type again a new value in the input field and submit the aciTree does not reflect the new values. It still displays the old json object data.
Here is my code.

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>

Please let me know whether there is any way to achieve this.

4

2 回答 2

2

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

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

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

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

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

于 2015-02-15T05:39:02.193 回答
0 

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

于 2015-12-19T09:27:49.017 回答