Dojo dijit/Tree的使用以及样式设置

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