dhtmlxtree树介绍

于 2018-04-08 09:09:33 发布
阅读量722 收藏
点赞数
分类专栏： 前端 文章标签： Dhtmlx树
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zouxuhang/article/details/79847207
版权

        dhtmlxTree是一个灵活，智能，易用的JS树形组件，它为开发者提供了丰富的特性，包括高级拖拽功能，动态载入节点，自定义视图，无限数量节点等.dhtmlxTree通过AJAX技术进行交互，因此无需刷新页面即可更新数据。重要的是，dhtmlxTree提供了完整的API以节省开发时间。

下面将通过一个简单的例子演示其使用方法。

1.初始配置

 

  1. <！ - tree.html引入必要文件 - >
  2. <HEAD>
  3.  <link rel = “stylesheet” type = “text / css” href = “path / dhtmlxtree.css” >   
  4.  <script src = “path / dhtmlxcommon.js” > </ script> 
  5.  <script src = “path / dhtmlxtree.js” > </ script> 
  6. </ HEAD>
  7.  
  8. <！ - 自定义js文件必须放在页面底部其中引用的相对路径应该是从页面相对 - >
  9. <script src = “path / tree.js” > </ script> 
 

2.树形容器
 

 

  1. <！ - 资源组树容器 - >
  2. <div id = “resgroupTree” style = “ width ：100 ％; 身高：98 ％; “ > </ div>  
 

3.简单配置（tree.js）
 

 

  1. //创建树形对象
  2. var tree = new dhtmlXTreeObject （“resgroupTree” ，“100％” ，“100％” ，0 ）; 
 

dhtmlXTreeObject方法的四个参数分别是：树形容器ID，树宽度，树高度，根节点的标识。
 

 

  1. //设置树形节点所用图片路径
  2. 树。setImagePath （“路径/ IMGS /” ）;
  3. //设置默认的数据格式，包括：JSON XML CSV 
  4. 树。setDataMode （'XML' ）;
  5. //设置数据来源，dhtmlxTree支持多种数据格式，这里是XML格式
  6. // file / xmlString：xml文件路径或xml字符串;函数：可选参数，当数据载入之后回调
  7. 树。loadXML的（文件/ URL ，函数）;  
  8. 树。loadXMLString （的xmlString ，函数）; 
  9.  
  10. //数据获取
  11. 树。getUserData （ID ，“名称” ）; 
  12. 树。getItemText （ID ）;
  13. VAR selectedItems = 树。getAllChecked （）; //获取所有选中的商品，返回的itemId，多个的itemId用逗号分隔 
  14.  
  15.  
  16. //设置显示复选框
  17. // mode：true - 显示所有复选框，false - 隐藏所有复选框
  18. // hidden：true - 不渲染复选框，false - 可通过showItemCheckbox（）方法显示复选框
  19. 树。enableCheckBoxes （模式，隐藏）;
  20. //设置为三态复选框
  21. 树。enableThreeStateCheckboxes （真| 假）;
  22. //设置复选框可用状态
  23. 树。disableCheckbox （的itemId ，模式）;
  24. //设置复选框选中状态
  25. 树。setCheck （ID ，模式）;
  26. //获取节点的选中状态
  27. VAR checkState = 树。isItemChecked （的itemId ）;
  28.  
  29. //设置显示单选按钮
  30. 树。enableRadiobuttons （真）;
  31. //设置单选按钮可用状态
  32. 树。enableRadiobuttons （真，的itemId ）;
  33. //设置只选一个的单选按钮模式mode：true / false，itemId：这个节点将被默认选中
  34. 树。enableSingleRadioMode （模式，的itemId ）;
  35.  
  36. //设置节点状态
  37. //选中节点mode：true - 节点被选中后会调用设置的回调函数preserve：true - 保存之前的选中
  38. 树。选择信息（的itemId ，模式，保存）;
  39. //清除选中
  40. 树。clearSelection （的itemId ）;
  41. //使用多选，即可使用ctrl +点击选中多个节点model：true / false，strict：true - 同一级节点才能多选
  42. 树。enableMultiselection （模式，严格）;
  43. //设置节点图片
  44. 树。setItemImage （的的itemId ，image0 ，图像1 ）; // image0：打开状态图片，image1：收起状态图片 
  45.  
  46. //设置自动载入，可提高性能
  47. 树。setXMLAutoLoading （URL ）;
 

4. xml文件的格式
 

