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函數。