如果什么都不设置,默认使用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函数。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章