`

Dojo.Tree

    博客分类:
  • Dojo
阅读更多
<!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, 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");
        </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, 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");
        </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, 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.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,
                    query: {
                        "type": "continent"
                    },
                    rootId: "root",
                    rootLabel: "Continents",
                    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, 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.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, 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>
            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>
分享到:
评论

相关推荐

    dojo 树形列表 dijit.tree

    在Dojo中,我们可以使用`dijit.tree.ForestStoreModel`来定义数据模型,`dijit.Tree`来创建树视图。每个节点可以包含子节点,通过递归的方式展示层次结构。配置包括定义节点的数据标识(id),以及如何获取子节点的...

    dojo精品中文教程(包一)

    Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的TitlePane Dojo学习笔记--页面...

    dojo精品中文教程(包二)

    Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的TitlePane Dojo学习笔记--页面...

    dojo精品中文教程(全)

    Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的TitlePane Dojo学习笔记--页面...

    dojo精品中文教程(包三)

    Dojo学习笔记--dijit.Tree Dojo学习笔记--dojo.graphics.color & dojo.uri.Uri Dojo学习笔记--dojo.string & dojo.lang Dojo学习笔记--动态生成widget Dojo学习笔记--开发自己的TitlePane Dojo学习笔记--页面...

    dojo相关的js

    同时,还可以利用Dojo的Data Stores(数据存储)和Widgets(组件)来创建交互式的用户界面,例如Grid、Tree等,进一步提升用户体验。 标签"dojo"提示我们关注的重点是Dojo框架本身,所以了解Dojo的模块系统、主题、...

    dojo Tree数据交互

    在dojo Tree中,可以使用`dijit.tree.ForestStoreModel`或`dijit.tree.model`等模型来处理节点的移动操作。通常,这涉及到调用`move`方法,传入要移动的节点、目标父节点以及在目标节点下的插入位置。 另一份文件...

    dojo动态tree

    tree.startup(); }); ``` 在这个例子中,我们创建了一个简单的内存存储和对象存储模型,然后创建了一个Tree实例,并将其插入到ID为"treeNode"的DOM元素中。 ### 总结 Dojo动态Tree是一个强大且灵活的工具,适用...

    实战Dojo工具包 PDF

    例如,`dijit.form.Button`可以创建交互式按钮,`dijit.Tree`则可构建可折叠的层级结构,这些组件通过声明式语法或者程序化方式即可轻松创建。 此外,Dojo还提供了数据绑定和模型层支持,比如`dojo.data`模块,它...

    dojo学习笔记

    - **概述**:Dijit是一个基于Dojo的小部件框架,它包含了一系列预构建的用户界面组件,如TAB、TREE等,这些组件极大地简化了复杂用户界面的开发工作。 - **优势**:Dijit使得开发者能够轻松创建可复用且高度定制化...

    struts2-dojo-tree各种实例

    Struts2 Dojo Tree 是一个基于Struts2框架和Dojo JavaScript库的组件,用于在Web应用程序中创建可交互的树形视图。这个组件允许用户以图形化的方式浏览和操作层次结构数据,例如文件系统、组织结构或者数据库中的...

    struts2_jodo_tree

    dojo.require("dijit.tree.ForestStoreModel"); dojo.require("dijit.Tree"); function init() { var store = new dojo.data.ItemFileWriteStore({data: data}); var model = new dijit.tree.ForestStoreModel...

    dojo树实例

    var model = new dijit.tree.ForestStoreModel({ store: store, rootId: "root", rootLabel: "根节点", mayHaveChildren: function(item) { return item.children !== undefined; } }); ``` 4. **创建树组件*...

    dojo checkbox tree

    利用dojo的ajax实现树结构,带有checkbox功能

    dojo任意级树的节点转移

    Dojo Tree通过`dijit/tree/ForestStoreModel`和`dijit/Tree`等组件提供了强大的树型数据模型和渲染能力。 "任意级树的节点转移"涉及到的主要知识点有: 1. **数据模型**:在Dojo Tree中,每个节点都由一个数据对象...

    Dojo API 1.9.chm 离线参考手册

    6. **dojo/store** 和 **dijit/tree**: Dojo的`dojo/store`抽象了数据存储,与视图层分离,便于数据源的切换。结合`dijit/tree`,可以构建交互式的树形数据结构,广泛应用于导航菜单或文件目录展示。 7. **dojo/xhr...

    基于dojo的动态树

    Dojo Toolkit是一个功能强大的JavaScript库,它提供了多种UI组件,包括Tree组件,可以方便地在网页上构建动态、可交互的树形结构。 在【描述】中提到,这个例子不仅包含了基于Dojo的动态树的源代码,还提供了运行...

    Xpage学习笔记

    #### 2.5.4 在 Xpage 中使用树(dijit.Tree) - **JSON 与 XML 数据源**:可以用 JSON 或 XML 文件作为数据源。 - **Box 树与 Order 树**:展示不同结构的树形数据。 - **对树进行添加、删除及重命名操作**:可以直接...

    dojo document API 离线版制作依赖文件

    综上所述,这个压缩包提供了制作Dojo 1.9 API离线版所需的全部关键文件,包括详细的API描述(details.xml)、目录结构(tree.json)和主界面(tree.html)。开发者可以利用这些资源,在本地构建一个完整的Dojo API...

    利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

    dojo.require("dojo.widget.Tree"); dojo.require("dojo.widget.TreeNode"); // 其他必要模块... ``` 2. **定义TreeWidget**:在body中定义TreeWidget及其相关属性。 ```html ...

Global site tag (gtag.js) - Google Analytics