how to change the icon of leaf node in dojo tree?

问题

I have created a tree containing information about server and its VMs. I want to change the icon of VM to green if the VM is power on or to red if the VM is poweroff. How to achieve this?

回答1:

Create a function to switch the tree node css class depending on if the VM is on or off.

ar iconFunc = dojo.hitch(this, function (item, opened) { 
                if(item !== undefined && item !== null) {
                    if (item.VmOn!== undefined) {
                        return "VmOn";
                    }
                    else {
                        return "VmOff";
                    }
                }
            });

When creating your tree, pass the iconFunc in the constructor params:

var treeParams = {
    getIconClass : iconFunc, //attach the custom icon function
...};
var myTree = new dijit.Tree(treeParams);

Then create css styles called VmOn and VmOff:

.VmOn {
    background: url(path to your image for VmOn) no-repeat;

The store items that make up the tree nodes will need a property of VmOn or VmOff or change the iconFunc to examine the store items in a different way...

回答2:

This might be another way of doing the same thing,

getIconStyle:function(item, opened){
    if(!item.root){
        if(!item.children){
            // Style the nodes that not have childrens
            return {backgroundColor: "red"};
        }else{
            // Style the nodes that have childrens
            return {backgroundColor: "blue"};
        }
    }else{
        // Style the root node here
        return {backgroundColor: "orange"};
    }
}

you can also use getIconClass to return appropriate css class name.

来源：https://stackoverflow.com/questions/2832200/how-to-change-the-icon-of-leaf-node-in-dojo-tree