dhtmlxtree树介绍

zouxuhang

于 2018-04-08 09:09:33 发布

阅读量688

点赞数

分类专栏：前端文章标签： Dhtmlx树

本文链接：https://blog.csdn.net/zouxuhang/article/details/79847207

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

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

1.初始配置

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

2.树形容器

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

3.简单配置（tree.js）

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

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

//设置树形节点所用图片路径
树。setImagePath （“路径/ IMGS /” ）;
//设置默认的数据格式，包括：JSON XML CSV
树。setDataMode （'XML' ）;
//设置数据来源，dhtmlxTree支持多种数据格式，这里是XML格式
// file / xmlString：xml文件路径或xml字符串;函数：可选参数，当数据载入之后回调
树。loadXML的（文件/ URL ，函数）;
树。loadXMLString （的xmlString ，函数）;
//数据获取
树。getUserData （ID ，“名称” ）;
树。getItemText （ID ）;
VAR selectedItems = 树。getAllChecked （）; //获取所有选中的商品，返回的itemId，多个的itemId用逗号分隔
//设置显示复选框
// mode：true - 显示所有复选框，false - 隐藏所有复选框
// hidden：true - 不渲染复选框，false - 可通过showItemCheckbox（）方法显示复选框
树。enableCheckBoxes （模式，隐藏）;
//设置为三态复选框
树。enableThreeStateCheckboxes （真| 假）;
//设置复选框可用状态
树。disableCheckbox （的itemId ，模式）;
//设置复选框选中状态
树。setCheck （ID ，模式）;
//获取节点的选中状态
VAR checkState = 树。isItemChecked （的itemId ）;
//设置显示单选按钮
树。enableRadiobuttons （真）;
//设置单选按钮可用状态
树。enableRadiobuttons （真，的itemId ）;
//设置只选一个的单选按钮模式mode：true / false，itemId：这个节点将被默认选中
树。enableSingleRadioMode （模式，的itemId ）;
//设置节点状态
//选中节点mode：true - 节点被选中后会调用设置的回调函数preserve：true - 保存之前的选中
树。选择信息（的itemId ，模式，保存）;
//清除选中
树。clearSelection （的itemId ）;
//使用多选，即可使用ctrl +点击选中多个节点model：true / false，strict：true - 同一级节点才能多选
树。enableMultiselection （模式，严格）;
//设置节点图片
树。setItemImage （的的itemId ，image0 ，图像1 ）; // image0：打开状态图片，image1：收起状态图片
//设置自动载入，可提高性能
树。setXMLAutoLoading （URL ）;

4. xml文件的格式

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

<？XML版本= '1.0' 编码= 'UTF-8' ？>
<tree id = “0” >
<item text = “item0” id = “1” >
<userdata name = “dataName0” > data0 </ userdata>
<userdata name = “dataName1” > data1 </ userdata>
......
<item text = “item1” id = “2” >
.......
</项目>
......
</项目>
......
</树>

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

必选属性：

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

可选属性：

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

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

5.节点事件

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

//设置节点点击事件
树。setOnClickHandler （tonclick ）;
函数tonclick （id ）{
控制台。日志（“项目” + 树。getItemText （ID ）+ “选择” ）;
};
//设置节点选中事件
树。setOnCheckHandler （toncheck ）;
函数toncheck （id ，state ）{
控制台。日志（“项目” + 树。getItemText （ID ）+ “是” + （（州）？“检查” ：“未登记” ））;
};
//设置开始展开节点事件
树。setOnOpenStartHandler （topenstart ）;
//设置展开节点结束事件
树。setOnOpenEndHandler （topenend ）;

6.完整的例子

HTML：

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

JavaScript的：

var tree = new dhtmlXTreeObject （“treeBox” ，“100％” ，“100％” ，0 ）;
树。setImagePath （“path / imgs /” ）;
树。loadXML的（路径/ 树。这样做）;
树。setXMLAutoLoading （路径/ 树。这样做）;
树。enableCheckBoxes （false ）; //不显示复选框
树。setOnClickHandler （clickHandler ）; //点击节点事件
树。setOnOpenStartHandler （openStart ）; //开始展开节点事件
树。setOnOpenEndHandler （openEnd ）; //展开节点结束事件
函数openStart （itemId ）{
// ...
返回1 ;
}
函数openEnd （itemId ）{
}
函数clickHandler （itemId ）{
}

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

zouxuhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dhtmlxtree树介绍

dhtmlxTree是一个灵活，智能，易用的JS树形组件，它为开发者提供了丰富的特性，包括高级拖拽功能，动态载入节点，自定义视图，无限数量节点等.dhtmlxTree通过AJAX技术进行交互，因此无需刷新页面即可更新数据。重要的是，dhtmlxTree提供了完整的API以节省开发时间。下面将通过一个简单的例子演示其使用方法。1.初始配置&lt;！ - tree.html引入必要文...
复制链接

扫一扫