数字树选择节点图标更改

Question

我正在使用 dojo 版本 1.10.2 和 claro 主题。

我不想要树节点的文件夹图标，这是我使用 getIconClass 实现的。现在我需要在节点和节点标签的颜色 'red' 前面用关闭文件夹（或任何其他图像）突出显示所选节点。我可以更改节点标签的颜色，但无法在所选节点前面显示图像。请建议我解决同样的问题。 fiddle link 如下：

http://jsfiddle.net/pyz9Lcpv/1/

require([
"dojo/_base/window", "dojo/store/Memory",
"dijit/tree/ObjectStoreModel", "dijit/Tree",
"dojo/domReady!"

], 函数(win, Memory, ObjectStoreModel, Tree){

// Create test store, adding the getChildren() method required by ObjectStoreModel
var myStore = new Memory({
    data: [
        { id: 'world', name:'The earth', type:'planet', population: '6 billion'},
        { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
                timezone: '-1 UTC to +4 UTC', parent: 'world'},
            { id: 'EG', name:'Egypt', type:'country', parent: 'AF' },
            { id: 'KE', name:'Kenya', type:'country', parent: 'AF' },
                { id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' },
                { id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' },
            { id: 'SD', name:'Sudan', type:'country', parent: 'AF' },
                { id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' },
        { id: 'AS', name:'Asia', type:'continent', parent: 'world' },
            { id: 'CN', name:'China', type:'country', parent: 'AS' },
            { id: 'IN', name:'India', type:'country', parent: 'AS' },
            { id: 'RU', name:'Russia', type:'country', parent: 'AS' },
            { id: 'MN', name:'Mongolia', type:'country', parent: 'AS' },
        { id: 'OC', name:'Oceania', type:'continent', population:'21 million', parent: 'world'},
        { id: 'EU', name:'Europe', type:'continent', parent: 'world' },
            { id: 'DE', name:'Germany', type:'country', parent: 'EU' },
            { id: 'FR', name:'France', type:'country', parent: 'EU' },
            { id: 'ES', name:'Spain', type:'country', parent: 'EU' },
            { id: 'IT', name:'Italy', type:'country', parent: 'EU' },
        { id: 'NA', name:'North America', type:'continent', parent: 'world' },
        { id: 'SA', name:'South America', type:'continent', parent: 'world' }
    ],
    getChildren: function(object){
        return this.query({parent: object.id});
    }
});

// Create the model
var myModel = new ObjectStoreModel({
    store: myStore,
    query: {id: 'world'}
});

// Create the Tree.
var tree = new Tree({
    model: myModel,
    getIconClass:function(item, opened){
            console.log('tree getIconClass', item, opened);
            console.log('tree item type', item.type);
        },
    onClick: function(item, node) {
            node._iconClass= "dijitFolderClosed";
            node.iconNode.className = "dijitFolderClosed";
            console.log("node : " +node);

        }
});
tree.placeAt(contentHere);
tree.startup();

});

Answer 1

您应该可以通过css更改图标，例如，这会将所选树节点上的图标更改为渐变：

.claro .dijitTreeRowSelected .dijitTreeExpando {
    background-image: url("http://archive.dojotoolkit.org/nightly/checkout/dijit/themes/claro/images/standardGradient.png");
    background-position: 0px 0px;
}

这是更新后的 jsfiddle。 http://jsfiddle.net/pyz9Lcpv/4/

数字树选择节点图标更改

dijit tree seleted node icon change

tree

dojo

styles