jquery - 花式树 - 没有数据存在

Question

我正在使用jQuery花式树来表示我的web应用程序中的一棵树。

https://github.com/mar10/fancytree

这里是我的代码如下所示。问题是，当源URL /文件/文件夹返回空列表时，我希望我的html显示文本“找不到文档”。我搜索了这个API，但是没有办法直接使用这个插件。

我是新来的webapps的世界。有人能指点我正确的方向吗？

<div class="row" id="toprow"> 
    <div class="col-md-4" id="treeContainer"> 
     <h4>Choose a Document Type from the drop-down</h4> 
     <div id="tree"> 

     </div> 
    </div> 
</div> 

<script> 
    $(function(){ 
     $("#tree").fancytree({ 
      source: { 
       url: "/documents/folders" 
      }, 

     }); 
    }); 
</script> 

Answer 1

所以，你必须照顾这个花式树外。基本上我们想要做的，就是拉下JSON自己，然后检查其状态，并呈现基于该UI，而不是直接把它看上树的内部

$(function() { 
    $.get('/documents/folders', function (result) { 
     if(result.length > 0) { 
      $("#tree").fancytree({ 
       source: result 
      }); 
     } else { 
      $('#tree').html('No documents found!'); 
     } 
    }).fail(function() { 
     $('#tree').html('No documents found!'); 
    }); 
}); 

Answer 2

我也有类似的要求，使用FancyTree API的init函数解决它。

在HTML我有藏（主要为多语言支持）的消息，并在fancytree通话，除其他我指定了init选项来处理空​​的情况下：

init: function(event, data) { 
    console.debug("initialised tree"); 
    if (data.tree.count() == 0){ 
     $('#attributeTree').find('#attributeTreeEmptyMessage').removeClass('display-hide'); 
     $('#attributeTree').find('.fancytree-container').addClass('display-hide'); 
    }else{ 
     $('#attributeTree').find('#attributeTreeEmptyMessage').addClass('display-hide'); 
     $('#attributeTree').find('.fancytree-container').removeClass('display-hide'); 

    } 

}