应客户需要,如何在Tree节点上增加变色状态位

   对于Dojo中tree的例子，我也介绍过一些了，有创建复杂tree的，有增加右键菜单项的，有处理节点拖拽的，有响应节点单（双）击的，等等。

   客户说，他们要树上面尽可能多的展现多维信息，于是我弄了个TreeGrid给他们show过之后，满意了。但是层级结构有不那么明显，反而长成了DataGrid的样子。经过几次修改，还是采用Tree来构造这么一个多维信息树。

   如下图，在节点处增加了各自的状态信息，并标以不同的颜色用于区分。并增加了右键操作，让结构更加紧凑一些。

   可以在这个树上面对制度进行快捷的右键操作，并可以通过点击节点来查看其详情信息（页面为左右结构，左侧为树形结构，右侧围制度详情信息页面）。

   从这棵树的样子上，可以猜到我是如何加上变色状态位的。在tree的onOpen属性方法中做文章，修改css样式就可以。

页面代码：

js代码：
this.workTree = new dijit.Tree({
      model : this.workModel,
      openOnClick : false,
      onOpen : function(event){
            //处理 节点的状态
            if(event.children == undefined ){
                  return;
            }
            var children = event.children;
            for ( var i = 0; i < children.length; i++) {
                  var item = children[i];
                  var tNode = this.getNodesByItem(item);
                  var status = this.model.store.getValue(item,"status");
                  if(status != null){
                        //定义属性颜色组合
                        var statusClassMap = {
                                    "已发布" : "Released",
                                    "未申请" : "Unapply",
                                    "已申请" : "Applied",
                                    "已编制" : "Documented",
                                    "已撤销" : "Withdrawn"
                        };
                        if((tNode = tNode[0])){
                              if((tNode.labelNode.innerHTML.indexOf("<span class") != -1) ||
                                          (tNode.labelNode.innerHTML.indexOf("<SPAN class") != -1)){   //从浏览器兼容性考虑，在IE8下<span>标签为大写<SPAN>
                                    return ;
                              }
                              var colorHtml = [];
                              colorHtml.push("<span class='");
                              colorHtml.push(statusClassMap[status] || "");
                              colorHtml.push("' >");
                              colorHtml.push("    " + status);
                              colorHtml.push("</span>");
                              tNode.labelNode.innerHTML = tNode.labelNode.innerHTML + colorHtml.join("");
                        }
                  }
            }
            
            console.dir(["_onRetrieveTag_event",event]);
      },
      onClick : dojo.hitch(this, this._onClickItem),
      onDblClick : dojo.hitch(this, this._onDbClickItem),
      persist : false
});

css代码

css代码：
.ecmStandardRuleStructureManage .dijitTreeLabel .Released{
      color : blue;
}
.ecmStandardRuleStructureManage .dijitTreeLabel .Unapply{
      color: red;
}
.ecmStandardRuleStructureManage .dijitTreeLabel .Applied{
      color: orange;
}
.ecmStandardRuleStructureManage .dijitTreeLabel .Documented{
      color: green;
}
.ecmStandardRuleStructureManage .dijitTreeLabel .Withdrawn{
      color: black;
}