3

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

https://github.com/mar10/fancytree

这是我的代码如下。问题是，当源 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>
4

2 回答 2

3

所以，你必须在花哨的树之外照顾好这个。基本上我们想要做的是自己拉下 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!');
    });
});
于 2014-03-07T17:38:17.977 回答
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');

    }

}
于 2015-07-30T04:52:03.197 回答