(转)jQuery LigerUI 插件介绍及使用之ligerTree

一，简介

ligerTree的功能列表：

1,支持本地数据和服务器数据(配置data或者url)

2,支持原生html生成Tree

3,支持动态获取增加/修改/删除节点

4,支持大部分常见的事件

5,支持获取选中行等常见的接口方法

二，第一个例子

引入库文件

遵循LigerUI系列插件的设计原则(插件尽量单独)，ligerTree是一个单独的插件，也就是说只需要引入plugins/ligerTree.js和样式css文件就可以使用(当然必须先引入jQuery)，在这个例子中，我把tree用到的样式和图片分离了出来，有兴趣的朋友可以下载来看看

<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css" rel="stylesheet" type="text/css"/>
<script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

加入HTML

<ul id="tree1">
<li>
<span>节点1</span>
<ul>
<li>
<span>节点1.1</span>
<ul>
<li><span>节点1.1.1</span></li>
<li><span>节点1.1.2</span></li>
</ul>
</li>
<li><span>节点1.2</span></li>
</ul>
</li> 
</ul>

调用ligerTree

$("#tree1").ligerTree(); 

效果图

三，常用场景

场景一：不使用复选框：

$("#tree2").ligerTree({ checkbox: false });

场景二：不使用复习框和图标：

$("#tree3").ligerTree({ checkbox: false, parentIcon: null, childIcon: null });

效果如图：

场景三：配置data参数加载树：

$("#tree1").ligerTree({ data: [
{ text: '节点1', children: [
{ text: '节点1.1' },
{ text: '节点1.2' },
{ text: '节点1.3', children: [
{ text: '节点1.3.1' },
{ text: '节点1.3.2' }
]
},
{ text: '节点1.4' }
]
},
{ text: '节点2' },
{ text: '节点3' },
{ text: '节点4' }
]
});

场景四：配置url参数加载树：

$("#tree1").ligerTree({ url: 'json.txt' });

场景五：动态增加节点：

var manager =null;
$(function ()
{
$(".l-tree").ligerTree({ checkbox: true });
manager = $(".l-tree").ligerGetTreeManager();
});
function addTreeItem()
{
var node = manager.getSelected();
var nodes = [];
nodes.push({ text: ‘测试节点’});
if (node)
manager.append(node.target, nodes); 
else
manager.append(null, nodes);
}

场景六：删除节点：

function removeTreeItem()
{
var node = manager.getSelected();
if (node)
manager.remove(node.target);
else
alert('请先选择节点');
}

场景七：折叠/展开节点：

function collapseAll()
{
manager.collapseAll();
}
function expandAll()
{
manager.expandAll();
}

场景八：事件支持：

$(function ()
{
$("#tree1").ligerTree(
{ 
url: 'json.txt', 
onBeforeExpand: onBeforeExpand,
onExpand: onExpand,
onBeforeCollapse: onBeforeCollapse,
onCollapse: onCollapse, 
onBeforeSelect: onBeforeSelect,
onSelect: onSelect,
onCheck: onCheck
}); 
});
function onBeforeSelect(note)
{
alert('onBeforeSelect:'+ note.data.text);
returntrue;
}
function onSelect(note)
{
alert('onSelect:'+ note.data.text);
}
function onBeforeExpand(note)
{
alert('onBeforeExpand:'+ note.data.text);
}
function onExpand(note)
{
alert('onExpand:'+ note.data.text);
}
function onBeforeCollapse(note)
{
alert('onBeforeCollapse:'+ note.data.text);
}
function onCollapse(note)
{
alert('onCollapse:'+ note.data.text);
}
function onCheck(note, checked)
{
alert('onCheck:'+ note.data.text +" checked:"+ checked);
} 

场景九：异步动态加载节点

var manager =null;
$(function ()
{
$("#tree1").ligerTree(
{ 
url: 'json.txt', 
onBeforeExpand: onBeforeExpand 
});
manager = $("#tree1").ligerGetTreeManager();
}); 
function onBeforeExpand(note)
{
if (note.data.children && note.data.children.length ==0)
{
//这里模拟一个加载节点的方法，append方法也用loadData(target,url)代替
manager.append(note.target, [
{ text: note.data.text +"'s child1" },
{ text: note.data.text +"'s child2" },
{ text: note.data.text +"'s child3" }
]);
}
} 

四，API文档

插件方法详细

{jQuery} ligerTree(p)

描述:

