Tree dojo树自定义图标_Tree_Dojo

Tree dojo树自定义图标

tree dojo

Tree dojo树自定义图标,tree,dojo,Tree,Dojo,阅读本文并查看一些dojo树示例后，我尝试在dojo树中使用自定义图标，但只更改了根项。有人能纠正我吗？该图标与下面的HTML文件位于同一目录中，显示的是根目录，而不是叶目录。正文，html{字体系列：helvetica，arial，无衬线；字体大小：90%；} diagramIcon先生 { 背景图片：url（图_16x16.png）；背景重复：无重复；背景位置：中心；宽度：16px；高度：16px； } require（“dojo.data.ItemFil

阅读本文并查看一些dojo树示例后，我尝试在dojo树中使用自定义图标，但只更改了根项。有人能纠正我吗？该图标与下面的HTML文件位于同一目录中，显示的是根目录，而不是叶目录。


正文，html{字体系列：helvetica，arial，无衬线；字体大小：90%；}
diagramIcon先生
{
背景图片：url（图_16x16.png）；
背景重复：无重复；
背景位置：中心；
宽度：16px；
高度：16px；
}           
require（“dojo.data.ItemFileReadStore”）；
dojo.require（“dijit.Tree”）；
require（“dijit.tree.ForestStoreModel”）；
var国家={标识符：'abbr'，
标签：“名称”，
项目：[
{缩写：'ec'，名称：'Ecuador'，首都：'Quito'}，
{缩写：'eg'，名字：'Egypt'，首都：'Cairo'}，
{缩写：'sv'，名称：'萨尔瓦多'，首都：'San Salvador'}，
{缩写：'gq'，名称：'赤道几内亚'，首都：'马拉博'}，
{缩写：'er'，名字：'厄立特里亚'，首都：'Asmara'}，
{缩写：'ee'，姓名：'爱沙尼亚'，首都：'Tallin'}，
{缩写：'et'，名称：'Ethiopia'，首都：'Addis Ababa'}
]};
dojo.addOnLoad（函数（）{
var store=new dojo.data.ItemFileReadStore({
数据：国家，
});
var treeModel=新的dijit.tree.ForestStoreModel({
店:店,，
rootLabel:“Continuwa”，
//getIconClass:MyGetIConClass函数，
});
var tree=新的dijit.tree({
型号：treeModel，
showRoot：是的
},
“treeOne”）；
tree.getIconClass=mygeticonclass函数；
tree.startup（）；
});
函数myGetIconClassFunction（项，已打开）
{
if（item.root）{
返回“diagramIcon”；
}否则{
if（项目.子项）{
返回“diagramIcon”；
}否则{
返回{backgroundColor:“橙色”}；
}
}
}

如果有更好的实施方法，请告知。谢谢

我通过将javascript放入

dojo.addonload（）

中来实现它

<head>
    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }

        .diagramIcon 
        {
            background-image: url(diagram_16x16.png); 
            background-repeat: no-repeat; 
            background-position: center center; 
            width: 16px; 
            height: 16px;
        }           

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="isDebug:true, parseOnLoad:true"></script>

    <script type="text/javascript">
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.Tree");
        dojo.require("dijit.tree.ForestStoreModel");


        var countries = { identifier: 'abbr', 
          label: 'name',
          items: [
            { abbr:'ec', name:'Ecuador',           capital:'Quito' },
            { abbr:'eg', name:'Egypt',             capital:'Cairo' },
            { abbr:'sv', name:'El Salvador',       capital:'San Salvador' },
            { abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },
            { abbr:'er', name:'Eritrea',           capital:'Asmara' },
            { abbr:'ee', name:'Estonia',           capital:'Tallinn' },
            { abbr:'et', name:'Ethiopia',          capital:'Addis Ababa' }
        ]};

        dojo.addOnLoad(function() {
            var store = new dojo.data.ItemFileReadStore({
                data: countries,
            });

            var treeModel = new dijit.tree.ForestStoreModel({
                store: store,
                rootLabel: "Continentwa",
                //getIconClass: myGetIconClassFunction,
            });

            var tree = new dijit.Tree({
                model: treeModel,
        showRoot: true
            },
            "treeOne");

    tree.getIconClass = myGetIconClassFunction;
    tree.startup();
        });

        function myGetIconClassFunction(item, opened)
        {
            if(item.root){
                return "diagramIcon";
            }else{
                                    if (item.children){
                    return "diagramIcon";
                                    }else {
                    return {backgroundColor: "orange"};
                                    }

            }

        }

    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
</head>

<body class=" claro ">
    <div id="treeOne">
    </div>  
</body>