覆盖 fancytree 的单选按钮

Question

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

我使用 skin-awesome 作为我的主题，并添加 glyph(preset4) 作为扩展。但是，我无法更改复选框的图标。这意味着即使 tree.checkbox 已设置为 "radio"，复选框图标保持不变。

已经在网上找了一段时间了，没有找到任何接近的东西。任何反馈都会很棒。谢谢

Answer 1

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

我连接到 createNode 回调，通过从 node.li
我要做的第二部分是确保当节点为 selected/deselected 时，必须正确更改图标。这是通过挂接到 select 回调、检查 node.isSelected、找到图标并切换它 on/off.

希望这对那里的人有所帮助。

Answer 2

Fancytree 2.26 版添加了这个缺失的功能。

详情见本期： Radio button support for ext-glyph

Answer 3

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

像这样

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

<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 的单选按钮

Override radio button for fancytree

jquery

fancytree