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

【问题标题】：jquery - fancy tree - no data presentjquery - 花式树 - 没有数据存在
【发布时间】：2015-07-30 12:52:03
【问题描述】：

我正在使用 jquery 花式树来表示我的网络应用程序中的一棵树。

这是我的代码如下。问题是，当源 URL /documents/folders 返回一个空列表时，我希望我的 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>

【问题讨论】：

标签： javascript jquery html fancytree

【解决方案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!');
    });
});

【讨论】：

【解决方案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');

    }

}

【讨论】：