使一段html配置为树结构。

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.url	{String}	设置一个url用于加载数据	null
p.method	{String}	提交数据的方式	'POST'
p.data	{String}	设置一个本地数据data用于加载数据	null
p.checkbox	{Bool}	是否显示复选框	true
p.parentIcon	{String}	非叶节点的图标	'folder'
p.childIcon	{String}	叶节点的图标	'leaf'
p.attribute	{Array}	属性,获取行数据时很有作用	['id','url']
p.nodeWidth	{Int}	节点的宽度	70
p.onBeforeExpand	{Function}	展开前事件,可以通过返回false来阻止继续展开参数1：node(node.data和node.target) target是DOM对象	null
p.onExpand	{Function}	展开事件参数1：node(node.data和node.target) target是DOM对象	null
p.onBeforeCollapse	{Function}	折叠前事件,可以通过返回false来阻止继续折叠参数1：node(node.data和node.target) target是DOM对象	null
p.onCollapse	{Function}	折叠事件参数1：node(node.data和node.target) target是DOM对象	null
p.onBeforeSelect	{Function}	选择前事件,可以通过返回false来阻止继续选择参数1：node(node.data和node.target) target是DOM对象	null
p.onSelect	{Function}	选择事件参数1：node(node.data和node.target) target是DOM对象	null
p.onCheck	{Function}	复选框事件参数1：node(node.data和node.target) target是DOM对象参数2：checked 是否选中	null
p.onSuccess	{Function}	异步加载数据成功事件	null
p.onError	{Function}	异步加载数据失败事件参数1：XMLHttpRequest 参数2：textStatus 参数2：errorThrown	null

返回值:: {jQuery} jQuery对象

ligerTree 接口方法列表（可通过LigerGetTreeManager获取对象）
append(parentNode, newdata) 增加节点集合
clear() 清空
collapseAll() 全部节点都折叠
demotion(treenode) 降级为叶节点级别
expandAll() 全部节点都展开
getChecked() 获取选择的行(复选框)
getData() 获取树的数据源
getParentTreeItem(treenode, level) 获取父节点
getSelected() 获取选择的行
hasChildren(treenode) 是否包含子节点

loadData(node, url, param) 加载数据
remove(node) 删除节点
upgrade(treenode) 升级为父节点级别

方法详细

append(parentNode, newdata)

描述:

增加节点集合

参数列表:

参数名	类型	描述	默认值
parentNode	{Object}	节点(DOM 对象标签为li),加载的数据将增加到这个节点下面
newdata	{Array}	节点数据的集合,该参数为数组

clear()

描述:

清空

collapseAll()

描述:

全部节点都折叠

demotion(treenode)

描述:

降级为叶节点级别

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象标签为li)

expandAll()

描述:

全部节点都展开

{Array} getChecked()

描述:

获取选择的行(复选框)

返回值:: {Array} Nodes 每一个Node包括的参数有：data(数据源),target(DOM 对象标签为li)

{Array} getData()

描述:

获取树的数据源

返回值:: {Array} Tree Data Object

{Bool} getParentTreeItem(treenode, level)

描述:

获取父节点

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象标签为li)
level	{Object}	获取第N级别的父节点(选填，不填时表示上一级父节点)

返回值:: {Bool} hasChildren

{Object} getSelected()

描述:

获取选择的行

返回值:: {Object} Node 节点包括的参数有：data(数据源),target(DOM 对象标签为li)

{Bool} hasChildren(treenode)

描述:

是否包含子节点

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象标签为li)

返回值:: {Bool} hasChildren

loadData(node, url, param)

描述:

加载数据

参数列表:

参数名	类型	描述	默认值
node	{Object}	节点(DOM 对象标签为li),加载的数据将增加到这个节点下面
url	{String}	要加载数据的URL
param	{String}	提交数据的附件的参数

remove(node)

描述:

删除节点

参数列表:

参数名	类型	描述	默认值
node	{Object}	节点(DOM 对象标签为li)

upgrade(treenode)

描述:

升级为父节点级别

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象标签为li)

五,Demo下载

点击下载（已更新源码地址）更多的文档和API后面会渐渐补充,浏览更多的应用请访问http://demo.LigerUI.com

02.LigerUI

LigerUI

谢略
关注 - 25
粉丝 - 620

推荐博客

取消关注

(请您对文章做出评价)

« 上一篇：jQuery LigerUI 插件介绍及使用之ligerDateEditor
» 下一篇：jQuery LigerUI V1.0(包括API和全部源码) 发布

