Question

我正在使用FancyTree库编写我的网站，并且遇到了这个问题：

我使用skin-awesome作为我的主题，并添加字形（preset4）作为扩展名。但是，我无法更改复选框的图标。这意味着即使tree.checkbox已设置为＆＃34; radio＆＃34;，复选框图标也保持不变。

已经在互联网上寻找一段时间并且无法获得任何接近的东西。任何反馈都会很棒。感谢

Answer 1

所以这就是我最终要做的事情：

我挂钩到createNode回调，通过从node.li访问DOM将图标交换到复选框图标
我要做的第二部分是确保在选择/取消选择节点时，必须正确更改图标。这是通过挂钩选择回调，检查node.isSelected，找到图标，然后打开/关闭它来完成的。

希望这可以帮助那些人。

Answer 2

为Fancytree 2.26版添加了此缺失功能。

有关详细信息，请参阅此问题： Radio button support for ext-glyph

Answer 3

我们通过为它提供字体真棒图标来实现单选按钮。

喜欢这个

以下是使用Fancytree v2.24.0生成此行为的html代码：

<link href="components/jquery.fancytree/dist/skin-bootstrap/ui.fancytree.min.css" rel="stylesheet">
<script src="components/jquery.fancytree/dist/jquery.fancytree-all.min.js"></script>

这是我们生成此树的javascript代码：

<script type="text/javascript">
    jQuery(document).ready(function () {
        (function ($) {
            glyph_opts = {
                map: {
                    doc: "fa fa-file-o",
                    docOpen: "fa fa-file",
                    checkbox: "fa fa-circle-o",
                    checkboxSelected: "fa fa-dot-circle-o",
                    checkboxUnknown: "fa fa-minus-square-o",
                    dragHelper: "fa fa-arrows",
                    dropMarker: "fa fa-arrow-right",
                    error: "fa fa-exclamation-triangle",
                    expanderClosed: "fa fa-chevron-right",
                    expanderLazy: "fa fa-chevron-right", // glyphicon-plus-sign
                    expanderOpen: "fa fa-chevron-down", // glyphicon-collapse-down
                    folder: "fa fa-folder",
                    folderOpen: "fa fa-folder-open",
                    loading: "fa fa-refresh fa-spin"
                }
            };

            $("#Checkboxes_Fancytree_id").fancytree({
                extensions: ["glyph"],
                checkbox: "radio",
                selectMode: 1,
                glyph: glyph_opts,
                // tooltip: true,
                // tooltip: function(event, data) { return data.node.title + "!"},
                source: [
                    {title: "n1 (checkbox: false)", expanded: true, checkbox: false, children: [
                            {title: "n1.1"},
                            {title: "n1.2 (selected)", selected: true},
                            {title: "n1.3"}
                        ]},
                    {title: "n2", expanded: true, checkbox: false, children: [
                            {title: "n2.1"},
                            {title: "n2.2"},
                            {title: "n2.3"}
                        ]}
                ]
            });
        }(jQuery));
    });
</script>

这是我们开发的在线演示：

http://demo.javatmp.com/JavaTMP-Static-Ajax/#pages/plugins/tree/fancytree/radio_buttons_fancytree.html

我希望这些信息对您有所帮助，如果您有任何改进我们的建议，请好好告诉我。

覆盖fancytree的单选按钮

3 个答案: