dijit树选择节点图标更改

时间:2015-03-24 10:18:58

标签: dojo tree styles

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

我不想要树节点的文件夹图标,这是我使用getIconClass实现的。现在,我需要在节点前面使用closefolder(或任何其他图像)以及节点标签“red”的颜色突出显示所选节点。我能够更改节点标签的颜色,但无法在所选节点前显示图像。请建议我解决同样的问题。 小提琴链接如下:

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

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

],function(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();

});

1 个答案:

答案 0 :(得分:0)

您应该可以通过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/