posted on 收藏

#1楼引用

好东西，性能怎么样

#2楼引用

对啊，这个插件功能强大啊，

#3楼引用

不错!

#4楼引用

想参考一下脚本，但发现脚本被压缩过的，是否有未压缩版的？liger.googlecode.com这个访问出错

支持(0)反对(0)

#5楼引用

2011-04-18 09:27

请问，这个开源吗？发现脚本是被压缩过，也不太好看？

支持(0)反对(0)

#6楼引用

2011-04-18 09:33

@Genius Zhang
不好意思，地址搞错了，是http://ligerui.googlecode.com/

支持(0)反对(0)

#7楼引用

2011-04-18 09:33

@小狮座
下载这个是压缩过的，可以到上面说的这个地址去下载源码

#8楼引用

很强大,不错！

#9楼引用

好东西！

#10楼引用

不错，支持一下。。。

#11楼引用

@高海东
tree node 节点的dom结构是采用<ul></ul>的方式，最大程度地减少了生成html的代码量，效率更加高。

#12楼引用

非常非常不错

#13楼引用

怎么指定节点url的目标？比如点击打开在指定框架中？

支持(0)反对(0)

#14楼引用

2011-05-16 09:16

@zhouyu
树提供了接口，建议看下API，在指定框架中打开并不难

支持(0)反对(0)

#15楼引用

2011-06-22 16:19

你好，谢略。能不能改tree 的结点图标。包过那个收缩的图标

支持(0)反对(0)

#16楼引用

2011-06-24 21:27

@micenter
p.parentIcon {String} 非叶节点的图标 'folder'
p.childIcon {String} 叶节点的图标 'leaf'

可以修改这两个

#17楼引用

#18楼引用

]

#19楼引用

另外请教如果这种方式调用，如何将其它一些数据如attribute也加载到tree，可以再客户端访问？

支持(0)反对(0)

#20楼引用

2011-06-29 09:24

@happylys
属性名需要加上双引号："text"

支持(0)反对(0)

#21楼引用

2011-06-29 09:26

@happylys
json数据源里面有的属性都可以在客服端访问的。
如果需要绑定到树节点Dom对象(tagName为li)，可以配置attribute，默认是['id','url']

支持(0)反对(0)

#22楼引用

2011-08-08 18:59

最近用了楼主的ligerTree，感觉不错，提供选择使用的api很多
但有几个问题
1. 展开，收起的动画效果可以设置参数进行调整么
2. 性能问题在IE6中，一百多个<li>用起来就很慢了，我看到ligerui.all.js中有很多地方频繁调用$(xxx)方法，可以多用一些临时变量处理下，性能应该会有很大改善
3. 为啥资源文件那么大一个个的，一个icon 10+k @.@

支持(0)反对(0)

#23楼引用

2011-11-17 21:42

我用了你的下拉框tree，请问一般下拉框是分前台显示值和它对应的id值，在你这个tree中我怎么运用？因为我后台操作需要的id值，并非前台显示的文本值！

支持(0)反对(0)

#24楼引用

2011-11-20 15:38

@旋转
可以参考http://ligerui.com/demos/tree/treedbdata.htm这个

支持(0)反对(0)

#25楼引用

2011-11-20 15:41

@cxlong_beta
资源文件可能没有太多考虑效率，可以考虑合并图片。。。
新版本的展开效果可以设置这个参数：slide (false)

支持(0)反对(0)

#26楼引用

2011-11-21 16:12

value有值，但是在ie中没有值楼主怎么解决

支持(0)反对(0)

#27楼引用

2011-11-21 16:28

现在好了，是ie在调试时不支持动态显示我日了

支持(0)反对(0)

#28楼引用

2012-05-21 17:09

请问如何在onclick事件中同时触发onCheck事件并改变复选框的状态？在zTree中可以实现，但ligerUI中不知道如何实现

支持(0)反对(0)

#29楼引用

2012-08-10 17:37

要是数据在加载时，怎么让节点那出现等待的小图标啊？？？

支持(0)反对(0)

#30楼引用

2012-09-24 23:34

请教一下，如果js对tree进行默认选中呀

支持(0)反对(0)

#31楼引用

2012-10-11 18:13

你好，我想问下如果
comboBox里的tree做异步加载的话
ligerTree的ligerGetTreeManager() 该怎么使用呢？
按照demo里的方式来，获取不到。
谢谢！

支持(1)反对(0)

#32楼引用

