javascript - Fancytree 不可见，具有 ui-helper-hidden 类

Question

我刚刚开始使用 fancytree 2.6.0，并通过 Web 服务请求填充它。

我的问题是所有节点都存在，但被 ui-helper-hidden 类设为不可见。我已经进行了临时修复: $(rootNode.ul).removeClass('ui-helper-hidden');但我确信我错过了一些东西。

脚本和CSS:

<link href="Scripts/jquery-plugins/fancytree-2.6.0/src/skin-themeroller/ui.fancytree.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.11.1/jquery-1.11.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.11.1/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.11.2/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-plugins/fancytree-2.6.0/src/jquery.fancytree.js" type="text/javascript"> </script>
<script src="Scripts/jquery-plugins/fancytree-2.6.0/src/jquery.fancytree.themeroller.js" type="text/javascript"> </script>

代码:

$('#selectedClausesDiv').fancytree();

$.when(
    $.getJSON("Handlers/GetQuotationHandler.ashx?jsoncallback=?", { quoteReference: quoteReference, quoteVersion: quoteVersion })
).then(function (data) {
    if (data.ErrorCode == 0 && data.Quotation != null) {
        var rootNode = $("#selectedClausesDiv").fancytree("getRootNode");
        $.each(data.Quotation.Covers, function (index, item) {
            addCover(rootNode, item);
        });

        // FIXME: why is this necessary ??
        // $(rootNode.ul).removeClass('ui-helper-hidden');
    }
});

function addCover(rootNode, cover) {
    var coverId = 'selected_' + cover.BusinessClassId + '_' + cover.CoverId;

    var coverNode = rootNode.addChildren({
        title: cover.Name,
        tooltip: "This folder and all child nodes were added programmatically.",
        folder: true
    });
}

生成的html:

<div class="grid_13 alpha omega" id="selectedClausesDiv">
    <ul class="ui-fancytree fancytree-container ui-fancytree-source ui-helper-hidden" tabindex="0">
        <li class="">
            <span class="fancytree-node fancytree-folder fancytree-exp-n fancytree-ico-cf">
                <span class="fancytree-expander"/>
                <span class="fancytree-icon"/>
                <span title="This folder and all child nodes were added programmatically." class="fancytree-title">P&amp;I Owned</span>
            </span>
        </li>
        <li class="fancytree-lastsib">
            <span class="fancytree-node fancytree-folder fancytree-lastsib fancytree-exp-nl fancytree-ico-cf">
                <span class="fancytree-expander"/>
                <span class="fancytree-icon"/>
                <span title="This folder and all child nodes were added programmatically." class="fancytree-title">P&amp;I Extended Cargo</span>
            </span>
        </li>
    </ul>
</div>

Answer 1

如果没有提供数据源，Fan​​cytree将自动隐藏根元素。

如果您使用 API 添加数据且没有初始源，则提供空白的 source 选项将阻止 Fancytree 隐藏根元素。

$("#tree").fancytree({
    source: []
});