Dijit Tree Example

最新推荐文章于 2019-01-02 10:25:00 发布
最新推荐文章于 2019-01-02 10:25:00 发布
阅读量558 收藏
点赞数
分类专栏： dojo学习 文章标签： dojo dijit

Detect when tree has finished loading

Use the onLoadDeferred to detect when the Tree has finished loading


var tree = registry.byId('myTree');

// Connect to tree onLoad to do work once it has initialized
tree.onLoadDeferred.then(function(){
    console.debug("tree onLoad here!");
    dojo.disconnect(tmph);

    // do work here
});

Expanding and selecting tree nodes programmatically

There are a number of flags and methods for expanding/collapsing the tree and for selecting certain nodes.

If the autoExpand flag is passed to the constructor, the Tree is initially shown with all nodes expanded.

You can then call collapseAll() andexpandAll() to collapse and expand the Tree, respectively.

Also, dijit.Tree has apaths attribute, which can be set with the usualtree.set('paths',[path1,path2]) syntax, where each path is an array of item id’s,starting with the root node and going down to the leaf.It serves two purposes: to expand the Tree to the specified nodes, and to select those nodes.

Combining those all together into an example:

<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="dijit/themes/claro/claro.css">
	
	<script>dojoConfig = {parseOnLoad: true}</script>
	<script src='dojo/dojo.js'></script>
	
	<script>
		require(["dojo/parser", "dojo/store/Memory", "dijit/tree/ObjectStoreModel", "dijit/Tree"]);
	</script>
</head>
<body class="claro">
    <div data-dojo-type="dojo/store/Memory" data-dojo-id="myStore">
    <!-- Create store with inlined data.
        For larger data sets should use dojo.store.JsonRest etc. instead of dojo.store.Memory. -->
    <script type="dojo/method">
         this.setData([
            { id: 'world', name:'The earth', type:'planet', population: '6 billion'},
            { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
                    timezone: '-1 UTC to +4 UTC', parent: 'world'},
                { id: 'EG', name:'Egypt', type:'country', parent: 'AF' },
                { id: 'KE', name:'Kenya', type:'country', parent: 'AF' },
                    { id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' },
                    { id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' },
                { id: 'SD', name:'Sudan', type:'country', parent: 'AF' },
                    { id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' },
            { id: 'AS', name:'Asia', type:'continent', parent: 'world' },
                { id: 'CN', name:'China', type:'country', parent: 'AS' },
                { id: 'IN', name:'India', type:'country', parent: 'AS' },
                { id: 'RU', name:'Russia', type:'country', parent: 'AS' },
                { id: 'MN', name:'Mongolia', type:'country', parent: 'AS' },
            { id: 'OC', name:'Oceania', type:'continent', population:'21 million', parent: 'world'},
            { id: 'EU', name:'Europe', type:'continent', parent: 'world' },
                { id: 'DE', name:'Germany', type:'country', parent: 'EU' },
                { id: 'FR', name:'France', type:'country', parent: 'EU' },
                { id: 'ES', name:'Spain', type:'country', parent: 'EU' },
                { id: 'IT', name:'Italy', type:'country', parent: 'EU' },
            { id: 'NA', name:'North America', type:'continent', parent: 'world' },
            { id: 'SA', name:'South America', type:'continent', parent: 'world' }
        ]);
    </script>
    <script type="dojo/method" data-dojo-event="getChildren" data-dojo-args="object">
         // Supply a getChildren() method to store for the data model where
         // children objects point to their parent (aka relational model)
         return this.query({parent: this.getIdentity(object)});
    </script>
</div>

<!-- Create the model bridging the store and the Tree -->
<div data-dojo-type="dijit/tree/ObjectStoreModel" data-dojo-id="myModel"
  data-dojo-props="store: myStore, query: {id: 'world'}"></div>

<!-- buttons to test Tree features -->
<button οnclick="mytree.collapseAll();">
    Collapse all
</button>
<button οnclick="mytree.expandAll();">
    Expand all
</button>
<button οnclick="mytree.set('paths', [ ['world', 'AF', 'KE', 'Nairobi'], ['world', 'SA'] ] );">
    Select Nairobi, South America
</button>

<!-- Create the tree -->
<div data-dojo-type="dijit/Tree" data-dojo-id="mytree"
        data-dojo-props="model: myModel, autoExpand: true"></div>
</body>
</html>

One complication with using ‘paths’ is that you must know the full path to the node in your data you are trying to select.(And by the way, there may be more than one path to a node, if your Tree has nodes with multiple parents.)

The solution to that problem will depend greatly on your data layout, and the query capabilities of your store.


Making nodes expand by clicking on the label

Nodes always expand/collapse by clicking on the [+] icon, but to make a node expand when clicking on the label,simply set theopenOnClick attribute totrue


<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src='dojo/dojo.js'></script>
    
    <script>
require(["dojo/parser", "dojo/store/Memory", "dijit/tree/ObjectStoreModel", "dijit/Tree"]);
    </script>
</head>
<body class="claro">
    <div data-dojo-type="dojo/store/Memory" data-dojo-id="memoryStore">
    <!-- Create store with inlined data.
        For larger data sets should use dojo.store.JsonRest etc. instead of dojo.store.Memory. -->
    <script type="dojo/method">
         this.setData([
            { id: 'world', name:'The earth', type:'planet', population: '6 billion'},
            { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
                    timezone: '-1 UTC to +4 UTC', parent: 'world'},
                { id: 'EG', name:'Egypt', type:'country', parent: 'AF' },
                { id: 'KE', name:'Kenya', type:'country', parent: 'AF' },
                    { id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' },
                    { id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' },
                { id: 'SD', name:'Sudan', type:'country', parent: 'AF' },
                    { id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' },
            { id: 'AS', name:'Asia', type:'continent', parent: 'world' },
                { id: 'CN', name:'China', type:'country', parent: 'AS' },
                { id: 'IN', name:'India', type:'country', parent: 'AS' },
                { id: 'RU', name:'Russia', type:'country', parent: 'AS' },
                { id: 'MN', name:'Mongolia', type:'country', parent: 'AS' },
            { id: 'OC', name:'Oceania', type:'continent', population:'21 million', parent: 'world'},
            { id: 'EU', name:'Europe', type:'continent', parent: 'world' },
                { id: 'DE', name:'Germany', type:'country', parent: 'EU' },
                { id: 'FR', name:'France', type:'country', parent: 'EU' },
                { id: 'ES', name:'Spain', type:'country', parent: 'EU' },
                { id: 'IT', name:'Italy', type:'country', parent: 'EU' },
            { id: 'NA', name:'North America', type:'continent', parent: 'world' },
            { id: 'SA', name:'South America', type:'continent', parent: 'world' }
        ]);
    </script>
    <script type="dojo/method" data-dojo-event="getChildren" data-dojo-args="object">
         // Supply a getChildren() method to store for the data model where
         // children objects point to their parent (aka relational model)
         return this.query({parent: object.id});
    </script>
</div>

<!-- Create the model bridging the store and the Tree -->
<div data-dojo-type="dijit/tree/ObjectStoreModel" data-dojo-id="myModel"
  data-dojo-props="store: memoryStore, query: {id: 'world'}"></div>

<!-- Create the tree -->
<div data-dojo-type="dijit/Tree" id="mytree"
    data-dojo-props="model: myModel, openOnClick: true"></div>
</body>
</html>


Rich Text Labels

In this example, _createTreeNode() is overridden to allow HTML markup in the tree.This is a hack, in the sense that the formatting may not be perfect for large (in pixels) elements.But the tree will display and work properly regardless, and for simple markup, ex: bold, it works great.

<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="dijit/themes/claro/claro.css">
	
	<script>dojoConfig = {parseOnLoad: true}</script>
	<script src='dojo/dojo.js'></script>
	
	<script>
require([
    "dojo/_base/declare", "dojo/_base/window", "dojo/store/Memory",
    "dijit/tree/ObjectStoreModel", "dijit/Tree",
    "dojo/domReady!"
], function(declare, win, Memory, ObjectStoreModel, Tree){

    // Create test store, adding getChildren() method needed by ObjectStoreModel
    var store = new Memory({
        data: [
            { id: 0, label: "root"},
               {id: 1, label: "<i>hello</i>", parent: 0},
               {id: 2, label: "<b>world</b>", parent: 0},
        ],
        getChildren: function(object){
            return this.query({parent: object.id});
        }
    });

    // Create the model
    var model = new ObjectStoreModel({
        store: store,
        query: {id: 0},
        labelAttr: "label"
    });

    // Custom TreeNode class (based on dijit.TreeNode) that allows rich text labels
    var MyTreeNode = declare(Tree._TreeNode, {
        _setLabelAttr: {node: "labelNode", type: "innerHTML"}
    });

    // Create the Tree.
    var tree = new Tree({
        model: model,
        _createTreeNode: function(args){
           return new MyTreeNode(args);
        }
    });
    tree.placeAt(win.body());
    tree.startup();
});
	</script>
</head>
<body class="claro">
    
</body>
</html>


Tree menu with links on nodes

This example shows you how to use a tree to build a navigation menu.

<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src='dojo/dojo.js'></script>
    
    <script>
 require([
     "dojo/_base/window", "dojo/store/Memory",
     "dijit/tree/ObjectStoreModel", "dijit/Tree",
     "dojo/domReady!"
 ], function(win, Memory, ObjectStoreModel, Tree){

     // Create test store, adding the getChildren() method required by ObjectStoreModel
     var myStore = new Memory({
         data: [
            { id: 1, name: 'Dijit Tree API', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree', root: true },
            { id: 2, name: 'Dijit Tree.model API', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree.model', parent: 1 },
            { id: 3, name: 'Dijit Tree.ForestStoreModel API', url: 'http://dojotoolkit.org/api/1.6/dijit.tree.ForestStoreModel', parent: 1 },
            { id: 4, name: 'Dijit Tree.TreeStoreModel API', url: 'http://dojotoolkit.org/api/1.6/dijit.tree.TreeStoreModel', parent: 1 },
         ],
         getChildren: function(object){
             return this.query({parent: object.id});
         }
     });

     // Create the model
     var myModel = new ObjectStoreModel({
         store: myStore,
         query: {root: true}
     });

     // Create the Tree, specifying an onClick method
     (new Tree({
         model: myModel,
         onClick: function(item){
             // Get the URL from the item, and navigate to it
             location.href = item.url;
         }
     })).placeAt(win.body()).startup();
});
    </script>
</head>
<body class="claro">
    
</body>
</html>



http://dojotoolkit.org/reference-guide/1.10/dijit/Tree-examples.html

qingqingzijinxin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dojo 树形列表 dijit.tree
03-14
Dijit是Dojo Toolkit的一部分，专门提供了一系列可复用的UI控件，其中包括我们关注的“dijit.tree”，即树形列表。在本篇文章中，我们将深入探讨这五个关于dijit.tree的例子，并了解如何在实际应用中实现它们。 1. ...
Dijit可视化组件——Tree（一）
在GIS圈混
01-13 510
在Web项目中，客户对前端的展示要求越来越高，并逐步向桌面应用靠拢。Html语言本身的基础元素已经很难满足项目中的要求，致使在开发中，经常需要使用Html、JavaScript和CSS组合完成页面元素的展示，这无疑增加了开发周期和人力成本。而且由于缺乏专人的维护，这些页面元素难以复用。基于上述状况，本人急需学习一个成熟的、稳定的，包含可见组件的JS框架，然后就开始Google、BaidDu，查找资
DOJO-dijit.Tree(异步树的一种实现方式)
crazy code
04-20 2132
dojo.require("dijit.Tree"); dojo.require("dojo.data.ItemFileWriteStore"); dojo.require("dijit.tree.ForestStoreModel"); dojo.require("dojox.data.JsonRestStore"); //TreeStore var store = new
dijit/Tree 部件美化
Burongwawa520的专栏
03-07 1317
说到美化，无非就是图标、样式等等方面的内容，下面就将就如何替换dijit/Tree部件中的图标： 1.准备样式： .organ_icon {background: url("../images/widgets/orang.jpg") no-repeat; padding-left:16px; }  /*padding-left属性必须设置，否则不显示图标*/ .user_icon {back
四两拨千斤——Dijit Tree 拖拽（DnD, Drag & Drop）的精细控制
沧海一粟 —— 技术随手记
10-24 4787
介绍 dijit.Tree是一款很有用的Dojo控件，用来在页面上表示树形数据。像Dojo其他很多控件一样，它可以直接和后台的数据连接，并实时显示在页面上。已经有很多帖子介绍如何创建树、加入点击事件及右键菜单等，这儿专门介绍dijit.Tree拖拽的精细控制。   先说说举例用的应用场景。一个食品原材料供应商要建立自己的产品列表（New List），该列表包含几个大类，大类下面又有小类，直至
dojo checkbox tree
08-03
利用dojo的ajax实现树结构，带有checkbox功能
dojo Tree数据交互
04-09
在dojo Tree中，可以使用`dijit.tree.ForestStoreModel`或`dijit.tree.model`等模型来处理节点的移动操作。通常，这涉及到调用`move`方法，传入要移动的节点、目标父节点以及在目标节点下的插入位置。 另一份文件...
dijit-simple-bind
06-18
dijit-简单绑定 向 observable 添加双向绑定。 // bind with properties that are not the same var object1 = new Stateful ( { a : 1 , b , 2 } ) ; var object2 = new Stateful ( { x : 0 , y : 0 } ) ; bind ...
dojo动态tree
12-10
2. **定义模型**：使用`dijit/tree/ObjectStoreModel`或`dijit/tree/ForestStoreModel`将Store与Tree关联起来，设置如何从Store获取和显示数据。 3. **创建Tree实例**：利用`dijit/Tree`构造函数创建一个Tree实例，...
dojo组件使用---tree组件的局部更新
weixin_30686845的博客
01-02 130
dojo的tree组件使用主要涉及的几个api： 　　1、dijit/Tree：树组件 　　2、dijit/Tree._TreeNode:树节点组件，局部更新时就是修改这个组件。（由于数组件的store使用Memory，所以需要手动同步更新store）； 　　3、dijit/tree/ObjectStoreModel:数组件数据操作模块。 具体操作： 　　1、拿到dijit/Tre...
项目中使用Tree/LazyTreeGrid
纪争光
12-30 2087
Tree/LazyTreeGridTree:dijit.Tree，renderer后如下图所示，就是我们平时所常见的树形结构，在项目中使用编程式创建tree。也可以通过DojoAPI来看下飞速创建tree的demo：require(["dojo/ready", "dijit/Tree", "dojo/data/ItemFileReadStore", "dijit/tree/ForestStoreM
装扮装扮dijit.Tree
沧海一粟 —— 技术随手记
11-01 2579
介绍 dijit.Tree（Dojo 1.7.3）是Dojo的树形UI控件。根据上设的dojo theme不同，可以有几种不同的标准风格（claro，tundra，nihilo和soria）。但要实现自己的风格，还需要用点手段“装扮装扮”。 创建一棵树 CSS代码 @import "../js/dijit/themes/tundra/tundra.css"; html,
dijit.tree.Model --dojo学习
weixin_30678349的博客
11-25 104
一个digit.Tree用来以图形化的方式表现一些层次结构的数据，对于实际的数据是使用TreeModel来表现。 一般来说，数据最终是来自一个data store，但是Tree提供的数据接口是“digit.tree.Model”,这是一个符合确定的API方法的对象，它可以使Tree能够访问各种格式的数据，比如items引用了它们的父Items的data store。{name: 'folder1...
使用dojo的tree
weixin_33949359的博客
11-12 130
dojo的Tree非常是灵活，可是官方站点上的样例却非常少，并且也比較分散，兴许将持续完好本样例。 总的来说，要使用tree，要接触到三个类："dojo/store/JsonRest","dijit/tree/ObjectStoreModel","dijit/Tree"。 通过JsonRest异步从服务端获取数据。 ObjectStoreModel能够设置推断当前数据是否有子结点的方...
dojo中tree的使用教程(二)
yipanbo的专栏
06-04 5081
接上篇。 经过四个小时的努力，终于把cbtree基本搞定。雏形也基本完成，这里把代码贴出来。 代码贴出来之前还是先来个图吧。 cbtree的基本使用： "> My JSP 'treeTest.jsp' starting page tree测试
Dojo学习8 使用恐怖的dijit.Tree
weixin_33851604的博客
11-02 109
为什么80%的码农都做不了架构师？>>> ...
dojo中Tree的使用
风的专栏
03-18 2203
我用的dojo是1.9版本的，所以使用新的store。 创建一棵最简单的树需要如下几个环节： 1、创建一个store，并为其实现getChildren方法（获取指定节点的子节点，数据层面）。 2、使用创建的store创建一个Model，Model只能是ObjectStoreModel。创建Model的时候一定要指定一个query配置项，该配置项决定了树的根，根必须是唯一。 3、使用Mode
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:'true'" style="background-color: rgb(220, 245, 233); width: 270px;"> <h3>&nbsp&nbsp&nbsp&nbsp&nbsp功能区</h3> </div> <div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="background-color: #ffffff; padding: 0;"> </div> </div>如何改良这段代码，使功能区与viewDiv之间平滑过渡
最新发布
06-09
可以尝试给 `BorderContainer` 添加一个 `dijit/BackgroundIframe`，这样可以解决两个区域之间的过渡问题，代码如下： ``` <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值