2012-10-16 23:00

除了ligerUI自己提供的实例和API以外，没有一点有用的。

#33楼引用

tree可以在url里面传参吗

#34楼引用

请问下事件支持中，比如onSelect，当事件发生时，如何获取该节点到根目录的所有节点？
应用场景是这样的：我现在要对某个文件夹根目录做目录树，但是通过处理后产生的书目录结构的每一个节点中中只有当前文件夹的名字，现在我想单击某个节点，然后找到从根目录到该节点的路径（这个路径有其它用途），我该怎么实现？谢谢！

其实就是想要得到一个路径。谢谢！

一，简介

ligerTree的功能列表：

1,支持本地数据和服务器数据(配置data或者url)

2,支持原生html生成Tree

3,支持动态获取增加/修改/删除节点

4,支持大部分常见的事件

5,支持获取选中行等常见的接口方法

二，第一个例子

引入库文件

<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css" rel="stylesheet" type="text/css"/>
<script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

加入HTML

<ul id="tree1">
<li>
<span>节点1</span>
<ul>
<li>
<span>节点1.1</span>
<ul>
<li><span>节点1.1.1</span></li>
<li><span>节点1.1.2</span></li>
</ul>
</li>
<li><span>节点1.2</span></li>
</ul>
</li> 
</ul>

调用ligerTree

$("#tree1").ligerTree(); 

效果图

三，常用场景

场景一：不使用复选框：

$("#tree2").ligerTree({ checkbox: false });

场景二：不使用复习框和图标：

$("#tree3").ligerTree({ checkbox: false, parentIcon: null, childIcon: null });

效果如图：

场景三：配置data参数加载树：

$("#tree1").ligerTree({ data: [
{ text: '节点1', children: [
{ text: '节点1.1' },
{ text: '节点1.2' },
{ text: '节点1.3', children: [
{ text: '节点1.3.1' },
{ text: '节点1.3.2' }
]
},
{ text: '节点1.4' }
]
},
{ text: '节点2' },
{ text: '节点3' },
{ text: '节点4' }
]
});

场景四：配置url参数加载树：

$("#tree1").ligerTree({ url: 'json.txt' });

场景五：动态增加节点：

var manager =null;
$(function ()
{
$(".l-tree").ligerTree({ checkbox: true });
manager = $(".l-tree").ligerGetTreeManager();
});
function addTreeItem()
{
var node = manager.getSelected();
var nodes = [];
nodes.push({ text: ‘测试节点’});
if (node)
manager.append(node.target, nodes); 
else
manager.append(null, nodes);
}

场景六：删除节点：

function removeTreeItem()
{
var node = manager.getSelected();
if (node)
manager.remove(node.target);
else
alert('请先选择节点');
}

场景七：折叠/展开节点：

function collapseAll()
{
manager.collapseAll();
}
function expandAll()
{
manager.expandAll();
}

场景八：事件支持：

$(function ()
{
$("#tree1").ligerTree(
{ 
url: 'json.txt', 
onBeforeExpand: onBeforeExpand,
onExpand: onExpand,
onBeforeCollapse: onBeforeCollapse,
onCollapse: onCollapse, 
onBeforeSelect: onBeforeSelect,
onSelect: onSelect,
onCheck: onCheck
}); 
});
function onBeforeSelect(note)
{
alert('onBeforeSelect:'+ note.data.text);
returntrue;
}
function onSelect(note)
{
alert('onSelect:'+ note.data.text);
}
function onBeforeExpand(note)
{
alert('onBeforeExpand:'+ note.data.text);
}
function onExpand(note)
{
alert('onExpand:'+ note.data.text);
}
function onBeforeCollapse(note)
{
alert('onBeforeCollapse:'+ note.data.text);
}
function onCollapse(note)
{
alert('onCollapse:'+ note.data.text);
}
function onCheck(note, checked)
{
alert('onCheck:'+ note.data.text +" checked:"+ checked);
} 

场景九：异步动态加载节点

var manager =null;
$(function ()
{
$("#tree1").ligerTree(
{ 
url: 'json.txt', 
onBeforeExpand: onBeforeExpand 
});
manager = $("#tree1").ligerGetTreeManager();
}); 
function onBeforeExpand(note)
{
if (note.data.children && note.data.children.length ==0)
{
//这里模拟一个加载节点的方法，append方法也用loadData(target,url)代替
manager.append(note.target, [
{ text: note.data.text +"'s child1" },
{ text: note.data.text +"'s child2" },
{ text: note.data.text +"'s child3" }
]);
}
} 

四，API文档

插件方法详细

{jQuery} ligerTree(p)

描述:

使一段html配置为树结构。

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.url	{String}	设置一个url用于加载数据	null
p.method	{String}	提交数据的方式	'POST'
p.data	{String}	设置一个本地数据data用于加载数据	null
p.checkbox	{Bool}	是否显示复选框	true
p.parentIcon	{String}	非叶节点的图标	'folder'
p.childIcon	{String}	叶节点的图标	'leaf'
p.attribute	{Array}	属性,获取行数据时很有作用	['id','url']
p.nodeWidth	{Int}	节点的宽度	70
p.onBeforeExpand	{Function}	展开前事件,可以通过返回false来阻止继续展开参数1：node(node.data和node.target) target是DOM对象	null
p.onExpand	{Function}	展开事件参数1：node(node.data和node.target) target是DOM对象	null
p.onBeforeCollapse	{Function}	折叠前事件,可以通过返回false来阻止继续折叠参数1：node(node.data和node.target) target是DOM对象	null
p.onCollapse	{Function}	折叠事件参数1：node(node.data和node.target) target是DOM对象	null
p.onBeforeSelect	{Function}	选择前事件,可以通过返回false来阻止继续选择参数1：node(node.data和node.target) target是DOM对象	null
p.onSelect	{Function}	选择事件参数1：node(node.data和node.target) target是DOM对象	null
p.onCheck	{Function}	复选框事件参数1：node(node.data和node.target) target是DOM对象参数2：checked 是否选中	null
p.onSuccess	{Function}	异步加载数据成功事件	null
p.onError	{Function}	异步加载数据失败事件参数1：XMLHttpRequest 参数2：textStatus 参数2：errorThrown	null

返回值:: {jQuery} jQuery对象

ligerTree 接口方法列表（可通过LigerGetTreeManager获取对象）
append(parentNode, newdata) 增加节点集合
clear() 清空
collapseAll() 全部节点都折叠
demotion(treenode) 降级为叶节点级别
expandAll() 全部节点都展开
getChecked() 获取选择的行(复选框)
getData() 获取树的数据源
getParentTreeItem(treenode, level) 获取父节点
getSelected() 获取选择的行
hasChildren(treenode) 是否包含子节点

loadData(node, url, param) 加载数据
remove(node) 删除节点
upgrade(treenode) 升级为父节点级别

方法详细

append(parentNode, newdata)

描述:

增加节点集合

参数列表:

参数名	类型	描述	默认值
parentNode	{Object}	节点(DOM 对象标签为li),加载的数据将增加到这个节点下面
newdata	{Array}	节点数据的集合,该参数为数组

clear()

描述:

清空

collapseAll()

描述:

全部节点都折叠

demotion(treenode)

描述:

降级为叶节点级别

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象标签为li)

expandAll()

描述:

全部节点都展开

{Array} getChecked()

描述:

获取选择的行(复选框)

返回值:: {Array} Nodes 每一个Node包括的参数有：data(数据源),target(DOM 对象标签为li)

{Array} getData()

描述:

获取树的数据源

返回值:: {Array} Tree Data Object

{Bool} getParentTreeItem(treenode, level)

描述:

获取父节点

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象标签为li)
level	{Object}	获取第N级别的父节点(选填，不填时表示上一级父节点)

返回值:: {Bool} hasChildren

{Object} getSelected()

描述:

获取选择的行

返回值:: {Object} Node 节点包括的参数有：data(数据源),target(DOM 对象标签为li)

{Bool} hasChildren(treenode)

描述:

是否包含子节点

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象标签为li)

返回值:: {Bool} hasChildren

loadData(node, url, param)

描述:

加载数据

参数列表:

参数名	类型	描述	默认值
node	{Object}	节点(DOM 对象标签为li),加载的数据将增加到这个节点下面
url	{String}	要加载数据的URL
param	{String}	提交数据的附件的参数

remove(node)

描述:

删除节点

参数列表:

参数名	类型	描述	默认值
node	{Object}	节点(DOM 对象标签为li)

upgrade(treenode)

描述:

升级为父节点级别

参数列表:

参数名	类型	描述	默认值
treenode	{Object}	节点(DOM 对象标签为li)

五,Demo下载

点击下载（已更新源码地址）更多的文档和API后面会渐渐补充,浏览更多的应用请访问http://demo.LigerUI.com