下面是一个简要的XML文件示例：
 

 

  1. <？XML版本= '1.0' 编码= 'UTF-8' ？>
  2. <tree id = “0” >  
  3.  <item text = “item0” id = “1” >  
  4.  <userdata name = “dataName0” > data0 </ userdata> 
  5.  <userdata name = “dataName1” > data1 </ userdata> 
  6.  ......
  7.  <item text = “item1” id = “2” >  
  8.  .......
  9.  </项目>
  10.  ......
  11.  </项目> 
  12.  ......
  13. </树>
 

<item> 标签包含一系列属性，下面是这些属性的说明：
 

必选属性：
 

  • 文本：节点名称
  • ID：节点ID
 

可选属性：
 

  • 工具提示：节点的尖端
  • IM0：没有子节点的节点图片
  • IM1：展开节点图片
  • IM2：收起节点图片
  • ACOL：节点未选中的背景颜色
  • SCOL：节点已选中的背景颜色
  • 选择：载入时被选中的节点，可以使任意值
  • 打开：节点是否展开，可以使任意值
  • 拨打：选中时执行的函数
  • 勾选：如果有checkbox则选中它（在三态复选框中，1 - 全选，-1 - 未全选）
  • nocheckbox：指示不渲染复选框
  • 孩子：指定一个节点是否有子节点，1 - 有，0 - 没有
  • 电台：如果不为空，则此节点的子节点有单选按钮
 

可以在  <userdata> 标签中设置其他数据，它只有一个属性  name。
 

5.节点事件
 

dhtmlxTree支持多种节点操作，包括节点的CRUD以及节点的多种事件，这里只简单介绍几种节点事件。
 

 

  1. //设置节点点击事件
  2. 树。setOnClickHandler （tonclick ）;
  3. 函数tonclick （id ）{ 
  4.  控制台。日志（“项目” + 树。getItemText （ID ）+ “选择” ）;   
  5. };
  6. //设置节点选中事件
  7. 树。setOnCheckHandler （toncheck ）;
  8. 函数toncheck （id ，state ）{ 
  9.  控制台。日志（“项目” + 树。getItemText （ID ）+ “是” + （（州）？“检查” ：“未登记” ））;        
  10. };
  11. //设置开始展开节点事件
  12. 树。setOnOpenStartHandler （topenstart ）;
  13. //设置展开节点结束事件
  14. 树。setOnOpenEndHandler （topenend ）;
 

6.完整的例子
 

HTML：
 

 

  1. <HEAD>
  2.  <link rel = “stylesheet” type = “text / css” href = “path / dhtmlxtree.css” >   
  3.  <script src = “path / dhtmlxcommon.js” > </ script> 
  4.  <script src = “path / dhtmlxtree.js” > </ script> 
  5.  <！ - 自定义js文件 - >
  6.  <script src = “path / tree.js” > </ script> 
  7. </ HEAD>
  8. ......
  9. <！ - 资源组树容器 - >
  10. <div id = “treeBox” style = “ width ：100 ％; height ：98 ％; ” > </ div>  
 

JavaScript的：
 

 

  1. var tree = new dhtmlXTreeObject （“treeBox” ，“100％” ，“100％” ，0 ）; 
  2. 树。setImagePath （“path / imgs /” ）;
  3. 树。loadXML的（路径/ 树。这样做）;
  4. 树。setXMLAutoLoading （路径/ 树。这样做）;
  5.  
  6. 树。enableCheckBoxes （false ）; //不显示复选框 
  7.  
  8. 树。setOnClickHandler （clickHandler ）; //点击节点事件 
  9. 树。setOnOpenStartHandler （openStart ）; //开始展开节点事件 
  10. 树。setOnOpenEndHandler （openEnd ）; //展开节点结束事件 
  11.  
  12.  
  13. 函数openStart （itemId ）{ 
  14.  // ...
  15.  返回1 ; 
  16. }
  17.  
  18. 函数openEnd （itemId ）{
  19.  
  20. }
  21.  
  22. 函数clickHandler （itemId ）{ 
  23.  
  24. }
 

注意！为提高性能，树的加载都是一级一级的，即报道查看每次都只是通过tree.setOnOpenStartHandler(fun)方法将点击的结点ID发到后台，后台只返回此结点的下一级结点数据，而示例中为了简单起见直接把所有结点数据一起放在了一个文件中，这一点需要注意。


                

        

        

    

  


    

      

        

            

              
                
                  zouxuhang
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
树形展示数据——dhtmlxTree的使用

				
			

			

				

					学会改变自己——才能突破
				

				

					04-03
					
					2万+
					
				

			

		

		

			
				
