自定义节点图标在Fancytree中不起作用 [英] Custom node icons not working in Fancytree

问题描述

我一直在一个正在研究的项目中使用"Fancytree"，直到今天对它一直很满意.我需要在树中的某些节点上显示一个不同的图标，到目前为止，还无法使它们显示在树上.

I've been using "Fancytree" in a project I'm working on and have been largely happy with it until today. I need to display a different icon on certain nodes within the tree and have, so far, been unable to get them to show up on the tree.

我在JSON字符串中指定了自定义节点图标，在该图标下面，我用来加载树:

I'm specifying the custom node icon in the JSON string below which I use to load the tree:

[{
    "title": "Inventory",
    "key": "DocFolders/1026",
    "folder": true,
    "data": {
        "icon": "LockedFolder.gif",
        "isLocked": true
    }
}, {
    "title": "Telemetry",
    "key": "DocFolders/1027",
    "folder": true,
    "data": {
        "icon": "LockedFolder.gif",
        "isLocked": true
    }
}, {
    "title": "Well Documents",
    "key": "DocFolders/1028",
    "folder": true,
    "data": {
        "icon": "LockedFolder.gif",
        "isLocked": true
    },
    "expanded": true,
    "children": [{
        "title": "4-13 Spectrum Core PG&E Data.xlsx",
        "key": "SpectrumDocs/961"
    }]
}, {
    "title": "Well Photos",
    "key": "DocFolders/1029",
    "folder": true,
    "data": {
        "icon": "LockedFolder.gif",
        "isLocked": true
    }
}]

以下是加载树的javascript代码:

The following is the javascript code that loads the tree:

 $('#locDocTree').fancytree({
    source: fldrObj,
    imagePath: 'skin-win8',
    activate: function (event, data) {
        if (data.node.folder) {
            $('[id$=txtSelFldrKey]').val(data.node.key);
            $('[id$=txtDownloadDocId]').val('');
        }
        else {
            $('[id$=txtDownloadDocId]').val(data.node.key);
            $('[id$=txtSelFldrKey]').val('');
        }
    }
});

"LockedFolder.gif"文件位于"skin-win8"文件夹中，如果我从JSON中删除"icon":"LockedFolder.gif"，则树可以使用默认图像很好地呈现.指定icon属性后，树仍会呈现，但文件夹图标没有图像.

The "LockedFolder.gif" file is in the "skin-win8" folder, and if I take out the "icon": "LockedFolder.gif" from the JSON, the tree renders fine with the default images. When the icon property is specified, the tree still renders, but with no image for the folder icons.

以下是引用的脚本&页面标题中的css文件.

The following are the referenced script & css files in the page head.

<link href="fancytree/skin-win8/ui.fancytree.css" rel="stylesheet" type="text/css">
<script src="Scripts/json2.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.4.js" type="text/javascript"></script>
<script src="fancytree/jquery.fancytree.js" type="text/javascript"></script>

看起来这应该很简单，但事实证明对我来说是个脑筋急转弯...

Seems like this should be simple, but turning out to be a brain teaser for me...

好吧，几个小时后，我设法回答了我自己的问题.感觉很傻，但是很多时候这些事情都归结为这样的事情.原来我的问题是在树的"imagePath"选项中.路径名称必须包含以下正斜杠.因此，解决方法是使imagePath为"skin-win8/".之后工作正常.

Well, it's a few hours later and I've managed to answer my own question. Feels pretty silly, but so often these things come down to something like this. Turns out my problem was in the "imagePath" option for the tree. Path name MUST include a following forward slash. So the fix was to make the imagePath be "skin-win8/". Works fine after that.

推荐答案

好了，几个小时后，我设法回答了我自己的问题.感觉很愚蠢，但是很多时候这些事情都归结为这样的事情.原来我的问题是在树的"imagePath"选项中.路径名称必须包含以下正斜杠.因此，解决方法是使imagePath为"skin-win8/".之后工作正常.

Well, it's a few hours later and I've managed to answer my own question. Feels pretty silly, but so often these things come down to something like this. Turns out my problem was in the "imagePath" option for the tree. Path name MUST include a following forward slash. So the fix was to make the imagePath be "skin-win8/". Works fine after that.

这篇关于自定义节点图标在Fancytree中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！