对于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;
}