在Java Web项目开发中，一般用JSP做前台数据展示，后台通过SSH框架来进行高效开发，有流程的控制，业务的处理和对数据库的各种处理，而数据则存放在Oracle等选择的数据库中。现在大家想这样一个问题，用户和什么打交道最多？很简单，用户主要是通过页面和系统打交道呢？那么数据的展示方式很多程度上决定着用户对此系统的评价。这里简单总结一下，除了html能够展示的方式其它的几种比较友好，比较实用的数

			
		

	



                

            
              



	

		

			

				
					
js动态树合集dhtmlXTree和dtree.rar

				
			

			

				

					07-11
				

			

		

		

			
				
js动态树合集dhtmlXTree和dtree.rar 讲解说明 和api

			
		

	



              


  
              

                


	

		

			

				
					
dhtmlxtree.js

				
			

			

				

					08-12
				

			

		

		

			
				
dhtmlxtree.jsdhtmlxtree.js

			
		

	





	

		

			

				
					
前端JS开发框架-DHTMLX--dhtmlXTree

				
			

			

				

					weixin_30369087的博客
				

				

					10-06
					
					165
					
				

			

		

		

			
				
介绍

　　dhtmlxTree是一个功能丰富的JavaScript树菜单 它允许您快速添加一个好看的,基于ajax的web页面的分层树。
　　treeview支持在线节点编辑、先进的拖放,三态复选框等等。由于特殊的技巧,这个JavaScript树控件能够迅速和有效地加载大数据。
　　在线Demo事例
　 在线原文API
特征：

　　注意,一些功能仅在专业版可用。...

			
		

	



		

			
		



	

		

			

				
					
一个好用的树-dhtmlXTree

				
			

			

				

					weixin_30263277的博客
				

				

					07-23
					
					238
					
				

			

		

		

			
				
dhtmlXTree是一个功能比较强大的树控件，基本上能满足大部分常规需求，比较好用。当然，在使用过程中还是发现一点点问题。下面是我整理的一些里面常用函数的说明（只有简单的说明，如果要看详细的说明，自己查看原函数去）：
构造函数dhtmlXTreeObject(htmlObject, width, height, rootId)//rootId 虚拟根节点，在界面上不会显示，...

			
		

	





	

		

			

				
					
DHTMLX TREE userdata 使用

				
			

			

				

					冬雨专栏
				

				

					11-12
					
					2854
					
				

			

		

		

			
				
<br />先看代码：<br />var TreeForJSON = new dhtmlXTreeObject('TreeForJSON', '100%', '100%', 0); <br />TreeForJSON.setImagePath("dhtmlx/codebase/imgs/csh_vista/");<br />TreeForJSON.enableDragAndDrop(true);<br />TreeForJSON.enableKeyboardNavigation(true)<br />Tre

			
		

	





	

		

			

				
					
dhtmlXTree 指南与实例(一)

				
			

			

				

					GoodShot的专栏
				

				

					07-08
					
					4253
					
				

			

		

		

			
				
官网：
http://dhtmlx.com/docs/products/dhtmlxTree/
 
 
dhtmlXTree 指南与实例
主要特性
多浏览器/多平台支持
全部由JavaScript控制
动态加载
XML支持
大数据树动态翻译(智能XML解析)
拖拽(同一个树,不同的树之间,不同的框架之间)
带多选框(CheckBox)的树(两态/三态)
定制图标(使用Ja

			
		

	





	

		

			

				
					
dhtmlxTree 树菜单.docx

				
			

			

				

					08-20
				

			

		

		

			
				
总之，dhtmlxTree 是一款功能全面且易于使用的树形菜单插件，通过上述介绍，我们可以了解到如何利用其提供的丰富特性和 API 来满足不同场景下的需求。无论是基本的布局调整还是复杂的交互设计，dhtmlxTree 都能够...

			
		

	





	

		

			

				
					
基于dhtmlxtree构建动态维护树

				
			

			

				

					09-21
				

			

		

		

			
				
本文介绍了如何使用DHTMLXTree组件构建一个动态维护树的完整流程，从数据库设计到前后端代码实现都进行了详细的说明。通过这种方式可以有效地管理具有层级关系的数据集，并为用户提供友好易用的操作界面。当然，这...

			
		

	





	

		

			

				
					
结点可以拖动，右键弹出操作菜单的树(dhtmlxtree改造)

				
			

			

				

					03-23
				

			

		

		

			
				
**dhtmlxtree基本介绍** dhtmlxtree是由DHTMLX公司开发的一款轻量级的JavaScript库，它提供了丰富的API和配置选项，使得开发者能够轻松地在网页上创建具有多种功能的树状视图。这个库支持多种浏览器，并且可以通过...

			
		

	





	

		

			

				
					
DhtmlXTree教程：创建动态树与数据加载

				
			

			

				

					
				

			

		

		

			
				
第五部分专门讨论了如何利用dom4j创建XML文件，作者给出了DhtmlXTree可接受的XML文档结构，并介绍了dom4j提供的API，如Element和Attribute元素操作，以及字符串转换。这一部分展示了如何将数据结构转化为符合...

			
		

	





	

		

			

				
					
dhtmlxTree v.3.0

				
			

			

				

					07-20
				

			

		

		

			
				
DHtmlXTree 调用xml http://blog.csdn.net/ymc0329/article/details/6619796

			
		

	





	

		

			

				
					
DhtmlxTree

				
			

			

				

					10-09
				

			

		

		

			
				
dhtmlx公司的系列组件包括以下几个，此处只上传的是其中的树控件:
包含dhtmlxTree(树型控件),dhtmlxTabbar(选项卡),dhtmlxGrid(数据表格),dhtmlxCombo(下拉选项),dhtmlxTreeGrid(树型表格),dhtmlxVault(文件上传控件),dhtmlxMenu(菜单),dhtmlxToolbar(工具条),dhtmlxCalendar(日历控件),dhtmlxFolders(展示台),dhtmlxColorPicker(调色板),dhtmlxWindows(窗口)。

			
		

	





	

		

			

				
					
一个简单的dhtmlxTree实现

				
			

			

				

					lazyRabbit的博客
				

				

					09-20
					
					500
					
				

			

		

		

			
				
最近一直在做后台的一些管理系统，用到dhtmlxTree的内容比较多，以前没有接触过，因此整理了一个简单的Demo（基于springMVC）。首先是页面部分:&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%&gt;
&lt;!DOCTYPE html PUBLIC...

			
		

	





	

		

			

				
					
dhtmlxTree示例 

				
			

			

				

					Tonny
				

				

					05-01
					
					282
					
				

			

		

		

			
				
 
http://dhtmlx.com 包含目录树、菜单、工具条等很多js控件，功能十分强大。现将dhtmlxTree 使用样例记录如下(包括目录树、上下文菜单)：
1、所需js文件
dhtmlxcommon.js
dhtmlxtree.js
dhtmlxtree_json.js
//菜单控件所需的js
dhtmlxprotobar.js
dhtmlxmenubar.js
dht...

			
		

	





	

		

			

				
					
利用js加载dhtmlXTree的树形菜单例子

				
			

			

				

					WeiOpOp
				

				

					01-15
					
					972
					
				

			

		

		

			
				
jsp



  
	
    
	
	
	
		window.onresize = function()
		{
			setCenter(0,30);
		}
		window.onload = function()
		{
			setCenter(0,30);
		}
	
  
  
  
  	
		
			
		
		
  	
		
			var flag1 = "province"

			
		

	





	

		

			

				
					
DHTMLXTree的使用

				
			

			

				

					柏修的专栏
				

				

					07-12
					
					4847
					
				

			

		

		

			
				
经过这几天对DHTMLXTree的折腾总算是有点眉目了，领导催得紧，组长紧的催。唉，把握这次机会来好好总结一下DHTMLXTree。还是老套路，首先来简单了解一下DHTMLXTree。DHTMLXTree是DHX系列其中关于树的部分，另外还有像DHTMLXGrid控件。基本都是使用js来实现tree的样式和数据加载，支持的格式有xml、json。有下面几个特点：特点
支持界面的拖拽
效率高在加载数据

			
		

	





	

		

			

				
					
dhtmlxtree的使用

				
			

			

				

					Novice_mx的专栏
				

				

					06-17
					
					633
					
				

			

		

		

			
				
var type= '1';
  var tree = new dhtmlXTreeObject(document.getElementById("treeBox"), "100%", "100%", 0);  
  tree.enableTreeLines(true);
      // tree.enableCheckBoxes(1);
      //tree.setSkin('dh

			
		

	





	

		

			

				
					
dhtmlxTree 使用示例 

				
			

			

				

					Tonny
				

				

					05-01
					
					307
					
				

			

		

		

			
				


http://dhtmlx.com 包含目录树、菜单、工具条等很多js控件，功能十分强大。现将dhtmlxTree 使用样例记录如下(包括目录树、上下文菜单)：
1、所需js文件
dhtmlxcommon.js
dhtmlxtree.js
dhtmlxtree_json.js
//菜单控件所需的js
dhtmlxprotobar.js
dhtmlxmenubar.js
dht...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值