Dojo dijit/Tree的使用以及样式设置
2024-10-20 09:33:55
如果什么都不设置，默认使用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函数。
最新文章
- 点击表格tr同时点击checkbox
- O(1)快速乘注意事项
- MySQL drop、delete和truncate的区别
- TeeChart控件的安装与常用 功能设置
- VMWare虚拟机下为Ubuntu 12.04.1配置静态IP_转
- DOM（文本对象模型）简介
- hdu 4764 && 2013长春网赛题解
- JS判断手机端和PC端自动跳转
- CodeForces-749A
- 13.MySQL(一)
- Android系统剪切板
- Linux的内存分页管理
- jetty启动设置端口
- C# 我的小画板
- 点火开关分为4个档位，分别是off，acc，IG-on，和ST
- 关于h5使用bpmn.js
- easyui的datebox控件如何只要年月不要日谢谢知道的说一下
- [读书笔记]Linux命令行与shell编程读书笔记04 安装软件,编辑器注意事项
- 第十届蓝桥杯JavaB组总结
- 苏宁笔试：UML类图中的关系