Dojo dijit/Tree的使用以及样式设置
阅读原文时间:2023年07月09日阅读:4

如果什么都不设置,默认使用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函数。