Dojo.Tree

前端之家收集整理的这篇文章主要介绍了Dojo.Tree前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <style type="text/css">
            body,html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parSEOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dijit.Tree");
            dojo.addOnLoad(function() {
                var store = new dojo.data.ItemFileReadStore({
                    url: "../_static/js//dijit/tests/_data/countries.json"
                });
                var treeModel = new dijit.tree.ForestStoreModel({
                    store: store,query: {
                        "type": "continent"
                    },rootId: "root",rootLabel: "Continents",childrenAttrs: ["children"]
                });
                new dijit.Tree({
                    model: treeModel
                },"treeOne");
            });
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
    </head>
    
    <body class=" claro ">
        <div id="treeOne">
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <style type="text/css">
            body,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parSEOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dijit.Tree");
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
    </head>
    
    <body class=" claro ">
        <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" url="../_static/js//dijit/tests/_data/countries.json">
        </div>
        <div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel" store="continentStore"
        query="{type:'continent'}" rootId="continentRoot" rootLabel="Continents"
        childrenAttrs="children">
        </div>
        <div dojoType="dijit.Tree" id="mytree" model="continentModel" openOnClick="true">
            <script type="dojo/method" event="onClick" args="item">
                alert("Execute of node " + continentStore.getLabel(item) + ",population=" + continentStore.getValue(item,"population"));
            </script>
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <style type="text/css">
            body,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parSEOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dijit.Tree");
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
    </head>
    
    <body class=" claro ">
        <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" url="../_static/js//dijit/tests/_data/countries.json">
        </div>
        <div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel" store="continentStore"
        query="{type:'continent'}" rootId="continentRoot" rootLabel="Continents"
        childrenAttrs="children">
        </div>
        <div dojoType="dijit.Tree" id="mytree2" model="continentModel" showRoot="false">
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <style type="text/css">
            body,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parSEOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dojo.data.ItemFileWriteStore");
            dojo.require("dijit.tree.ForestStoreModel");
            dojo.require("dijit.tree.dndSource");
            dojo.require("dijit.Tree");
            dojo.addOnLoad(function() {
                var store = new dojo.data.ItemFileWriteStore({
                    url: "../_static/js//dijit/tests/_data/countries.json"
                });
                var treeModel = new dijit.tree.ForestStoreModel({
                    store: store,childrenAttrs: ["children"]
                });
                new dijit.Tree({
                    model: treeModel,dndController: "dijit.tree.dndSource"
                },"treeThree");
            });
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
    </head>
    
    <body class=" claro ">
        <div id="treeThree">
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <style type="text/css">
            body,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parSEOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dojo.data.ItemFileWriteStore");
            dojo.require("dijit.tree.ForestStoreModel");
            dojo.require("dijit.tree.dndSource");
            dojo.require("dijit.Tree");
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
    </head>
    
    <body class=" claro ">
        <div dojoType="dojo.data.ItemFileWriteStore" jsId="continentStore5" url="../_static/js//dijit/tests/_data/countries.json">
        </div>
        <div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel5" store="continentStore5"
        query="{type:'continent'}" rootId="continentRoot" rootLabel="Continents"
        childrenAttrs="children">
        </div>
        <div dojoType="dijit.Tree" id="mytree5" dndController="dijit.tree.dndSource"
        betweenThreshold="5" showRoot="false" model="continentModel5" openOnClick="true">
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <style type="text/css">
            body,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parSEOnLoad: true">
        </script>
        <script>
            dojo.require("dijit.Menu");
            dojo.require("dijit.MenuItem");
            dojo.require("dijit.tree.ForestStoreModel");
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dijit.Tree");
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
    </head>
    
    <body class=" claro ">
        <ul dojoType="dijit.Menu" id="tree_menu" style="display: none;">
            <li dojoType="dijit.MenuItem" onClick="alert('Hello world');">
                Item #1
            </li>
            <li dojoType="dijit.MenuItem">
                Item #2
            </li>
        </ul>
        <div dojoType="dojo.data.ItemFileReadStore" jsId="menuContinentStore"
        url="../_static/js//dijit/tests/_data/countries.json">
        </div>
        <div dojoType="dijit.tree.ForestStoreModel" jsId="menuContinentModel"
        store="menuContinentStore" query="{type:'continent'}" rootId="continentRoot"
        rootLabel="Continents" childrenAttrs="children">
        </div>
        <div dojoType="dijit.Tree" id="menuTree" model="menuContinentModel" showRoot="false"
        openOnClick="true">
            <script type="dojo/connect">
                var menu = dijit.byId("tree_menu"); // when we right-click anywhere on the tree,make sure we open the menu menu.bindDomNode(this.domNode); dojo.connect(menu,"_openMyself",this,function(e){ // get a hold of,and log out,the tree node that was the source of this open event var tn = dijit.getEnclosingWidget(e.target); console.debug(tn); // now inspect the data store item that backs the tree node: console.debug(tn.item); // contrived condition: if this tree node doesn't have any children,disable all of the menu items menu.getChildren().forEach(function(i){ i.attr('disabled',!tn.item.children); }); // IMPLEMENT CUSTOM MENU BEHAVIOR HERE }); 
                
            </script>
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>
原文链接:https://www.f2er.com/dojo/291697.html

猜你在找的Dojo相关文章