Custom node icons not working in 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.

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
    }
}]

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('');
        }
    }
});

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.

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...

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.

来源：https://stackoverflow.com/questions/24393362/custom-node-icons-not-working-in-fancytree

标签

jquery

css

json

fancytree