注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

dhtmlxTree的使用指南  

2012-10-15 12:14:56|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

新浪微博:IT国子监(记得关注噢) http://weibo.com/itguozijian

效果图:

dhtmlxTree的使用指南 - 天涯草 - 天涯草
 
 


dhtmlxTree是一个在WEB页面上实现树状显示的JavaScript组件。提供丰富的操作APIAJAX支持和drag-n-drop功能。


优点:

1.添加节点、修改节点标题样式及图标 

2.CheckBox功能

3.节点的查找定位以及拖动

4.树数据是从特定格式的XML文件(或字符串)中装载

5.多浏览器/多平台支持

6.全部由JavaScript控制

7.动态加载

8.大数据树动态翻译(智能XML解析)

9.支持Jsp  支持ASP.NET

10.支持  IE 5.5或更高版本  Mac OS X Safari   Mozilla 1.4 或更高版本   FireFox 0.9 或更高版本  Opera (Xml加载支持取决于浏览器版本)


准备工作:

  下载urlhttp://www.onlinedown.net/soft/4831.htm


dhtmlxTree.zip文件说明:

1)包内包含以下几个文件:  

codebase: 核心包

doc: 文档信息。

sources :ext核心包。 

samples:树形菜单实例。


创建dhtmlxTree(实例): 1)新建一个web文件(*.html*.jsp...都可以)

       首先引入cssjs文件:  

<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">

<script  src="../../codebase/dhtmlxcommon.js"></script>

<script  src="../../codebase/dhtmlxtree.js"></script>

  <div class="dtree"></div> 

<div id="treeboxbox_tree" style="width:200;height:200"></div>

<script>

    tree=newdhtmlXTreeObject("treeboxbox_tree","100%","100%",0);

</script>

注:构造函数dhtmlXTreeObject(htmlObject,width,height,rootId)

//rootId虚拟根节点,在界面上不会显示,一般取值


设置一些初始化参数设置

//指明了树图标的路径

tree.setImagePath("<%=imgPath%>/tree/");

//设置url编码格式为utf-8

tree.setEscapingMode("utf8");

//是否显示复选框

tree.enableCheckBoxes(1);

//允许三种状态的复选框(全选、不选、部分选中)

tree.enableThreeStateCheckboxes(1);

//设置tree的提示,提示内容为item的text

tree.enableAutoTooltips(1);


从XML加载DhtmlXTree树

从xml字符串加载树

loadXMLString(xmlString,afterCall)//afterCall-function which will be called after xml loading

从xml文件加载树

loadXML(file,afterCall);

vars_loadURL=‘<%basePath%>’+'/jsp/common/BpmUtilAction.do?method=getXml';

tree.setXMLAutoLoading(s_loadURL);

tree.loadXML(s_loadURL);

方法扩展:

设置拖动事件

setDragHandler(func)


设置是否允许拖拽

//mode - enabled/disabled [ can be true/false/temporary_disabled - last value mean that tree can be D-n-D can be switched to true later ]

//rmode - enabled/disabled drag and drop on super root

enableDragAndDrop(mode,rmode)


设置是否允许IE缓存

preventIECashing=function(mode)//mode - enable/disable random seed ( disabled by default )


设置是否允许选中节点名称高亮显示

enableHighlighting(mode)//mode - 1 - on, 0 - off

是否允许图片可点击和拖拽(clickable and dragable)

enableActiveImages(mode)// mode - 1 - on, 0 - off


设置节点获得焦点

focusItem(itemId)


获取所有无子节点的节点id

getAllChildless()

getAllLeafs()


获取所有有子节点的节点id

getAllItemsWithKids()


获取所有被选中节点id,不包括第三中状态的节点(部分选中的节点)

getAllChecked()


获取所有被选中节点id,包括第三中状态的节点(部分选中的节点)

getAllCheckedBranches()


获取节点下所有未选中的节点id,不传递itemId表示从根节点开始查找

getAllUnchecked(itemId)


获取所有部分选中的节点id(因部分子节点选中而被选中的节点)

getAllPartiallyChecked()


设置节点样式

setItemStyle(itemId,style_string)


设置是否允许拖拽图片

enableImageDrag(mode)

set function called when tree item draged over another item

setOnDragIn(func)


设置拖拽是是否允许自动滚动

enableDragAndDropScrolling(mode)

 
  具体配置功能请参照官网实例。
  评论这张
 
阅读(2158)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016