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'); 

    } 

}