Question

阅读本文并查看一些dojo树示例后，我尝试在dojo树中使用自定义图标，但只更改了根项。任何人都能纠正我吗？该图标与下面的HTML文件位于同一目录中，并显示根目录，但不显示叶子。 how to change the icon of leaf node in dojo tree?

<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>

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

Answer 1

我通过将javascript放在dojo.addonload()。

中来实现它

道场树自定义图标

1 个答案: