dijit.tree使用

最新推荐文章于 2017-09-21 15:00:00 发布
最新推荐文章于 2017-09-21 15:00:00 发布
阅读量524 收藏
点赞数
分类专栏： DOJO 文章标签： function json 测试 url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gino_Zhang/article/details/6711128
版权

1.加载

dojo.addOnLoad(function() {

     getTreeJson();

  });

function getTreeJson() {

   dojo.xhrPost( {

           url : 'getTreeJson.do',//测试

           preventCache : true,

           handleAs : 'json',load : function(json) {

               loadTree(json);

            } 

       });

}

 

 

 

 没完，待续... 

 


                

        

        

    

  


    

      

        

            

              
                
                  Gino_Zhang
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
四两拨千斤——Dijit Tree 拖拽（DnD, Drag & Drop）的精细控制

				
			

			

				

					沧海一粟 —— 技术随手记
				

				

					10-24
					
					4822
					
				

			

		

		

			
				
介绍
dijit.Tree是一款很有用的Dojo控件，用来在页面上表示树形数据。像Dojo其他很多控件一样，它可以直接和后台的数据连接，并实时显示在页面上。已经有很多帖子介绍如何创建树、加入点击事件及右键菜单等，这儿专门介绍dijit.Tree拖拽的精细控制。
 
先说说举例用的应用场景。一个食品原材料供应商要建立自己的产品列表（New List），该列表包含几个大类，大类下面又有小类，直至

			
		

	



                

            
              



	

		

			

				
					
控制element tree组件展开子节点

				
			

			

				

					我是我家小女孩
				

				

					05-08
					
					3438
					
				

			

		

		

			
				
如果tree组件没有添加default-expand-all，则是收起状态（下图）。



如果default-expand-all设为true，则是全展开子节点。



现在是用按钮控制默认打开的树形节点，而不是全部。采用以下方法。利用文档中的方法通过子default-expanded-keys默认打开某个节点。





element文档里面有这个方法。idArr是我定义的数组...

			
		

	



              


  
              

                


	

		

			

				
					
Dijit可视化组件——Tree（一）

				
			

			

				

					在GIS圈混
				

				

					01-13
					
					544
					
				

			

		

		

			
				
在Web项目中，客户对前端的展示要求越来越高，并逐步向桌面应用靠拢。Html语言本身的基础元素已经很难满足项目中的要求，致使在开发中，经常需要使用Html、JavaScript和CSS组合完成页面元素的展示，这无疑增加了开发周期和人力成本。而且由于缺乏专人的维护，这些页面元素难以复用。基于上述状况，本人急需学习一个成熟的、稳定的，包含可见组件的JS框架，然后就开始Google、BaidDu，查找资

			
		

	





	

		

			

				
					
dojo 的 dijit.tree 基本用法（转）

				
			

			

				

					congzhe5209的博客
				

				

					12-18
					
					198
					
				

			

		

		

			
				
可以说dojo0.9bate的dijit.Tree太灵活了，功能太强大了。所以使用的时候定制和编程就要很多了。Dijit.Tree数据源必须是Store，常用的是dojo.data.JsonItemStore ，不能够使用inl...

			
		

	



		

			
		



	

		

			

				
					
dijit.Tree--dojo学习

				
			

			

				

					weixin_30599769的博客
				

				

					12-03
					
					139
					
				

			

		

		

			
				
在用户界面中的树可以表现很长的、分层次的结点列表，文件系统就
是一个经典的例子，如Windows的资源管理器，Dijit tree widget就
是这样的一个组件。
dojo创建树非常简单，即使是创建一棵复杂的树,你可以实现：1、连接你的tree到任意dojo.data store,带或不带根item。2、嵌套items任意深度，每一个分支都是独立展开的。3、应用不同的图标到不同枝或叶。4...

			
		

	





	

		

			

				
					
装扮装扮dijit.Tree

				
			

			

				

					沧海一粟 —— 技术随手记
				

				

					11-01
					
					2617
					
				

			

		

		

			
				
介绍
dijit.Tree（Dojo 1.7.3）是Dojo的树形UI控件。根据上设的dojo theme不同，可以有几种不同的标准风格（claro，tundra，nihilo和soria）。但要实现自己的风格，还需要用点手段“装扮装扮”。
创建一棵树



CSS代码

@import "../js/dijit/themes/tundra/tundra.css";


	html,

			
		

	





	

		

			

				
					
Dojo学习14 dijit.Tree 捕获点击事件(execute)

				
			

			

				

					Fish3812的专栏
				

				

					05-22
					
					2476
					
				

			

		

		

			
				
14. dijit.Tree 捕获点击事件(execute)对于Tree的点击事件，和通常的事件处理是一样的，都是publish 和 subscribe来实现的。程序如下：======================        "http://www.w3.org/TR/html4/strict.dtd"> Dijit Tree Test   @import "../../dojo/resou

			
		

	





	

		

			

				
					
dojo 树形列表 dijit.tree

				
			

			

				

					03-14
				

			

		

		

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

			
		

	





	

		

			

				
					
dojo checkbox tree

				
			

			

				

					08-03
				

			

		

		

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

			
		

	





	

		

			

				
					
关于tree节点的刷新

				
			

			

				

					weixin_30878361的博客
				

				

					09-21
					
					1340
					
				

			

		

		

			
				
