Question

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

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

    }

}

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

2 个答案: