Question

我正在使用fancytree jQuery插件从21个类别中的635列表中选择一个项目。伟大的工具，延迟加载和持久性对我的应用程序特别有用。但是......我的窗户上没有房地产。

我如何在某种类型的下拉列表中嵌入一个fancytree，jQuery-UI最好是因为我已经为其他需求加载了它。我可以为下拉列表提供一行的一小部分，以便为fancytree保存整个列。

谢谢，比尔

Answer 1

我遇到了同样的问题，我必须自己做，没有以下插件或扩展程序：

我需要向用户显示选定的树枝并将节点密钥存储在隐藏的输入中，而且我正在使用jQuery和Bootstrap，但可以随意更改它。

HTML ：

<div class="form-group">
    <label>Location</label>
    <input id="myLocation" type="hidden" />
    <div class="input-group">
        <span id="myLocation" class="form-control"></span>
        <div class="input-group-append">
            <button class="btn btn-primary tree-opener" data-target="#myFancyTreeID" type="button">...</button>
        </div>
    </div>
    <div id="myFancyTreeID" class="form-control" data-target="#myLocation" style="display:none;"></div>
</div>

JavaScript ：

$(function () {
    $('.tree-opener').on('click', function () {
        $($(this).data('target')).slideToggle();
    });

    $('#myFancyTreeID').fancytree({
        activate: function (event, data) {
            var node = data.node;
            if (!$.isEmptyObject(node.key)) {
                var $displayControl = $('span' + $tree.data('target'));
                var $valueControl = $('input' + $tree.data('target'));
                $displayControl.html(node.title);
                $valueControl.val(node.key);
                $tree.slideToggle();
            }
        },
        source: { /* …. your data source …. */ }
    });
});

这是入门代码，您可以按照适合您页面的方式对其进行重新编码。

如何在下拉列表中嵌入fancytree？

1 个答案: