如果什么都不设置，默认使用dojo自带的Tree，样式模板使用claro的，效果是这样的。
1、无论是不是叶子节点，前面总要带个+号，必须要点击下才消失。
2、点击树或者某个节点是，回出现蓝色边框。
3、默认的文件夹图标也不好看。
根据项目需要，经过摸索，最后修改成了这样子，已经面目全非。
至少看着不那么像官方的树样式了。
主要修改了一下内容。
一、对Css代码的修改。
/* Tree的样式----------------------------------------------------------------------*/
.claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter {
color: #ffffff;
padding: 4px;
font-size: 14px;
} .claro .dijitTreeRowHover {
background-color: #626262;
background-image: none;
border-width: 0px;
padding: 4px;
} .claro .dijitTreeRowSelected {
background-color: #626262;
background-image: none;
border-width: 0px;
padding: 4px;
} .dijitTreeLabel {
outline: none;
} .dijitTree {
outline: none;
} .claro .dijitTreeExpando {
background-image: url(Res/Images/ArrowDown16.png);
background-position: 0 0;
} .claro .dijitTreeRowHover .dijitTreeExpandoOpened {
background-image: url(Res/Images/ArrowDown16.png);
width: 16px;
height: 16px;
background-position: 0 0;
} .claro .dijitTreeRowHover .dijitTreeExpandoClosed {
background-position: 0 0;
} .claro .dijitTreeExpandoClosed {
background-image: url(Res/Images/ArrowRight16.png);
width: 16px;
height: 16px;
background-position: 0 0;
} .claro .dijitTreeExpandoLeaf, .dj_ie6 .claro .dijitTreeExpandoLeaf {
width: 0px;
height: 0px;
}
/* Tree的样式----------------------------------------------------------------------*/
这些样式通过Google浏览器进行调试时都可以看到，自己摸索着修改成自己满意的样式即可。
二、Js代码模块的修改。
var myStore = new Memory({
data: pBDataSet,
getChildren: function (object) {
return this.query({ parent: object.id });
}
});
// Create the model
var myModel = new ObjectStoreModel({
store: myStore,
query: { id: "Root" },
mayHaveChildren: function (pItem) {
if (pItem.type == "DataGroup") {
return true;
}
else {
return false;
}
}
});
// Create the Tree.
var myTree = new Tree({
model: myModel,
showRoot: false,
openOnClick: true,
getIconStyle: function (pItem, opened) {
if (pItem.type == "DataGroup") {
return { width: "0px" };
}
else {
return {
width: "9px",
height: "9px",
"background-image": "url(Res/Images/Right9.png)",
"background-position": "0px"
};
}
},
});
myTree.placeAt(this.UI_TreeContainer_Div);
myTree.startup()
修改节点前面的图标主要是扩展了Tree的getIcoStyle函数。
叶子节点不显示-号主要修改了ObjectStoreModel的mayHaveChildren函数。
