时间戳

首页 > 解决方案 > 使用 fancytree.js 更改节点图标

javascript - 使用 fancytree.js 更改节点图标

问题描述

我正在将 fancytree.js 用于树视图，并且在树上有一个回调：

$("#tree").fancytree({ 
    source: {url: "/" + appPath + "/pathosadmin?treepages=true"},
    postProcess: function (event, data) {
        data.result = convertData(data.response, true);
    },
    init: function (event, data) {
        var root = $("#tree").fancytree("getRootNode");
        root.sortChildren(function (a, b) {
            return treeSort(a, b);
        }, true);
    },
    icon: function (event, data) {

        switch (data.node.data.NODE_TYPE) {
            case 1: //page
                if (data.node.data.STARTPAGE == 0) {
                    return "fancytree_page_icon";
                } else if (data.node.data.STARTPAGE == 1) {
                    _this.startPageNode = data.node;
                    return "fancytree_startpage_icon";
                }
            case 2: //group
                return "fancytree_group_icon";
            case 3: //level
                if (data.node.data.LEVELID) {
                    switch (data.node.data.LEVELID) {
                        case 1:
                            return "fancytree_level_1_icon";
                        case 2:
                            return "fancytree_level_2_icon";
                        case 3:
                            return "fancytree_level_3_icon";
                        case 4:
                            return "fancytree_level_4_icon";
                        case 5:
                            return "fancytree_level_5_icon";
                    }
                } else {
                    return "fancytree_location_icon";
                }
        }
    },
    extensions:

现在我还想在运行时更改图标。可悲的是

if (_this.startPageNode) {
     _this.startPageNode.icon = "fancytree_page_icon";
     _this.startPageNode.renderTitle();
 }
 activeNode.icon = "fancytree_startpage_icon";
 activeNode.render();
 _this.startPageNode = activeNode;

不工作。有关如何解决该问题的任何提示。node.icon 属性始终未定义，即使我设置它（+渲染节点）它也不会显示。

标签： javascriptfancytree

解决方案

renderTitle() 调用图标函数，所以我发现动态更改图标的唯一方法是在节点上放置一些属性

activeNode.state = 'clicked';
activeNode.renderTitle();

然后在树上的图标功能中添加额外的处理登录：

var state = data.node.state;
if (state) {
    switch (state) {
        case "clicked": return "glyphicon glyphicon-ban-circle"
            return;
        case "completed": return "glyphicon glyphicon-ok-circle"
            return;
        case "removed": return "glyphicon glyphicon-remove-circle"
            return;
        default:
            return "glyphicon glyphicon-remove-circle"
            break;
    }
}

推荐阅读