1.刷新节点分为刷新整个树和刷新指定节点
（1）刷新整个树

$("#tree").tree("reload");

（2）刷新指定节点（方法：传入需要刷新节点的父节点的target属性作为参数）

var noderm=$("#tree").tree("getSelected");
var parent=$("#tree").tree("getParent",noderm.tar...

			
		

	





	

		

			

				
					
checkbox树形展开效果

				
			

			

				

					10-30
				

			

		

		

			
				
树形结构代码。

			
		

	





	

		

			

				
					
dijit.tree.TreeStoreModel和dijit.tree.ForestStoreModel--dojo学习

				
			

			

				

					weixin_30625691的博客
				

				

					11-16
					
					157
					
				

			

		

		

			
				
dijit.tree.TreeStoreModel

TreeStoreModel把只有一个根Item的data store连接到digit.Tree上。一个例子比如一个员工数据库，公司的CEO是根结点，其他所有员工都要直接或间接向CEO汇报工作。
下面是一个例子了：<div dojoType="dojo.data.ItemFileWriteStore" jsId="store"
...

			
		

	





	

		

			

				
					
dijit.tree的简单应用实例

				
			

			

				

					纪争光
				

				

					10-30
					
					3906
					
				

			

		

		

			
				
近来项目中总部功能有几个关键页面需要用树形结构来展示相关数据，便对dojo中的tree进行了一些应用。Dojo官网上对于dojo.tree（1.7）的介绍止步于基本方法和属性结构的介绍，在http://dojotoolkit.org/reference-guide/1.8/dijit/Tree.html#dijit-tree 中可以找到比较通俗易懂的Demo。如下图： 代码如下：

			
		

	





	

		

			

				
					
dijit.Tree（1）——点击节点时执行一些定制操作

				
			

			

				

					earthhour的专栏
				

				

					06-07
					
					1321
					
				

			

		

		

			
				
var tree = new Tree({
	model: model,
	//openOnClick:true,
	persist: false
}, "divTree"); 
tree.startup();

tree.on("click",function(object){
        alert(object.id+':'+object.name);
	// 执行一些其他操作
});

			
		

	





	

		

			

				
					
dijit/Tree 部件美化

				
			

			

				

					Burongwawa520的专栏
				

				

					03-07
					
					1345
					
				

			

		

		

			
				
说到美化，无非就是图标、样式等等方面的内容，下面就将就如何替换dijit/Tree部件中的图标：
1.准备样式：
.organ_icon {background: url("../images/widgets/orang.jpg") no-repeat; padding-left:16px; }  /*padding-left属性必须设置，否则不显示图标*/
.user_icon {back

			
		

	





	

		

			

				
					
dojo中tree的使用教程(一)

				
			

			

				

					yipanbo的专栏
				

				

					06-03
					
					3105
					
				

			

		

		

			
				
已经基本了解了dojo中tree的使用，现在做一些比较经典的应用。
先截个图，展示一下总体的目标：

大致就是左边是一棵树，右边是一棵树，然后用户可以方便的选择。
好了，现在分步来实现，先是这个框架,代码：


  
    ">
    My JSP 'treeTest.jsp' starting page
	
	
  
  
  
    tree测试
 
     
	    
	

			
		

	





	

		

			

				
					
有关dojo中dijit/Tree的操作增、删、修改

				
			

			

				

					maojunm的专栏
				

				

					03-11
					
					1211
					
				

			

		

		

			
				
/*创建对象树*/
createTree.jsdefine(["dojo/aspect", 
        "dijit/registry",
        "dijit/tree/ObjectStoreModel",
        "dijit/Tree",
        "dojo/store/Memory",
        "dojo/store/Observable",

			
		

	





	

		

			

				
					
dojo中tree的使用教程(二)

				
			

			

				

					yipanbo的专栏
				

				

					06-04
					
					5114
					
				

			

		

		

			
				
接上篇。

经过四个小时的努力，终于把cbtree基本搞定。雏形也基本完成，这里把代码贴出来。
代码贴出来之前还是先来个图吧。

cbtree的基本使用：


  
    ">
    My JSP 'treeTest.jsp' starting page
	
	
	
	
  
  
  
    tree测试

			
		

	





	

		

			

				
					
使用dojo的tree

				
			

			

				

					阿生的专栏
				

				

					10-28
					
					2379
					
				

			

		

		

			
				
dojo的Tree很是灵活，但是官方网站上的例子却很少，而且也比较分散，后续将持续完善本例子。
总的来说，要使用tree，要接触到三个类："dojo/store/JsonRest","dijit/tree/ObjectStoreModel","dijit/Tree"。
通过JsonRest异步从服务端获取数据。
ObjectStoreModel可以设置判断当前数据是否有子结点的方法、数据中哪

			
		

	





	

		

			

				
					
Dojo中文使用手册：快速入门与Dijit小部件解析

				
			

			

				

					
				

			

		

		

			
				
"Dojo中文使用手册，适用于0.9、1.0及1.x版本，涵盖快速安装、Dojo与Dijit的使用、JavaScript协作、调试以及Dojox扩展包等内容。"  Dojo是一个分层的JavaScript库，其核心架构包括包系统和语言库。包系统模仿Java的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值