2014-03-07 2 views
3

내 웹 응용 프로그램에서 jquery fancy 트리를 사용하여 트리를 나타냅니다. jquery - 멋진 트리 - 데이터 없음

https://github.com/mar10/fancytree

다음은 아래와 같이 내 코드입니다. 원본 URL/문서/폴더가 빈 목록을 반환하면 문제가 발생합니다. html에 "No Documents found"텍스트를 표시하고 싶습니다. 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> 

답변

2

그래서 멋진 나무 밖에서 처리해야합니다. 기본적으로 우리가 원하는 것을 직접 내가 비슷한 요구 사항을 가지고

$(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!'); 
    }); 
}); 
+0

니스를 그 일했다! 고맙습니다. – sethu

1

멋진 나무의 내부를 넣는 대신 JSON 자신을 아래로 당긴 다음 그 상태를 확인하고 그 기반으로 UI를 렌더링하고, FancyTree API의 init 함수를 사용하여이를 해결했습니다. HTML에서

나는 (주로 여러 언어 지원) 숨겨진 메시지를 가지고 있었고, fancytree 통화, 다른 사람의 사이에 나는 비어있는 경우 처리 할 수있는 초기화 옵션을 지정 ..

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

    } 

}